From a3628f37097f81cc8cd0a74f04251243b6944fa0 Mon Sep 17 00:00:00 2001 From: Pusher Robot Date: Sun, 16 Sep 2018 21:40:22 -0700 Subject: [PATCH] Updated distribution to version 2.4.0 --- definitions/collections/form.less | 4 +- definitions/collections/menu.less | 6 +- definitions/elements/label.less | 26 +- definitions/elements/list.less | 2 + definitions/elements/loader.less | 1 - definitions/elements/placeholder.less | 232 ++++++++++++++++++ definitions/elements/segment.less | 54 ++++ definitions/modules/dimmer.js | 39 ++- definitions/modules/dimmer.less | 12 + definitions/modules/dropdown.js | 31 ++- definitions/modules/dropdown.less | 12 + definitions/modules/modal.js | 95 ++++++- definitions/modules/modal.less | 31 ++- definitions/modules/popup.js | 19 +- definitions/modules/search.less | 2 + package.js | 2 +- package.json | 2 +- theme.config.example | 91 +++---- themes/default/elements/flag.overrides | 1 + themes/default/elements/icon.overrides | 2 +- themes/default/elements/loader.variables | 1 + themes/default/elements/placeholder.overrides | 3 + themes/default/elements/placeholder.variables | 55 +++++ themes/default/elements/segment.variables | 39 ++- themes/default/modules/dropdown.overrides | 25 +- themes/default/modules/dropdown.variables | 8 +- 26 files changed, 667 insertions(+), 128 deletions(-) create mode 100644 definitions/elements/placeholder.less create mode 100644 themes/default/elements/placeholder.overrides create mode 100644 themes/default/elements/placeholder.variables diff --git a/definitions/collections/form.less b/definitions/collections/form.less index 6839e9a..73ef2a2 100644 --- a/definitions/collections/form.less +++ b/definitions/collections/form.less @@ -323,7 +323,7 @@ color: @inputPlaceholderColor; } .ui.form :-ms-input-placeholder { - color: @inputPlaceholderColor; + color: @inputPlaceholderColor !important; } .ui.form ::-moz-placeholder { color: @inputPlaceholderColor; @@ -333,7 +333,7 @@ color: @inputPlaceholderFocusColor; } .ui.form :focus:-ms-input-placeholder { - color: @inputPlaceholderFocusColor; + color: @inputPlaceholderFocusColor !important; } .ui.form :focus::-moz-placeholder { color: @inputPlaceholderFocusColor; diff --git a/definitions/collections/menu.less b/definitions/collections/menu.less index 10ae94f..3806b00 100644 --- a/definitions/collections/menu.less +++ b/definitions/collections/menu.less @@ -254,7 +254,7 @@ display: inline-block; font-size: @dropdownItemIconFontSize !important; float: @dropdownItemIconFloat; - margin: @dropdownItemIconMargin; + margin: @dropdownItemIconMargin !important; } @@ -468,7 +468,7 @@ Floated Menu / Item /* Left Floated */ .ui.menu:not(.vertical) .left.item, -.ui.menu:not(.vertical) .left.menu { +.ui.menu:not(.vertical) :not(.dropdown) > .left.menu { display: flex; margin-right: auto !important; } @@ -1193,7 +1193,7 @@ Floated Menu / Item } /* Item */ -.ui.labeled.icon.menu .item { +.ui.labeled.icon.menu .item { min-width: @labeledIconMinWidth; flex-direction: column; } diff --git a/definitions/elements/label.less b/definitions/elements/label.less index fcd066a..7869305 100644 --- a/definitions/elements/label.less +++ b/definitions/elements/label.less @@ -566,7 +566,7 @@ a.ui.red.label:hover{ } /* Basic */ .ui.basic.red.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @red !important; border-color: @red !important; } @@ -602,7 +602,7 @@ a.ui.orange.label:hover{ } /* Basic */ .ui.basic.orange.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @orange !important; border-color: @orange !important; } @@ -638,7 +638,7 @@ a.ui.yellow.label:hover{ } /* Basic */ .ui.basic.yellow.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @yellow !important; border-color: @yellow !important; } @@ -674,7 +674,7 @@ a.ui.olive.label:hover{ } /* Basic */ .ui.basic.olive.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @olive !important; border-color: @olive !important; } @@ -710,7 +710,7 @@ a.ui.green.label:hover{ } /* Basic */ .ui.basic.green.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @green !important; border-color: @green !important; } @@ -746,7 +746,7 @@ a.ui.teal.label:hover{ } /* Basic */ .ui.basic.teal.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @teal !important; border-color: @teal !important; } @@ -782,7 +782,7 @@ a.ui.blue.label:hover{ } /* Basic */ .ui.basic.blue.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @blue !important; border-color: @blue !important; } @@ -818,7 +818,7 @@ a.ui.violet.label:hover{ } /* Basic */ .ui.basic.violet.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @violet !important; border-color: @violet !important; } @@ -854,7 +854,7 @@ a.ui.purple.label:hover{ } /* Basic */ .ui.basic.purple.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @purple !important; border-color: @purple !important; } @@ -890,7 +890,7 @@ a.ui.pink.label:hover{ } /* Basic */ .ui.basic.pink.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @pink !important; border-color: @pink !important; } @@ -926,7 +926,7 @@ a.ui.brown.label:hover{ } /* Basic */ .ui.basic.brown.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @brown !important; border-color: @brown !important; } @@ -962,7 +962,7 @@ a.ui.grey.label:hover{ } /* Basic */ .ui.basic.grey.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @grey !important; border-color: @grey !important; } @@ -998,7 +998,7 @@ a.ui.black.label:hover{ } /* Basic */ .ui.basic.black.label { - background-color: @basicBackground !important; + background: @basicBackground !important; color: @black !important; border-color: @black !important; } diff --git a/definitions/elements/list.less b/definitions/elements/list.less index f1eda4b..eb747d3 100644 --- a/definitions/elements/list.less +++ b/definitions/elements/list.less @@ -154,12 +154,14 @@ ol.ui.list ol li, .ui.list > .item > .image + .content, .ui.list > .item > .icon + .content { display: table-cell; + width: 100%; padding: 0em 0em 0em @contentDistance; vertical-align: @contentVerticalAlign; } .ui.list .list > .item > img.image + .content, .ui.list > .item > img.image + .content { display: inline-block; + width: auto; } .ui.list .list > .item > .content > .list, .ui.list > .item > .content > .list { diff --git a/definitions/elements/loader.less b/definitions/elements/loader.less index 40d5de6..9bf271d 100644 --- a/definitions/elements/loader.less +++ b/definitions/elements/loader.less @@ -162,7 +162,6 @@ Types *******************************/ - /*------------------- Text --------------------*/ diff --git a/definitions/elements/placeholder.less b/definitions/elements/placeholder.less new file mode 100644 index 0000000..e18c4ab --- /dev/null +++ b/definitions/elements/placeholder.less @@ -0,0 +1,232 @@ +/*! + * # Semantic UI - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'placeholder'; + +@import (multiple) '../../theme.config'; + +/*------------------- + Content +--------------------*/ + +.ui.placeholder { + position: static; + overflow: hidden; + animation: placeholderShimmer @placeholderLoadingAnimationDuration linear; + animation-iteration-count: infinite; + background-color: @white; + background-image: @placeholderLoadingGradient; + background-size: @placeholderLoadingGradientWidth 100%; + max-width: @placeholderMaxWidth; +} + +@keyframes placeholderShimmer{ + 0% { + background-position: -@placeholderLoadingGradientWidth 0 + } + 100% { + background-position: @placeholderLoadingGradientWidth 0 + } +} + +.ui.placeholder + .ui.placeholder { + margin-top: @consecutivePlaceholderSpacing; +} +.ui.placeholder + .ui.placeholder { + animation-delay: @placeholderAnimationInterval; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 2); +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 3); +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 4); +} + +.ui.placeholder, +.ui.placeholder > :before, +.ui.placeholder .image.header:after, +.ui.placeholder .line, +.ui.placeholder .line:after { + background-color: @white; +} + +/* Image */ +.ui.placeholder .image:not(.header):not(.ui) { + height: @placeholderImageHeight; +} +.ui.placeholder .square.image:not(.header) { + height: 0px; + overflow: hidden; + /* 1/1 aspect ratio */ + padding-top: 100%; +} +.ui.placeholder .rectangular.image:not(.header) { + height: 0px; + overflow: hidden; + /* 4/3 aspect ratio */ + padding-top: 75%; +} + + +/* Lines */ +.ui.placeholder .line { + position: relative; + height: @placeholderLineMargin; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + top: 100%; + position: absolute; + content: ''; + background-color: inherit; +} +.ui.placeholder .line:before { + left: 0px; +} +.ui.placeholder .line:after { + right: 0px; +} + +/* Any Lines */ +.ui.placeholder .line { + margin-bottom: @placeholderLineHeight; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + height: @placeholderLineHeight; +} +.ui.placeholder .line:not(:first-child) { + margin-top: @placeholderLineHeight; +} + +/* Header Image + 2 Lines */ +.ui.placeholder .header { + position: relative; + overflow: hidden; +} + +/* Line Outdent */ +.ui.placeholder .line:nth-child(1):after { + width: @placeholderLineOneOutdent; +} +.ui.placeholder .line:nth-child(2):after { + width: @placeholderLineTwoOutdent; +} +.ui.placeholder .line:nth-child(3):after { + width: @placeholderLineThreeOutdent; +} +.ui.placeholder .line:nth-child(4):after { + width: @placeholderLineFourOutdent; +} +.ui.placeholder .line:nth-child(5):after { + width: @placeholderLineFiveOutdent; +} + +/* Header Line 1 & 2*/ +.ui.placeholder .header .line { + margin-bottom: @placeholderHeaderLineHeight; +} +.ui.placeholder .header .line:before, +.ui.placeholder .header .line:after { + height: @placeholderHeaderLineHeight; +} +.ui.placeholder .header .line:not(:first-child) { + margin-top: @placeholderHeaderLineHeight; +} +.ui.placeholder .header .line:after { + width: @placeholderHeaderLineOneOutdent; +} +.ui.placeholder .header .line:nth-child(2):after { + width: @placeholderHeaderLineTwoOutdent; +} + +/* Image Header */ +.ui.placeholder .image.header .line { + margin-left: @placeholderImageWidth; +} +.ui.placeholder .image.header .line:before { + width: @placeholderImageTextIndent; +} +.ui.placeholder .image.header:after { + display: block; + height: @placeholderLineMargin; + content: ''; + margin-left: @placeholderImageWidth; +} + +/* Spacing */ +.ui.placeholder .image .line:first-child, +.ui.placeholder .paragraph .line:first-child, +.ui.placeholder .header .line:first-child { + height: 0.01px; +} +.ui.placeholder .image:not(:first-child):before, +.ui.placeholder .paragraph:not(:first-child):before, +.ui.placeholder .header:not(:first-child):before { + height: @placeholderSpacing; + content: ''; + display: block; +} + +/* Inverted Content Loader */ +.ui.inverted.placeholder { + background-image: @placeholderInvertedLoadingGradient; +} +.ui.inverted.placeholder, +.ui.inverted.placeholder > :before, +.ui.inverted.placeholder .image.header:after, +.ui.inverted.placeholder .line, +.ui.inverted.placeholder .line:after { + background-color: @black; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + +.ui.placeholder .full.line.line.line:after { + width: @placeholderFullLineOutdent; +} +.ui.placeholder .very.long.line.line.line:after { + width: @placeholderVeryLongLineOutdent; +} +.ui.placeholder .long.line.line.line:after { + width: @placeholderLongLineOutdent; +} +.ui.placeholder .medium.line.line.line:after { + width: @placeholderMediumLineOutdent; +} +.ui.placeholder .short.line.line.line:after { + width: @placeholderShortLineOutdent; +} +.ui.placeholder .very.short.line.line.line:after { + width: @placeholderVeryShortLineOutdent; +} + + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.placeholder { + max-width: none; +} diff --git a/definitions/elements/segment.less b/definitions/elements/segment.less index 0294551..34d5a42 100644 --- a/definitions/elements/segment.less +++ b/definitions/elements/segment.less @@ -110,6 +110,60 @@ Types *******************************/ + +/*------------------- + Placeholder +--------------------*/ + +.ui.placeholder.segment { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + max-width: initial; + animation: none; + overflow: visible; + padding: @placeholderPadding; + min-height: @placeholderMinHeight; + background: @placeholderBackground; + border-color: @placeholderBorderColor; + box-shadow: @placeholderBoxShadow; +} + +.ui.placeholder.segment .button, +.ui.placeholder.segment textarea { + display: block; +} +.ui.placeholder.segment .field, +.ui.placeholder.segment textarea, +.ui.placeholder.segment > .ui.input, +.ui.placeholder.segment .button { + max-width: @placeholderContentMaxWidth; + margin-left: auto; + margin-right: auto; +} +.ui.placeholder.segment .column .button, +.ui.placeholder.segment .column .field, +.ui.placeholder.segment .column textarea, +.ui.placeholder.segment .column > .ui.input { + max-width: @placeholderContentMaxWidth; + margin-left: auto; + margin-right: auto; +} + +.ui.placeholder.segment > .inline { + align-self: center; +} +.ui.placeholder.segment > .inline > .button { + display: inline-block; + width: auto; + margin: @placeholderContentInlineButtonMargin; +} +.ui.placeholder.segment > .inline > .button:last-child { + margin-right: 0px; +} + + /*------------------- Piled --------------------*/ diff --git a/definitions/modules/dimmer.js b/definitions/modules/dimmer.js index bdfc39a..49bf63e 100644 --- a/definitions/modules/dimmer.js +++ b/definitions/modules/dimmer.js @@ -83,7 +83,6 @@ $.fn.dimmer = function(parameters) { else { $dimmer = module.create(); } - module.set.variation(); } }, @@ -114,10 +113,6 @@ $.fn.dimmer = function(parameters) { bind: { events: function() { - if(module.is.page()) { - // touch events default to passive, due to changes in chrome to optimize mobile perf - $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false }); - } if(settings.on == 'hover') { $dimmable .on('mouseenter' + eventNamespace, module.show) @@ -145,9 +140,6 @@ $.fn.dimmer = function(parameters) { unbind: { events: function() { - if(module.is.page()) { - $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false }); - } $module .removeData(moduleNamespace) ; @@ -165,9 +157,6 @@ $.fn.dimmer = function(parameters) { event.stopImmediatePropagation(); } }, - preventScroll: function(event) { - event.preventDefault(); - } }, addContent: function(element) { @@ -200,6 +189,7 @@ $.fn.dimmer = function(parameters) { : function(){} ; module.debug('Showing dimmer', $dimmer, settings); + module.set.variation(); if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) { module.animate.show(callback); settings.onShow.call(element); @@ -243,12 +233,22 @@ $.fn.dimmer = function(parameters) { : function(){} ; if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { + if(settings.useFlex) { + module.debug('Using flex dimmer'); + module.remove.legacy(); + } + else { + module.debug('Using legacy non-flex dimmer'); + module.set.legacy(); + } if(settings.opacity !== 'auto') { module.set.opacity(); } $dimmer .transition({ - displayType : 'flex', + displayType : settings.useFlex + ? 'flex' + : 'block', animation : settings.transition + ' in', queue : false, duration : module.get.duration(), @@ -293,7 +293,9 @@ $.fn.dimmer = function(parameters) { module.verbose('Hiding dimmer with css'); $dimmer .transition({ - displayType : 'flex', + displayType : settings.useFlex + ? 'flex' + : 'block', animation : settings.transition + ' out', queue : false, duration : module.get.duration(), @@ -302,6 +304,7 @@ $.fn.dimmer = function(parameters) { module.remove.dimmed(); }, onComplete : function() { + module.remove.variation(); module.remove.active(); callback(); } @@ -415,6 +418,9 @@ $.fn.dimmer = function(parameters) { module.debug('Setting opacity to', opacity); $dimmer.css('background-color', color); }, + legacy: function() { + $dimmer.addClass(className.legacy); + }, active: function() { $dimmer.addClass(className.active); }, @@ -444,6 +450,9 @@ $.fn.dimmer = function(parameters) { .removeClass(className.active) ; }, + legacy: function() { + $dimmer.removeClass(className.legacy); + }, dimmed: function() { $dimmable.removeClass(className.dimmed); }, @@ -657,6 +666,9 @@ $.fn.dimmer.settings = { verbose : false, performance : true, + // whether should use flex layout + useFlex : true, + // name to distinguish between multiple dimmers in context dimmerName : false, @@ -700,6 +712,7 @@ $.fn.dimmer.settings = { dimmer : 'dimmer', disabled : 'disabled', hide : 'hide', + legacy : 'legacy', pageDimmer : 'page', show : 'show' }, diff --git a/definitions/modules/dimmer.less b/definitions/modules/dimmer.less index 3e534bc..fb0ce54 100644 --- a/definitions/modules/dimmer.less +++ b/definitions/modules/dimmer.less @@ -113,6 +113,18 @@ Variations *******************************/ + +/*-------------- + Legacy +---------------*/ + +/* Animating / Active / Visible */ +.dimmed.dimmable > .ui.animating.legacy.dimmer, +.dimmed.dimmable > .ui.visible.legacy.dimmer, +.ui.active.legacy.dimmer { + display: block; +} + /*-------------- Alignment ---------------*/ diff --git a/definitions/modules/dropdown.js b/definitions/modules/dropdown.js index 13652cc..9af348a 100644 --- a/definitions/modules/dropdown.js +++ b/definitions/modules/dropdown.js @@ -1019,7 +1019,12 @@ $.fn.dropdown = function(parameters) { }, icon: { click: function(event) { - module.toggle(); + if($icon.hasClass(className.clear)) { + module.clear(); + } + else { + module.toggle(); + } } }, text: { @@ -1646,7 +1651,7 @@ $.fn.dropdown = function(parameters) { }, hide: function(text, value, element) { - module.set.value(value, text); + module.set.value(value, text, $(element)); module.hideAndClear(); } @@ -2481,6 +2486,15 @@ $.fn.dropdown = function(parameters) { $module.data(metadata.value, stringValue); } } + if(module.is.single() && settings.clearable) { + // treat undefined or '' as empty + if(!escapedValue) { + module.remove.clearable(); + } + else { + module.set.clearable(); + } + } if(settings.fireOnInit === false && module.is.initialLoad()) { module.verbose('No callback on initial load', settings.onChange); } @@ -2576,7 +2590,10 @@ $.fn.dropdown = function(parameters) { } }) ; - } + }, + clearable: function() { + $icon.addClass(className.clear); + }, }, add: { @@ -2774,7 +2791,7 @@ $.fn.dropdown = function(parameters) { } module.set.value(newValue, addedValue, addedText, $selectedItem); module.check.maxSelections(); - } + }, }, remove: { @@ -2999,6 +3016,9 @@ $.fn.dropdown = function(parameters) { .removeAttr('tabindex') ; } + }, + clearable: function() { + $icon.removeClass(className.clear); } }, @@ -3686,6 +3706,8 @@ $.fn.dropdown.settings = { values : false, // specify values to use for dropdown + clearable : false, // whether the value of the dropdown can be cleared + apiSettings : false, selectOnKeydown : true, // Whether selection should occur automatically when keyboard shortcuts used minCharacters : 0, // Minimum characters required to trigger API call @@ -3838,6 +3860,7 @@ $.fn.dropdown.settings = { active : 'active', addition : 'addition', animating : 'animating', + clear : 'clear', disabled : 'disabled', empty : 'empty', dropdown : 'ui dropdown', diff --git a/definitions/modules/dropdown.less b/definitions/modules/dropdown.less index ee81f3d..4e8ce57 100644 --- a/definitions/modules/dropdown.less +++ b/definitions/modules/dropdown.less @@ -925,6 +925,18 @@ select.ui.dropdown { } +/*-------------------- + Clear +----------------------*/ + +.ui.dropdown > .clear.dropdown.icon { + opacity: @clearableIconOpacity; + transition: opacity @defaultDuration @defaultEasing; +} +.ui.dropdown > .clear.dropdown.icon:hover { + opacity: @clearableIconActiveOpacity; +} + /*-------------------- Disabled diff --git a/definitions/modules/modal.js b/definitions/modules/modal.js index b2ccea0..d2793ee 100644 --- a/definitions/modules/modal.js +++ b/definitions/modules/modal.js @@ -110,8 +110,7 @@ $.fn.modal = function(parameters) { debug : settings.debug, variation : settings.centered ? false - : 'top aligned' - , + : 'top aligned', dimmerName : 'modals' }, dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) @@ -132,7 +131,7 @@ $.fn.modal = function(parameters) { $dimmer = $dimmable.dimmer('get dimmer'); }, id: function() { - id = (Math.random().toString(16) + '000000000').substr(2,8); + id = (Math.random().toString(16) + '000000000').substr(2, 8); elementEventNamespace = '.' + id; module.verbose('Creating unique id for element', id); } @@ -167,6 +166,9 @@ $.fn.modal = function(parameters) { refresh: function() { module.remove.scrolling(); module.cacheSizes(); + if(!module.can.useFlex()) { + module.set.modalOffset(); + } module.set.screenHeight(); module.set.type(); }, @@ -207,12 +209,22 @@ $.fn.modal = function(parameters) { $window .on('resize' + elementEventNamespace, module.event.resize) ; + }, + scrollLock: function() { + // touch events default to passive, due to changes in chrome to optimize mobile perf + $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false }); + } + }, + + unbind: { + scrollLock: function() { + $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false }); } }, get: { id: function() { - return (Math.random().toString(16) + '000000000').substr(2,8); + return (Math.random().toString(16) + '000000000').substr(2, 8); } }, @@ -227,6 +239,9 @@ $.fn.modal = function(parameters) { ignoreRepeatedEvents = false; }); }, + preventScroll: function(event) { + event.preventDefault(); + }, deny: function() { if(ignoreRepeatedEvents || settings.onDeny.call(element, $(this)) === false) { module.verbose('Deny callback returned false cancelling hide'); @@ -304,6 +319,8 @@ $.fn.modal = function(parameters) { ; module.refreshModals(); module.set.dimmerSettings(); + module.set.dimmerStyles(); + module.showModal(callback); }, @@ -322,9 +339,16 @@ $.fn.modal = function(parameters) { : function(){} ; if( module.is.animating() || !module.is.active() ) { - module.showDimmer(); module.cacheSizes(); + if(module.can.useFlex()) { + module.remove.legacy(); + } + else { + module.set.legacy(); + module.set.modalOffset(); + module.debug('Using non-flex legacy modal positioning.'); + } module.set.screenHeight(); module.set.type(); module.set.clickaway(); @@ -402,6 +426,7 @@ $.fn.modal = function(parameters) { }, onComplete : function() { settings.onHidden.call(element); + module.remove.dimmerStyles(); module.restore.focus(); callback(); } @@ -426,6 +451,7 @@ $.fn.modal = function(parameters) { hideDimmer: function() { if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) { + module.unbind.scrollLock(); $dimmable.dimmer('hide', function() { module.remove.clickaway(); module.remove.screenHeight(); @@ -513,11 +539,18 @@ $.fn.modal = function(parameters) { active: function() { $module.removeClass(className.active); }, + legacy: function() { + $module.removeClass(className.legacy); + }, clickaway: function() { $dimmer .off('click' + elementEventNamespace) ; }, + dimmerStyles: function() { + $dimmer.removeClass(className.inverted); + $dimmable.removeClass(className.blurring); + }, bodyStyle: function() { if($body.attr('style') === '') { module.verbose('Removing style attribute'); @@ -546,11 +579,13 @@ $.fn.modal = function(parameters) { $module.addClass(className.loading); var scrollHeight = $module.prop('scrollHeight'), + modalWidth = $module.outerWidth(), modalHeight = $module.outerHeight() ; if(module.cache === undefined || modalHeight !== 0) { module.cache = { pageHeight : $(document).outerHeight(), + width : modalWidth, height : modalHeight + settings.offset, scrollHeight : scrollHeight + settings.offset, contextHeight : (settings.context == 'body') @@ -564,6 +599,12 @@ $.fn.modal = function(parameters) { }, can: { + useFlex: function() { + return (settings.useFlex == 'auto') + ? settings.detachable && !module.is.ie() + : settings.useFlex + ; + }, fit: function() { var contextHeight = module.cache.contextHeight, @@ -585,6 +626,13 @@ $.fn.modal = function(parameters) { active: function() { return $module.hasClass(className.active); }, + ie: function() { + var + isIE11 = (!(window.ActiveXObject) && 'ActiveXObject' in window), + isIE = ('ActiveXObject' in window) + ; + return (isIE11 || isIE); + }, animating: function() { return $module.transition('is supported') ? $module.transition('is animating') @@ -596,7 +644,7 @@ $.fn.modal = function(parameters) { }, modernBrowser: function() { // appName for IE11 reports 'Netscape' can no longer use - return !(window.ActiveXObject || "ActiveXObject" in window); + return !(window.ActiveXObject || 'ActiveXObject' in window); } }, @@ -628,10 +676,10 @@ $.fn.modal = function(parameters) { debug : settings.debug, dimmerName : 'modals', closable : 'auto', + useFlex : module.can.useFlex(), variation : settings.centered ? false - : 'top aligned' - , + : 'top aligned', duration : { show : settings.duration, hide : settings.duration @@ -644,6 +692,11 @@ $.fn.modal = function(parameters) { ? dimmerSettings.variation + ' inverted' : 'inverted' ; + } + $context.dimmer('setting', dimmerSettings); + }, + dimmerStyles: function() { + if(settings.inverted) { $dimmer.addClass(className.inverted); } else { @@ -655,7 +708,21 @@ $.fn.modal = function(parameters) { else { $dimmable.removeClass(className.blurring); } - $context.dimmer('setting', dimmerSettings); + }, + modalOffset: function() { + var + width = module.cache.width, + height = module.cache.height + ; + $module + .css({ + marginTop: (settings.centered && module.can.fit()) + ? -(height / 2) + : 0, + marginLeft: -(width / 2) + }) + ; + module.verbose('Setting modal offset for legacy mode'); }, screenHeight: function() { if( module.can.fit() ) { @@ -674,12 +741,17 @@ $.fn.modal = function(parameters) { scrolling: function() { $dimmable.addClass(className.scrolling); $module.addClass(className.scrolling); + module.unbind.scrollLock(); + }, + legacy: function() { + $module.addClass(className.legacy); }, type: function() { if(module.can.fit()) { module.verbose('Modal fits on screen'); if(!module.others.active() && !module.others.animating()) { module.remove.scrolling(); + module.bind.scrollLock(); } } else { @@ -880,6 +952,9 @@ $.fn.modal.settings = { name : 'Modal', namespace : 'modal', + useFlex : 'auto', + offset : 0, + silent : false, debug : false, verbose : false, @@ -909,7 +984,6 @@ $.fn.modal.settings = { queue : false, duration : 500, - offset : 0, transition : 'scale', // padding with edge of page @@ -949,6 +1023,7 @@ $.fn.modal.settings = { animating : 'animating', blurring : 'blurring', inverted : 'inverted', + legacy : 'legacy', loading : 'loading', scrolling : 'scrolling', undetached : 'undetached' diff --git a/definitions/modules/modal.less b/definitions/modules/modal.less index 6f0236c..479786a 100644 --- a/definitions/modules/modal.less +++ b/definitions/modules/modal.less @@ -23,6 +23,7 @@ *******************************/ .ui.modal { + position: absolute; display: none; z-index: @zIndex; text-align: left; @@ -309,6 +310,20 @@ color: @basicInvertedModalHeaderColor; } +/* Resort to margin positioning if legacy */ +.ui.legacy.modal, +.ui.legacy.page.dimmer > .ui.modal { + top: 50%; + left: 50%; +} + +.ui.legacy.page.dimmer > .ui.scrolling.modal, +.ui.page.dimmer > .ui.scrolling.legacy.modal, +.ui.top.aligned.legacy.page.dimmer > .ui.modal, +.ui.top.aligned.dimmer > .ui.legacy.modal { + top: auto; +} + /* Tablet and Mobile */ @media only screen and (max-width : @largestTabletScreen) { .ui.basic.modal > .close { @@ -343,6 +358,20 @@ .modals.dimmer[class*="top aligned"] .modal { margin: @topAlignedMargin auto; } +@media only screen and (max-width : @largestMobileScreen) { + .modals.dimmer[class*="top aligned"] .modal { + margin: @mobileTopAlignedMargin auto; + } +} +/* Legacy Top Aligned */ +.legacy.modals.dimmer[class*="top aligned"] { + padding-top: @topAlignedMargin; +} +@media only screen and (max-width : @largestMobileScreen) { + .legacy.modals.dimmer[class*="top aligned"] { + padding-top: @mobileTopAlignedMargin; + } +} /*-------------- Scrolling @@ -363,7 +392,7 @@ position: fixed; } .modals.dimmer .ui.scrolling.modal { - margin: @scrollingMargin auto !important; + margin: @scrollingMargin auto; } /* Undetached Scrolling */ diff --git a/definitions/modules/popup.js b/definitions/modules/popup.js index 26e59cb..f8a201c 100644 --- a/definitions/modules/popup.js +++ b/definitions/modules/popup.js @@ -1012,12 +1012,12 @@ $.fn.popup = function(parameters) { if(settings.hideOnScroll === true || (settings.hideOnScroll == 'auto' && settings.on != 'click')) { module.bind.closeOnScroll(); } - if(settings.on == 'hover' && openedWithTouch) { - module.bind.touchClose(); - } - if(settings.on == 'click' && settings.closable) { + if(module.is.closable()) { module.bind.clickaway(); } + else if(settings.on == 'hover' && openedWithTouch) { + module.bind.touchClose(); + } }, closeOnScroll: function() { module.verbose('Binding scroll close event to document'); @@ -1073,10 +1073,19 @@ $.fn.popup = function(parameters) { should: { centerArrow: function(calculations) { return !module.is.basic() && calculations.target.width <= (settings.arrowPixelsFromEdge * 2); - } + }, }, is: { + closable: function() { + if(settings.closable == 'auto') { + if(settings.on == 'hover') { + return false; + } + return true; + } + return settings.closable; + }, offstage: function(distanceFromBoundary, position) { var offstage = [] diff --git a/definitions/modules/search.less b/definitions/modules/search.less index 06e7ece..fc34dcf 100644 --- a/definitions/modules/search.less +++ b/definitions/modules/search.less @@ -72,6 +72,8 @@ left: 0%; transform-origin: center top; white-space: normal; + text-align: left; + text-transform: none; background: @resultsBackground; diff --git a/package.js b/package.js index d9fb48d..247a39b 100644 --- a/package.js +++ b/package.js @@ -5,7 +5,7 @@ var Package.describe({ name : 'semantic:ui', summary : 'Semantic UI - LESS Release of Semantic UI', - version : '2.3.3', + version : '2.4.0', git : 'git://github.com/Semantic-Org/Semantic-UI-LESS.git', }); diff --git a/package.json b/package.json index 26b7264..671ece0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "semantic-ui-less", - "version": "2.3.3", + "version": "2.4.0", "title": "Semantic UI", "description": "LESS Only distribution of Semantic UI", "homepage": "http://www.semantic-ui.com", diff --git a/theme.config.example b/theme.config.example index 0e5360a..37ff98a 100644 --- a/theme.config.example +++ b/theme.config.example @@ -18,59 +18,60 @@ */ /* Global */ -@site : 'default'; -@reset : 'default'; +@site : 'default'; +@reset : 'default'; /* Elements */ -@button : 'default'; -@container : 'default'; -@divider : 'default'; -@flag : 'default'; -@header : 'default'; -@icon : 'default'; -@image : 'default'; -@input : 'default'; -@label : 'default'; -@list : 'default'; -@loader : 'default'; -@rail : 'default'; -@reveal : 'default'; -@segment : 'default'; -@step : 'default'; +@button : 'default'; +@container : 'default'; +@divider : 'default'; +@flag : 'default'; +@header : 'default'; +@icon : 'default'; +@image : 'default'; +@input : 'default'; +@label : 'default'; +@list : 'default'; +@loader : 'default'; +@placeholder : 'default'; +@rail : 'default'; +@reveal : 'default'; +@segment : 'default'; +@step : 'default'; /* Collections */ -@breadcrumb : 'default'; -@form : 'default'; -@grid : 'default'; -@menu : 'default'; -@message : 'default'; -@table : 'default'; +@breadcrumb : 'default'; +@form : 'default'; +@grid : 'default'; +@menu : 'default'; +@message : 'default'; +@table : 'default'; /* Modules */ -@accordion : 'default'; -@checkbox : 'default'; -@dimmer : 'default'; -@dropdown : 'default'; -@embed : 'default'; -@modal : 'default'; -@nag : 'default'; -@popup : 'default'; -@progress : 'default'; -@rating : 'default'; -@search : 'default'; -@shape : 'default'; -@sidebar : 'default'; -@sticky : 'default'; -@tab : 'default'; -@transition : 'default'; +@accordion : 'default'; +@checkbox : 'default'; +@dimmer : 'default'; +@dropdown : 'default'; +@embed : 'default'; +@modal : 'default'; +@nag : 'default'; +@popup : 'default'; +@progress : 'default'; +@rating : 'default'; +@search : 'default'; +@shape : 'default'; +@sidebar : 'default'; +@sticky : 'default'; +@tab : 'default'; +@transition : 'default'; /* Views */ -@ad : 'default'; -@card : 'default'; -@comment : 'default'; -@feed : 'default'; -@item : 'default'; -@statistic : 'default'; +@ad : 'default'; +@card : 'default'; +@comment : 'default'; +@feed : 'default'; +@item : 'default'; +@statistic : 'default'; /******************************* Folders diff --git a/themes/default/elements/flag.overrides b/themes/default/elements/flag.overrides index 20f5056..6a0f921 100644 --- a/themes/default/elements/flag.overrides +++ b/themes/default/elements/flag.overrides @@ -310,6 +310,7 @@ i.flag.gabon:before { background-position: -36px 0px; } i.flag.gb:before, +i.flag.uk:before, i.flag.united.kingdom:before { background-position: -36px -26px; } diff --git a/themes/default/elements/icon.overrides b/themes/default/elements/icon.overrides index a70495e..2befad7 100755 --- a/themes/default/elements/icon.overrides +++ b/themes/default/elements/icon.overrides @@ -1346,9 +1346,9 @@ i.icon.youtube.play:before { content: "\f167"; } i.icon.window.maximize.outline:before { content: "\f2d0"; } i.icon.window.minimize.outline:before { content: "\f2d1"; } i.icon.window.restore.outline:before { content: "\f2d2"; } - i.icon.disk.outline:before { content: "\f369"; } /* Outline Aliases */ + i.icon.disk.outline:before { content: "\f0a0"; } i.icon.heart.empty, i.icon.star.empty { font-family: @outlineFontName; diff --git a/themes/default/elements/loader.variables b/themes/default/elements/loader.variables index 5cb1b9d..b52281e 100755 --- a/themes/default/elements/loader.variables +++ b/themes/default/elements/loader.variables @@ -29,6 +29,7 @@ @loaderTextColor: @textColor; @invertedLoaderTextColor: @invertedTextColor; + /*------------------- States --------------------*/ diff --git a/themes/default/elements/placeholder.overrides b/themes/default/elements/placeholder.overrides new file mode 100644 index 0000000..14fb0da --- /dev/null +++ b/themes/default/elements/placeholder.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/themes/default/elements/placeholder.variables b/themes/default/elements/placeholder.variables new file mode 100644 index 0000000..9e74197 --- /dev/null +++ b/themes/default/elements/placeholder.variables @@ -0,0 +1,55 @@ +@placeholderMaxWidth: 30rem; + +/* Key Content Sizing */ +@placeholderLineMargin: @relative12px; +@placeholderHeaderLineHeight: @relative9px; +@placeholderLineHeight: @relative7px; +@placeholderParagraphLineHeight: @placeholderLineHeight; + +@placeholderSpacing: @relative20px; + +/* Interval between consecutive placeholders */ +@placeholderAnimationInterval: 0.15s; + +/* Repeated Placeholder */ +@consecutivePlaceholderSpacing: 2rem; + +/* Image */ +@placeholderImageHeight: 100px; + +/* Header Image */ +@placeholderImageWidth: 3em; +@placeholderImageTextIndent: @10px; + +/* Paragraph */ +@placeholderHeaderLineOneOutdent: 20%; +@placeholderHeaderLineTwoOutdent: 60%; + +@placeholderLineOneOutdent: @placeholderFullLineOutdent; +@placeholderLineTwoOutdent: @placeholderMediumLineOutdent; +@placeholderLineThreeOutdent: @placeholderVeryLongLineOutdent; +@placeholderLineFourOutdent: @placeholderLongLineOutdent; +@placeholderLineFiveOutdent: @placeholderShortLineOutdent; + + +/* Glow Gradient */ +@placeholderLoadingAnimationDuration: 2s; +@placeholderLoadingGradientWidth: 1200px; +@placeholderLoadingGradient: linear-gradient(to right, + rgba(0, 0, 0, 0.08) 0%, + rgba(0, 0, 0, 0.15) 15%, + rgba(0, 0, 0, 0.08) 30% +); +@placeholderInvertedLoadingGradient: linear-gradient(to right, + rgba(255, 255, 255, 0.08) 0%, + rgba(255, 255, 255, 0.14) 15%, + rgba(255, 255, 255, 0.08) 30% +); + +/* Variations */ +@placeholderFullLineOutdent: 0%; +@placeholderVeryLongLineOutdent: 10%; +@placeholderLongLineOutdent: 35%; +@placeholderMediumLineOutdent: 50%; +@placeholderShortLineOutdent: 65%; +@placeholderVeryShortLineOutdent: 80%; diff --git a/themes/default/elements/segment.variables b/themes/default/elements/segment.variables index 16a545e..6ae2a2a 100755 --- a/themes/default/elements/segment.variables +++ b/themes/default/elements/segment.variables @@ -45,22 +45,19 @@ @pageGridMargin: (2 * @verticalPadding); /******************************* - States + Types *******************************/ -/* Loading Dimmer */ -@loaderDimmerColor: rgba(255, 255, 255, 0.8); -@loaderDimmerZIndex: 100; - -/* Loading Spinner */ -@loaderSize: 3em; -@loaderLineZIndex: 101; +/* Placeholder */ +@placeholderBackground: @offWhite; +@placeholderPadding: @padding; +@placeholderBorderColor: @borderColor; +@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; +@placeholderMinHeight: 18rem; +@placeholderContentMaxWidth: 15rem; +@placeholderContentInlineButtonMargin: 0px @5px 0px 0px; -/******************************* - Variations -*******************************/ - /* Piled */ @piledZIndex: auto; @piledMargin: 3em; @@ -77,6 +74,24 @@ @stackedPadding: @verticalPadding + (0.4em); @tallStackedPadding: @verticalPadding + (0.8em); +/******************************* + States +*******************************/ + +/* Loading Dimmer */ +@loaderDimmerColor: rgba(255, 255, 255, 0.8); +@loaderDimmerZIndex: 100; + +/* Loading Spinner */ +@loaderSize: 3em; +@loaderLineZIndex: 101; + + +/******************************* + Variations +*******************************/ + + /* Raised */ @raisedBoxShadow: @floatingShadow; diff --git a/themes/default/modules/dropdown.overrides b/themes/default/modules/dropdown.overrides index 729e201..744898e 100755 --- a/themes/default/modules/dropdown.overrides +++ b/themes/default/modules/dropdown.overrides @@ -6,8 +6,7 @@ @font-face { font-family: 'Dropdown'; src: - url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), - url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff') ; font-weight: normal; font-style: normal; @@ -46,17 +45,15 @@ content: "\f0da"/*rtl:"\f0d9"*/; } -/* Icons for Reference -.dropdown.down.icon { - content: "\f0d7"; -} -.dropdown.up.icon { - content: "\f0d8"; -} -.dropdown.left.icon { - content: "\f0d9"; -} -.dropdown.icon.icon { - content: "\f0da"; +.ui.dropdown > .clear.icon:before { + content: "\f00d"; } + +/* Icons for Reference (Subsetted in 2.4.0) + .dropdown.down:before { content: "\f0d7"; } + .dropdown.up:before { content: "\f0d8"; } + .dropdown.left:before { content: "\f0d9"; } + .dropdown.right:before { content: "\f0da"; } + .dropdown.close:before { content: "\f00d"; } */ + diff --git a/themes/default/modules/dropdown.variables b/themes/default/modules/dropdown.variables index 4c947e1..6a1cee6 100755 --- a/themes/default/modules/dropdown.variables +++ b/themes/default/modules/dropdown.variables @@ -211,7 +211,7 @@ @selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow; @selectionVisibleConnectingBorder: 0em; -@selectionVisibleIconOpacity: 1; +@selectionVisibleIconOpacity: ''; /*-------------- Search @@ -232,7 +232,7 @@ @searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight; /* Inline */ -@inlineIconMargin: 0em @relative7px 0em @relative3px; +@inlineIconMargin: 0em @relative3px 0em @relative3px; @inlineTextColor: inherit; @inlineTextFontWeight: @bold; @inlineMenuDistance: @relative3px; @@ -309,6 +309,10 @@ @errorItemHoverBackground: #FFF2F2; @errorItemActiveBackground: #FDCFCF; +/* Clearable */ +@clearableIconOpacity: 0.8; +@clearableIconActiveOpacity: 1; + /*------------------- Variations --------------------*/