Adds scrolling dropdown variation

src/definitions/collections/menu.less

@@ -1051,7 +1051,7 @@ Floated Menu / Item
 }
 
 /* Item Icon Only */
-.ui.menu .icon.item .icon {
+.ui.menu .icon.item > .icon {
   margin: 0em;
   width: auto;
 }

src/definitions/modules/dropdown.js

@@ -321,7 +321,7 @@ $.fn.dropdown = function(parameters) {
 
         hideSubMenus: function() {
           var
-            $subMenus = $menu.find(selector.menu)
+            $subMenus = $menu.children(selector.item).find(selector.menu)
           ;
           $subMenus.transition('hide');
         },
@@ -1768,7 +1768,7 @@ $.fn.dropdown = function(parameters) {
                 ;
               }
               else {
-                module.error(error.transition, settings.transition);
+                module.error(error.noTransition, settings.transition);
               }
             }
           },
@@ -2079,7 +2079,7 @@ $.fn.dropdown.settings = {
     action       : 'You called a dropdown action that was not defined',
     alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
     method       : 'The method you called is not defined.',
-    transition   : 'The requested transition was not found'
+    noTransition : 'This module requires ui transitions <https://github.com/Semantic-Org/UI-Transition>'
   },
 
   metadata: {

src/definitions/modules/dropdown.less

@@ -177,6 +177,7 @@
 }
 
 .ui.dropdown .menu > .input {
+  display: block;
   margin: @menuInputMargin;
   min-width: @menuInputMinWidth;
 }
@@ -885,6 +886,66 @@ select.ui.dropdown {
      Simple
 ---------------*/
 
+/*  Selection Menu */
+.ui.scrolling.dropdown .menu {
+  overflow-x: hidden;
+  overflow-y: auto;
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
+  min-width: @scrollingMinWidth !important;
+}
+
+.ui.dropdown .scrolling.menu {
+  position: static;
+  overflow: auto;
+  min-width: @scrollingMinWidth !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  border: none;
+  border-top: 1px solid @menuBorderColor;
+}
+.ui.dropdown > .animating.menu .scrolling.menu,
+.ui.dropdown > .visible.menu .scrolling.menu {
+  display: block;
+}
+
+/* Scrollbar in IE */
+@media all and (-ms-high-contrast:none) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    min-width: ~"calc(100% - "@scrollBarWidth~")";
+  }
+}
+@media only screen and (max-width : @largestMobileScreen) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: @scrollingMobileMaxMenuHeight;
+  }
+}
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: @scrollingTabletMaxMenuHeight;
+  }
+}
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: @scrollingComputerMaxMenuHeight;
+  }
+}
+@media only screen and (min-width: @widescreenMonitorBreakpoint) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: @scrollingWidescreenMaxMenuHeight;
+  }
+}
+
+/*--------------
+     Simple
+---------------*/
+
 /* Displays without javascript */
 
 .ui.simple.dropdown .menu:before,

src/themes/default/modules/dropdown.variables

@@ -32,7 +32,8 @@
 @menuTransition: none;
 
 @menuBorderWidth: 1px;
-@menuBorder: @menuBorderWidth solid @borderColor;
+@menuBorderColor: @borderColor;
+@menuBorder: @menuBorderWidth solid @menuBorderColor;
 @menuBoxShadow: 0px 1px 4px 0px @borderColor;
 @menuBorderRadius: 0em 0em @borderRadius @borderRadius;
 @menuTransition: opacity 0.2s ease;
@@ -82,7 +83,7 @@
 
 /* Menu Input */
 @menuInputMargin: 0.75rem @itemHorizontalPadding;
-@menuInputMinWidth: 200px;
+@menuInputMinWidth: 140px;
 @menuInputVerticalPadding: 0.5em;
 @menuInputHorizontalPadding: 1em;
 @menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding;
@@ -111,7 +112,7 @@
 --------------------*/
 
 /* Selection */
-@selectionMinWidth: 180px;
+@selectionMinWidth: 200px;
 @selectionBackground: @white;
 @selectionDisplay: inline-block;
 @selectionItemDivider: 1px solid rgba(0, 0, 0, 0.05);
@@ -164,11 +165,11 @@
 
 /* Derived */
 @selectedBorderEMWidth: 0.0714em;
-@selectionItemActualHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth;
-@selectionMobileMaxMenuHeight: (@selectionItemActualHeight * @selectionMobileMaxItems);
-@selectionTabletMaxMenuHeight: (@selectionItemActualHeight * @selectionTabletMaxItems);
-@selectionComputerMaxMenuHeight: (@selectionItemActualHeight * @selectionComputerMaxItems);
-@selectionWidescreenMaxMenuHeight: (@selectionItemActualHeight * @selectionWidescreenMaxItems);
+@selectionItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth;
+@selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems);
+@selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems);
+@selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems);
+@selectionWidescreenMaxMenuHeight: (@selectionItemHeight * @selectionWidescreenMaxItems);
 
 /* Hover */
 @selectionHoverBorderColor: @selectedBorderColor;
@@ -265,6 +266,19 @@
       Variations
 --------------------*/
 
+/* Scrolling */
+@scrollingMinWidth: 250px;
+@scrollingMobileMaxItems: 4;
+@scrollingTabletMaxItems: 6;
+@scrollingComputerMaxItems: 8;
+@scrollingWidescreenMaxItems: 12;
+
+@scrollingItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight;
+@scrollingMobileMaxMenuHeight: (@scrollingItemHeight * @scrollingMobileMaxItems);
+@scrollingTabletMaxMenuHeight: (@scrollingItemHeight * @scrollingTabletMaxItems);
+@scrollingComputerMaxMenuHeight: (@scrollingItemHeight * @scrollingComputerMaxItems);
+@scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems);
+
 /* Upward */
 @upwardMenuBoxShadow: 0px 0px 4px 0px @borderColor;
 @upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em;