fix(dropdown): optional scrollhint on ios devices or firefox mobile

IOS devices do not show a scrollbar when the content is not scrolled. This is a design decision by apple and cannot be adjusted via CSS (for example by -webkit-scrollbar)
A similiar behavior is built into firefox mobile (also on Android)

That said if one opens a dropdown it is not clear, if the shown entries are the only available options or if the user has to scroll down to see more, which is confusing and probably leads to wrong selections (because the user did not know of more choices, because of avoided scrolling)

This PR provides the optional scrollhint class to be used for the menu to show a short animation hint on the right edge (where the usual scrollbar appears) when the dropdown opens to indicate swiping to see more entries

Author: lubber-de

src/definitions/modules/dropdown.less

@@ -608,6 +608,42 @@ select.ui.dropdown {
     border: none !important;
     box-shadow: none !important;
   }
+  & when (@variationDropdownScrollhint) {
+    /* CSS specific to iOS devices or firefox mobile only  */
+    @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
+      @media (-moz-touch-enabled), (pointer: coarse) {
+        .ui.dropdown .scrollhint.menu:not(.hidden):before {
+          animation: scrollhint @scrollhintDuration @scrollhintEasing @scrollhintIteration;
+          content: '';
+          z-index: @scrollhintZIndex;
+          display: block;
+          position: absolute;
+          opacity: 0;
+          right: @scrollhintOffsetRight;
+          top: 0;
+          height: 100%;
+          border-right: @scrollhintRightBorder;
+          border-left: @scrollhintLeftBorder;
+          border-image: linear-gradient(to bottom, @scrollhintStartColor, @scrollhintEndColor) 1 100%;
+        }
+
+        .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
+          border-image: linear-gradient(to bottom, @invertedScrollhintStartColor, @invertedScrollhintEndColor) 1 100%;
+        }
+
+        @keyframes scrollhint {
+          0% {
+            opacity: 1;
+            top: 100%;
+          }
+          100% {
+            opacity: 0;
+            top: 0;
+          }
+        }
+      }
+    }
+  }
 }
 
 & when (@variationDropdownSearch) {

src/themes/default/globals/variation.variables

@@ -414,6 +414,7 @@
 @variationDropdownFluid: true;
 @variationDropdownFloating: true;
 @variationDropdownPointing: true;
+@variationDropdownScrollhint: true;
 @variationDropdownSizes: @variationAllSizes;
 
 /* Embed */

src/themes/default/modules/dropdown.variables

@@ -374,6 +374,17 @@
 @pointingUpwardMenuBorderRadius: @borderRadius;
 @pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0 0 @menuBorderColor;
 
+/* Scrollhint */
+@scrollhintWidth: 0.25em;
+@scrollhintRightBorder: @scrollhintWidth solid;
+@scrollhintLeftBorder: 0;
+@scrollhintZIndex: 15;
+@scrollhintDuration: 2s;
+@scrollhintEasing: @defaultEasing;
+@scrollhintIteration: 2;
+@scrollhintOffsetRight: @scrollhintWidth;
+@scrollhintStartColor: rgba(0, 0, 0, 0.75);
+@scrollhintEndColor: rgba(0, 0, 0, 0);
 
 /*--------------
     Inverted
@@ -451,3 +462,7 @@
 
 @invertedLabelIconOpacity: 0.6;
 @invertedLabelIconHoverOpacity: 0.8;
+
+/* Scrollhint */
+@invertedScrollhintStartColor: rgba(255, 255, 255, 0.75);
+@invertedScrollhintEndColor: rgba(255, 255, 255, 0);