diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index 00b507b63..0f9b993f6 100755 --- a/src/definitions/collections/menu.less +++ b/src/definitions/collections/menu.less @@ -272,7 +272,7 @@ background: @dropdownBackground; left: 0px; margin: @dropdownMenuOffset 0px 0px; - width: ~"calc(100% - 1px)"; + min-width: ~"calc(100% - 1px)"; box-shadow: @dropdownBoxShadow; } .ui.menu .pointing.dropdown.item .menu { @@ -416,7 +416,7 @@ /*-------------------- - Loading + Loading ---------------------*/ /* On Form */ diff --git a/src/definitions/modules/dropdown.js b/src/definitions/modules/dropdown.js index 8962c1939..c50708f15 100755 --- a/src/definitions/modules/dropdown.js +++ b/src/definitions/modules/dropdown.js @@ -47,6 +47,7 @@ $.fn.dropdown = function(parameters) { $module = $(this), $item = $module.find(selector.item), $text = $module.find(selector.text), + $search = $module.find(selector.search), $input = $module.find(selector.input), $combo = ($module.prev().find(selector.text).size() > 0) @@ -55,7 +56,8 @@ $.fn.dropdown = function(parameters) { $menu = $module.children(selector.menu), - + activated = false, + selectionCache = false, element = this, instance = $module.data(moduleNamespace), module @@ -72,6 +74,8 @@ $.fn.dropdown = function(parameters) { if(hasTouch) { module.bind.touchEvents(); } + module.setup.layout(); + module.bind.mouseEvents(); module.bind.keyboardEvents(); module.instantiate(); @@ -96,21 +100,77 @@ $.fn.dropdown = function(parameters) { ; }, + setup: { + + layout: function() { + var + html + ; + if( $module.is('select') ) { + module.debug('Dropdown initialized on a select, generating html'); + $module + .hide() + ; + $('
') + .addClass( $module.attr('class') ) + ; + $menu = $(settings.templates.select( module.get.selectValues() )); + } + if( module.is.search() && !module.is.searchable() ) { + $search = $('') + .addClass(className.search) + .insertBefore($text) + ; + } + if( module.is.searchable() ) { + module.debug('Searchable dropdown initialized'); + $search + .val('') + .attr('tabindex', 0) + ; + } + else { + module.debug('Simple selection dropdown initialized'); + if(!$module.attr('tabindex') ) { + $module + .attr('tabindex', 0) + ; + } + } + } + }, + bind: { keyboardEvents: function() { module.debug('Binding keyboard events'); $module - .on('keydown' + eventNamespace, module.handleKeyboard) - ; - $module - .on('focus' + eventNamespace, module.show) + .on('keydown' + eventNamespace, module.event.keydown) ; + if( module.is.searchable() ) { + $search + .on('focus' + eventNamespace, module.event.searchFocus) + .on( module.get.inputEvent(), module.event.input) + ; + $module + .on('blur' + eventNamespace, module.event.blur) + ; + } + else { + $module + .on('mousedown', module.event.mousedown) + .on('mouseup', module.event.mouseup) + .on('focus' + eventNamespace, module.event.focus) + .on('blur' + eventNamespace, module.event.blur) + ; + } }, touchEvents: function() { module.debug('Touch device detected binding touch events'); - $module - .on('touchstart' + eventNamespace, module.event.test.toggle) - ; + if( !module.is.searchable() ) { + $module + .on('touchstart' + eventNamespace, module.event.test.toggle) + ; + } $item .on('touchstart' + eventNamespace, module.event.item.mouseenter) .on('touchstart' + eventNamespace, module.event.item.click) @@ -118,21 +178,23 @@ $.fn.dropdown = function(parameters) { }, mouseEvents: function() { module.verbose('Mouse detected binding mouse events'); - if(settings.on == 'click') { - $module - .on('click' + eventNamespace, module.event.test.toggle) - ; - } - else if(settings.on == 'hover') { - $module - .on('mouseenter' + eventNamespace, module.delay.show) - .on('mouseleave' + eventNamespace, module.delay.hide) - ; - } - else { - $module - .on(settings.on + eventNamespace, module.toggle) - ; + if( !module.is.searchable() ) { + if(settings.on == 'click') { + $module + .on('click' + eventNamespace, module.event.test.toggle) + ; + } + else if(settings.on == 'hover') { + $module + .on('mouseenter' + eventNamespace, module.delay.show) + .on('mouseleave' + eventNamespace, module.delay.hide) + ; + } + else { + $module + .on(settings.on + eventNamespace, module.toggle) + ; + } } $item .on('mouseenter' + eventNamespace, module.event.item.mouseenter) @@ -169,78 +231,166 @@ $.fn.dropdown = function(parameters) { } }, - handleKeyboard: function(event) { + filter: function(searchTerm) { var - $selectedItem = $item.filter('.' + className.selected), - pressedKey = event.which, - keys = { - enter : 13, - escape : 27, - upArrow : 38, - downArrow : 40 - }, - selectedClass = className.selected, - currentIndex = $item.index( $selectedItem ), - hasSelectedItem = ($selectedItem.size() > 0), - resultSize = $item.size(), - newIndex + $results = $(), + exactRegExp = new RegExp('(?:\s|^)' + searchTerm, 'i'), + fullTextRegExp = new RegExp(searchTerm, 'i'), + $filteredItems ; - // close shortcuts - if(pressedKey == keys.escape) { - module.verbose('Escape key pressed, closing dropdown'); - module.hide(); - } - // result shortcuts - if(module.is.visible()) { - if(pressedKey == keys.enter && hasSelectedItem) { - module.verbose('Enter key pressed, choosing selected item'); - $.proxy(module.event.item.click, $item.filter('.' + selectedClass) )(event); - event.preventDefault(); - return false; - } - else if(pressedKey == keys.upArrow) { - module.verbose('Up key pressed, changing active item'); - newIndex = (currentIndex - 1 < 0) - ? currentIndex - : currentIndex - 1 - ; - $item - .removeClass(selectedClass) - .eq(newIndex) - .addClass(selectedClass) - ; - event.preventDefault(); - } - else if(pressedKey == keys.downArrow) { - module.verbose('Down key pressed, changing active item'); - newIndex = (currentIndex + 1 >= resultSize) - ? currentIndex - : currentIndex + 1 - ; - $item - .removeClass(selectedClass) - .eq(newIndex) - .addClass(selectedClass) + $item + .each(function(){ + var + $choice = $(this), + text = ( $choice.data(metadata.text) !== undefined ) + ? $choice.data(metadata.text) + : $choice.text(), + value = ( $choice.data(metadata.value) !== undefined) + ? $choice.data(metadata.value) + : (typeof text === 'string') + ? text.toLowerCase() + : text ; - event.preventDefault(); - } - } - else { - if(pressedKey == keys.enter) { - module.show(); - } - } + if( exactRegExp.test( text ) || exactRegExp.test( value ) ) { + $results = $results.add($choice); + } + else if(settings.fullTextSearch) { + if( fullTextRegExp.test( text ) || fullTextRegExp.test( value ) ) { + $results = $results.add($choice); + } + } + }) + ; + $filteredItems = $item.not($results); + $item + .removeClass(className.filtered) + .removeClass(className.selected) + ; + $filteredItems + .addClass(className.filtered) + ; + $item + .not('.' + className.filtered) + .eq(0) + .addClass(className.selected) + ; }, event: { + // prevents focus from occuring on mousedown + mousedown: function() { + activated = true; + }, + mouseup: function() { + activated = false; + }, + focus: function() { + if(!activated) { + module.show(); + } + }, + searchFocus: function() { + activated = true; + module.show(); + }, + blur: function() { + activated = false; + module.hide(); + }, + input: function(event) { + var + query = $search.val() + ; + $text.addClass(className.filtered); + module.filter(query); + }, + keydown: function(event) { + var + $selectedItem = $item.not(className.filtered).filter('.' + className.selected).eq(0), + $visibleItems = $item.not('.' + className.filtered), + pressedKey = event.which, + keys = { + enter : 13, + escape : 27, + upArrow : 38, + downArrow : 40 + }, + selectedClass = className.selected, + currentIndex = $visibleItems.index( $selectedItem ), + hasSelectedItem = ($selectedItem.size() > 0), + $nextItem, + newIndex + ; + // close shortcuts + if(pressedKey == keys.escape) { + module.verbose('Escape key pressed, closing dropdown'); + module.hide(); + } + // result shortcuts + if(module.is.visible()) { + if(pressedKey == keys.enter && hasSelectedItem) { + module.verbose('Enter key pressed, choosing selected item'); + if(module.is.searchable()) { + module.verbose('Removing focus from search input'); + $search.blur(); + } + $.proxy(module.event.item.click, $selectedItem)(event); + event.preventDefault(); + return false; + } + else if(pressedKey == keys.upArrow) { + if(!hasSelectedItem) { + $nextItem = $visibleItems.eq(0); + } + else { + $nextItem = $selectedItem.prevAll(':not(.' + className.filtered + ')').eq(0); + } + if(currentIndex !== 0) { + module.verbose('Up key pressed, changing active item'); + $item + .removeClass(selectedClass) + ; + $nextItem + .addClass(selectedClass) + ; + module.set.scrollPosition($nextItem); + } + event.preventDefault(); + } + else if(pressedKey == keys.downArrow) { + if(!hasSelectedItem) { + $nextItem = $visibleItems.eq(0); + } + else { + $nextItem = $selectedItem.nextAll(':not(.' + className.filtered + ')').eq(0); + } + if(currentIndex + 1 < $visibleItems.size() ) { + module.verbose('Down key pressed, changing active item'); + $item + .removeClass(selectedClass) + ; + $nextItem + .addClass(selectedClass) + ; + module.set.scrollPosition($nextItem); + } + event.preventDefault(); + } + } + else { + if(pressedKey == keys.enter) { + module.show(); + } + } + }, test: { toggle: function(event) { - if( module.determine.intent(event, module.toggle) ) { + if( module.determine.inMenu(event, module.toggle) ) { event.preventDefault(); } }, touch: function(event) { - module.determine.intent(event, function() { + module.determine.inMenu(event, function() { if(event.type == 'touchstart') { module.timer = setTimeout(module.hide, settings.delay.touch); } @@ -251,7 +401,7 @@ $.fn.dropdown = function(parameters) { event.stopPropagation(); }, hide: function(event) { - module.determine.intent(event, module.hide); + module.determine.inModule(event, module.hide); } }, @@ -298,11 +448,13 @@ $.fn.dropdown = function(parameters) { ? text.toLowerCase() : text, callback = function() { + $search.val(''); module.determine.selectAction(text, value); $.proxy(settings.onChange, element)(value, text); - } + }, + openingSubMenu = ($choice.find(selector.menu).size() > 0) ; - if( $choice.find(selector.menu).size() === 0 ) { + if( !openingSubMenu ) { if(event.type == 'touchstart') { $choice.one('click', callback); } @@ -335,10 +487,9 @@ $.fn.dropdown = function(parameters) { module.error(error.action, settings.action); } }, - intent: function(event, callback) { - module.debug('Determining whether event occurred in dropdown', event.target); + inModule: function(event, callback) { callback = callback || function(){}; - if( $(event.target).closest($menu).size() === 0 ) { + if( $(event.target).closest($module).size() === 0 ) { module.verbose('Triggering event', callback); callback(); return true; @@ -347,6 +498,18 @@ $.fn.dropdown = function(parameters) { module.verbose('Event occurred in dropdown, canceling callback'); return false; } + }, + inMenu: function(event, callback) { + callback = callback || function(){}; + if( $(event.target).closest($menu).size() === 0 ) { + module.verbose('Triggering event', callback); + callback(); + return true; + } + else { + module.verbose('Event occurred in dropdown menu, canceling callback'); + return false; + } } }, @@ -432,6 +595,37 @@ $.fn.dropdown = function(parameters) { : $module.data(metadata.value) ; }, + inputEvent: function() { + var + input = $search[0] + ; + if(input) { + return (input.oninput !== undefined) + ? 'input' + : (input.onpropertychange !== undefined) + ? 'propertychange' + : 'keyup' + ; + } + return false; + }, + selectValues: function() { + var + options = {} + ; + $module + .find('option') + .each(function() { + var + name = $(this).html(), + value = $(this).attr('value') || name + ; + options[value] = name; + }) + ; + module.debug('Retrieved values from select', options); + return options; + }, item: function(value, strict) { var $selectedItem = false @@ -525,31 +719,57 @@ $.fn.dropdown = function(parameters) { }, set: { - scrollPosition: function() { + scrollPosition: function($item) { var - $activeItem = module.get.item(), - activeOffset = ($activeItem.size() > 0) - ? $activeItem.position().top - : false + $item = $item || module.get.item(), + hasActive = ($item && $item.size() > 0), + edgeTolerance = 5, + offset, + itemOffset, + menuOffset, + menuScroll, + menuHeight, + abovePage, + belowPage ; - if(activeOffset) { - module.debug('Scrolling to active item'); - $menu - .scrollTop(activeOffset) - ; + if($item && hasActive) { + menuHeight = $menu.height(); + menuScroll = $menu.scrollTop(); + menuOffset = $menu.offset().top; + itemOffset = $item.offset().top; + offset = menuScroll - menuOffset + itemOffset; + belowPage = menuScroll + menuHeight < (offset + edgeTolerance); + abovePage = ((offset - edgeTolerance) < menuScroll); + if(abovePage || belowPage) { + module.debug('Scrolling to active item'); + $menu + .scrollTop(offset) + ; + } } }, text: function(text) { if(settings.action == 'combo') { module.debug('Changing combo button text', text, $combo); - $combo - .text(text) - ; + if(settings.preserveHTML) { + $combo.html(text); + } + else { + $combo.text(text); + } } else if(settings.action !== 'select') { module.debug('Changing text', text, $text); - $text.removeClass(className.placeholder); - $text.text(text); + $text + .removeClass(className.filtered) + .removeClass(className.placeholder) + ; + if(settings.preserveHTML) { + $text.html(text); + } + else { + $text.text(text); + } } }, value: function(value) { @@ -602,6 +822,12 @@ $.fn.dropdown = function(parameters) { }, is: { + search: function() { + return $module.hasClass(className.search); + }, + searchable: function() { + return ($search.size() > 0); + }, selection: function() { return $module.hasClass(className.selection); }, @@ -619,8 +845,8 @@ $.fn.dropdown = function(parameters) { }, hidden: function($subMenu) { return ($subMenu) - ? $subMenu.is(':not(:visible)') - : $menu.is(':not(:visible)') + ? $subMenu.is(':hidden') + : $menu.is(':hidden') ; } }, @@ -643,15 +869,17 @@ $.fn.dropdown = function(parameters) { if( module.is.hidden($currentMenu) ) { module.verbose('Doing menu show animation', $currentMenu); if(settings.transition == 'none') { - callback(); + $.proxy(callback, element)(); } else if($.fn.transition !== undefined && $module.transition('is supported')) { $currentMenu .transition({ animation : settings.transition + ' in', duration : settings.duration, - complete : callback, - queue : false + queue : true, + complete : function() { + $.proxy(callback, element)(); + } }) ; } @@ -669,7 +897,7 @@ $.fn.dropdown = function(parameters) { .end() .slideDown(100, 'easeOutQuad', function() { $.proxy(module.event.resetStyle, this)(); - callback(); + $.proxy(callback, element)(); }) ; } @@ -679,7 +907,7 @@ $.fn.dropdown = function(parameters) { .clearQueue() .fadeIn(settings.duration, function() { $.proxy(module.event.resetStyle, this)(); - callback(); + $.proxy(callback, element)(); }) ; } @@ -693,21 +921,25 @@ $.fn.dropdown = function(parameters) { $currentMenu = $subMenu || $menu ; callback = callback || function(){}; - if(module.is.visible($currentMenu) ) { + if( module.is.visible($currentMenu) ) { module.verbose('Doing menu hide animation', $currentMenu); - if($.fn.transition !== undefined && $module.transition('is supported')) { + + if(settings.transition == 'none') { + $.proxy(callback, element)(); + } + else if($.fn.transition !== undefined && $module.transition('is supported')) { $currentMenu .transition({ animation : settings.transition + ' out', duration : settings.duration, - complete : callback, - queue : false + queue : true, + complete : function() { + $item.removeClass(className.filtered); + $.proxy(callback, element)(); + } }) ; } - else if(settings.transition == 'none') { - callback(); - } else if(settings.transition == 'slide down') { $currentMenu .show() @@ -722,7 +954,7 @@ $.fn.dropdown = function(parameters) { .delay(50) .slideUp(100, 'easeOutQuad', function() { $.proxy(module.event.resetStyle, this)(); - callback(); + $.proxy(callback, element)(); }) ; } @@ -732,7 +964,7 @@ $.fn.dropdown = function(parameters) { .clearQueue() .fadeOut(150, function() { $.proxy(module.event.resetStyle, this)(); - callback(); + $.proxy(callback, element)(); }) ; } @@ -748,7 +980,7 @@ $.fn.dropdown = function(parameters) { if( module.is.hidden() ) { module.hideOthers(); module.set.active(); - // module.set.width(); + module.set.scrollPosition(); module.animate.show(function() { if( module.can.click() ) { module.bind.intent(); @@ -982,17 +1214,22 @@ $.fn.dropdown = function(parameters) { $.fn.dropdown.settings = { - name : 'Dropdown', - namespace : 'dropdown', + name : 'Dropdown', + namespace : 'dropdown', + + debug : false, + verbose : true, + performance : true, + + type : false, - debug : false, - verbose : true, - performance : true, + on : 'click', + action : 'activate', - on : 'click', - action : 'activate', + fullTextSearch : true, + preserveHTML : false, - delay: { + delay : { show : 200, hide : 300, touch : 50 @@ -1001,9 +1238,9 @@ $.fn.dropdown.settings = { transition : 'slide down', duration : 250, - onChange : function(value, text){}, - onShow : function(){}, - onHide : function(){}, + onChange : function(value, text){}, + onShow : function(){}, + onHide : function(){}, error : { action : 'You called a dropdown action that was not defined', @@ -1019,23 +1256,40 @@ $.fn.dropdown.settings = { }, selector : { - menu : '.menu', - item : '.menu > .item', - text : '> .text', - input : '> input[type="hidden"]' + menu : '.menu', + item : '.menu > .item', + text : '> .text', + input : '> input[type="hidden"], > select', + search : '> .search' }, className : { active : 'active', - placeholder : 'default', disabled : 'disabled', - visible : 'visible', + filtered : 'filtered', + placeholder : 'default', + search : 'search', selected : 'selected', - selection : 'selection' + selection : 'selection', + visible : 'visible' } }; +$.fn.dropdown.settings.templates = { + select: function(values) { + var + html = '' + ; + html += '
'; + $.each(values, function(value, name) { + html += '
' + name + '
'; + }); + html += '
'; + return html; + } +}; + // Adds easing $.extend( $.easing, { easeOutQuad: function (x, t, b, c, d) { diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 2b9540c55..d4972fd5a 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -30,6 +30,7 @@ line-height: @lineHeight; transition: @transition; tap-highlight-color: rgba(0, 0, 0, 0); + outline: none; } @@ -94,12 +95,14 @@ ---------------*/ .ui.dropdown .menu .item { + position: relative; cursor: pointer; display: block; border: @itemBorder; height: @itemHeight; border-top: @itemDivider; + line-height: @itemLineHeight; font-size: @itemFontSize; color: @itemColor; @@ -120,6 +123,8 @@ border-top: none; } + + /*-------------- Item Image ---------------*/ @@ -185,6 +190,7 @@ /*-------------- Selection ---------------*/ + /* Displays like a select box */ .ui.selection.dropdown { @@ -192,29 +198,65 @@ word-wrap: break-word; white-space: normal; outline: 0; + transform: rotateZ(0deg); + + min-width: @selectionMinWidth; background: @selectionBackground; display: @selectionDisplay; - padding: @selectionVerticalPadding @selectionHorizontalPadding; + padding: @selectionPadding; color: @selectionTextColor; box-shadow: @selectionBoxShadow; border: @selectionBorder; border-radius: @selectionBorderRadius; transition: @selectionTransition; } +.ui.selection.dropdown.visible, .ui.selection.dropdown.active { - transform: rotateZ(0deg); - z-index: 10; + z-index: @selectionZIndex; } -.ui.selection.dropdown select { + +.ui.selection.dropdown > input[type="hidden"], +.ui.selection.dropdown > select { display: none; } +.ui.selection.dropdown > .text { + margin-right: @selectionTextIconDistance; +} +.ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .dropdown.icon { + position: absolute; + top: auto; + margin: 0em; + right: @selectionHorizontalPadding; opacity: @selectionIconOpacity; - margin: @selectionIconMargin; transition: @selectionIconTransition; } +/* Search Selection Input */ +.ui.selection > input.search { + cursor: pointer; + background: none transparent; + border: none; + position: absolute; + top: 0em; + left: 0em; + width: 100%; + line-height: 1.2em; + padding: @selectionPadding; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); +} +.ui.selection.active > input.search, +.ui.selection.visible > input.search { + cursor: auto; +} +.ui.selection > input.search:focus + .text { + color: @unselectedTextColor !important; +} + + +/* Selection Menu */ .ui.selection.dropdown .menu { overflow-x: hidden; overflow-y: auto; @@ -224,6 +266,7 @@ border-top: none !important; width: auto; margin: 0px -1px; + min-width: ~"calc(100% + 2px)"; } .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before { @@ -231,8 +274,10 @@ } .ui.selection.dropdown .menu .item { padding-left: @selectionHorizontalPadding !important; - padding-right: @selectionHorizontalPadding !important; - white-space: @selectionMenuWhiteSpace; + /* Add in spacing for scroll bar */ + padding-right: calc(@selectionHorizontalPadding + 1em) !important; + white-space: normal; + word-wrap: normal; } /* Hover */ @@ -252,24 +297,33 @@ } /* Visible */ -.ui.selection.dropdown.active { +.ui.selection.dropdown.visible { border: @selectionVisibleBorder; box-shadow: @selectionVisibleBoxShadow; } -.ui.active.selection.dropdown > .dropdown.icon { +.ui.visible.selection.dropdown > .dropdown.icon { opacity: @selectionVisibleIconOpacity; } +/* Filtered Item */ +.ui.selection.dropdown .filtered.text { + visibility: hidden; +} +.ui.selection.dropdown .filtered.item { + display: none; +} + /* Active Item */ .ui.selection.active.dropdown .text:not(.default), .ui.selection.visible.dropdown .text:not(.default) { font-weight: @selectionVisibleTextFontWeight; color: @selectionVisibleTextColor; } -/* Don't Repeat Active Item */ -.ui.selection.dropdown .menu .item.active { + +/* +.ui.selection.dropdown .menu .active.item { display: none; -} +}*/ /* Connecting Border */ @@ -347,6 +401,19 @@ color: @defaultTextHoverColor; } + +/*-------------------- + Keyboard Select +----------------------*/ + +/* Selected Item */ +.ui.dropdown.selected, +.ui.dropdown .menu .selected.item { + background: @selectedBackground; + color: @selectedColor; +} + + /*-------------------- Error ----------------------*/ diff --git a/src/definitions/modules/transition.js b/src/definitions/modules/transition.js index c189fa0bf..113cf4a76 100755 --- a/src/definitions/modules/transition.js +++ b/src/definitions/modules/transition.js @@ -285,12 +285,12 @@ $.fn.transition = function() { ; requestAnimationFrame(function() { if($module.css('display') !== 'none') { - module.verbose('Overriding default display to hide element') + module.verbose('Overriding default display to hide element'); $module .css('display', 'none') ; } - }) + }); }, visible: function() { @@ -811,7 +811,7 @@ $.fn.transition.settings = { loading : 'loading', looping : 'looping', outward : 'out', - transition : 'ui transition', + transition : 'transition', visible : 'visible' }, diff --git a/src/definitions/modules/transition.less b/src/definitions/modules/transition.less index 68b2bd773..8cdbff453 100755 --- a/src/definitions/modules/transition.less +++ b/src/definitions/modules/transition.less @@ -29,7 +29,7 @@ */ -.ui.transition { +.transition { animation-iteration-count: 1; animation-duration: @transitionDefaultDuration; animation-timing-function: @transitionDefaultEasing; @@ -41,26 +41,26 @@ States *******************************/ -.ui.animating.transition { +.animating.transition { display: block !important; backface-visibility: @backfaceVisibility; transform: @use3DAcceleration; } /* Loading */ -.ui.loading.transition { +.loading.transition { position: absolute; top: -999999px; left: -99999px; } /* Hidden */ -.ui.hidden.transition { +.hidden.transition { display: none; } /* Visible */ -.ui.visible.transition { +.visible.transition { display: block !important; visibility: visible; backface-visibility: @backfaceVisibility; @@ -68,7 +68,7 @@ } /* Disabled */ -.ui.disabled.transition { +.disabled.transition { animation-play-state: paused; } @@ -76,7 +76,7 @@ Variations *******************************/ -.ui.looping.transition { +.looping.transition { animation-iteration-count: infinite; } diff --git a/src/themes/packages/default/collections/menu.variables b/src/themes/packages/default/collections/menu.variables index 7b7799939..5f6a5dc40 100755 --- a/src/themes/packages/default/collections/menu.variables +++ b/src/themes/packages/default/collections/menu.variables @@ -125,14 +125,14 @@ /* Dropdown */ @dropdownBackground: #FFFFFF; @dropdownMenuOffset: 1px; -@dropdownPointingDistance: 1px; +@dropdownPointingDistance: 0px; @dropdownTextColor: @textColor; @dropdownTextColorHover: @darkTextColor; @dropdownIconMargin: 0em 0em 0em 1em; -@dropdownBoxShadow: 0px 1px 0px 1px @borderColor; -@dropdownVerticalBoxShadow: 0 0px 1px 1px @solidBorderColor; +@dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08); +@dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08); /* Pointing Arrow */ @arrowSize: 0.6em; diff --git a/src/themes/packages/default/modules/dropdown.variables b/src/themes/packages/default/modules/dropdown.variables index 12abe299d..face682e6 100755 --- a/src/themes/packages/default/modules/dropdown.variables +++ b/src/themes/packages/default/modules/dropdown.variables @@ -49,6 +49,7 @@ @itemVerticalPadding: 0.85em; @itemHorizontalPadding: 0.8em; @itemFontWeight: normal; +@itemLineHeight: 1.2; @itemTextAlign: left; @itemTextTransform: none; @itemBoxShadow: none; @@ -68,18 +69,23 @@ --------------------*/ /* Selection */ +@selectionMinWidth: 180px; @selectionBackground: @white; @selectionDisplay: inline-block; @selectionVerticalPadding: 0.8em; @selectionHorizontalPadding: 1.1em; +@selectionPadding: @selectionVerticalPadding @selectionHorizontalPadding; +@selectionZIndex: 10; + +@selectionTextIconDistance: 2em; @selectionTextColor: @textColor; + @selectionBoxShadow: none; @selectionBorder: 1px solid @borderColor; @selectionBorderRadius: @borderRadius; @selectionIconOpacity: 0.8; @selectionIconTransition: opacity 0.2s ease; -@selectionIconMargin: 0em 0em 0em 1em; -@selectionMenuMaxHeight: 280px; +@selectionMenuMaxHeight: 245px; @selectionMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08); @selectionMenuItemBoxShadow: none; @@ -100,7 +106,7 @@ /* Visible */ @selectionVisibleBorder: 1px solid @borderColor; @selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); -@selectionVisibleTextFontWeight: bold; +@selectionVisibleTextFontWeight: normal; @selectionVisibleTextColor: @selectedTextColor; /* Visible Hover */ @@ -128,14 +134,14 @@ @defaultTextHoverColor: rgba(140, 140, 140, 0.7); /* Active Menu Item */ -@activeItemBackground: @transparentBlack; +@activeItemBackground: transparent; @activeItemZIndex: @menuZIndex + 1; @activeItemBoxShadow: none; @activeItemFontWeight: bold; @activeItemColor: @selectedTextColor; -/* Menu Error */ - +@selectedBackground: @subtleTransparentBlack; +@selectedColor: @selectedTextColor; /*------------------- Variations diff --git a/src/themes/packages/default/modules/transition.overrides b/src/themes/packages/default/modules/transition.overrides index 10f9ff194..8b2edf22c 100755 --- a/src/themes/packages/default/modules/transition.overrides +++ b/src/themes/packages/default/modules/transition.overrides @@ -6,20 +6,20 @@ Emphasis ---------------*/ -.ui.flash.transition { +.flash.transition { animation-name: flash; } -.ui.shake.transition { +.shake.transition { animation-name: shake; } -.ui.bounce.transition { +.bounce.transition { animation-name: bounce; } -.ui.tada.transition { +.tada.transition { animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ -.ui.pulse.transition { +.pulse.transition { animation-name: pulse; } @@ -100,22 +100,22 @@ Slide ---------------*/ -.ui.slide.down.transition.in { +.slide.down.transition.in { animation-name: slide; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } -.ui.slide.down.transition.out { +.slide.down.transition.out { animation-name: slideOut; transform-origin: 50% 0%; } -.ui.slide.up.transition.in { +.slide.up.transition.in { animation-name: slide; transform-origin: 50% 100%; } -.ui.slide.up.transition.out { +.slide.up.transition.out { animation-name: slideOut; transform-origin: 50% 100%; } @@ -147,22 +147,22 @@ Flips ---------------*/ -.ui.flip.transition.in, -.ui.flip.transition.out { +.flip.transition.in, +.flip.transition.out { perspective: 2000px; } -.ui.horizontal.flip.transition.in, -.ui.horizontal.flip.transition.out { +.horizontal.flip.transition.in, +.horizontal.flip.transition.out { animation-name: horizontalFlip; } -.ui.horizontal.flip.transition.out { +.horizontal.flip.transition.out { animation-name: horizontalFlipOut; } -.ui.vertical.flip.transition.in, -.ui.vertical.flip.transition.out { +.vertical.flip.transition.in, +.vertical.flip.transition.out { animation-name: verticalFlip; } -.ui.vertical.flip.transition.out { +.vertical.flip.transition.out { animation-name: verticalFlipOut; } @@ -215,24 +215,24 @@ Fades ---------------*/ -.ui.fade.transition.in { +.fade.transition.in { animation-name: fade; } -.ui.fade.transition.out { +.fade.transition.out { animation-name: fadeOut; } -.ui.fade.up.transition.in { +.fade.up.transition.in { animation-name: fadeUp; } -.ui.fade.up.transition.out { +.fade.up.transition.out { animation-name: fadeUpOut; } -.ui.fade.down.transition.in { +.fade.down.transition.in { animation-name: fadeDown; } -.ui.fade.down.transition.out { +.fade.down.transition.out { animation-name: fadeDownOut; } @@ -305,10 +305,10 @@ Scale ---------------*/ -.ui.scale.transition.in { +.scale.transition.in { animation-name: scale; } -.ui.scale.transition.out { +.scale.transition.out { animation-name: scaleOut; } @@ -338,14 +338,14 @@ Drop ---------------*/ -.ui.drop.transition { +.drop.transition { transform-origin: top center; animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); } -.ui.drop.transition.in { +.drop.transition.in { animation-name: dropIn; } -.ui.drop.transition.out { +.drop.transition.out { animation-name: dropOut; } @@ -375,16 +375,16 @@ Browse ---------------*/ -.ui.browse.transition.in { +.browse.transition.in { animation-name: browseIn; animation-timing-function: ease; } -.ui.browse.transition.out, -.ui.browse.transition.out.left { +.browse.transition.out, +.browse.transition.out.left { animation-name: browseOutLeft; animation-timing-function: ease; } -.ui.browse.transition.out.right { +.browse.transition.out.right { animation-name: browseOutRight; animation-timing-function: ease; }