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 ' }, 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;