From 71e32857ed9188920ea16897b872b39d8969774b Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Thu, 26 Mar 2015 13:23:04 -0400
Subject: [PATCH] Adds scrolling dropdown variation

---
 src/definitions/collections/menu.less         |  2 +-
 src/definitions/modules/dropdown.js           |  6 +-
 src/definitions/modules/dropdown.less         | 61 +++++++++++++++++++
 src/themes/default/modules/dropdown.variables | 30 ++++++---
 4 files changed, 87 insertions(+), 12 deletions(-)

diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less
index 075bd9dd6..44201dd60 100755
--- a/src/definitions/collections/menu.less
+++ b/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;
 }
diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js
index 300e789a9..0623e558d 100644
--- a/src/definitions/modules/dropdown.js
+++ b/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: {
diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less
index 2ed1b25e0..13f65ebae 100755
--- a/src/definitions/modules/dropdown.less
+++ b/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,
diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables
index 40b93a672..d11f8bff5 100644
--- a/src/themes/default/modules/dropdown.variables
+++ b/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;