fomantic-ui 2.9.3-beta.6 → 2.9.3-beta.61

package/src/definitions/modules/checkbox.less

@@ -56,11 +56,14 @@
     cursor: auto;
     position: relative;
     display: block;
-    padding-left: @labelDistance;
     outline: none;
     font-size: @labelFontSize;
 }
 
+.ui.checkbox:not(.invisible) label {
+    padding-left: @labelDistance;
+}
+
 .ui.checkbox label::before {
     position: absolute;
     top: 0;
@@ -130,8 +133,8 @@
     background: @checkboxHoverBackground;
     border-color: @checkboxHoverBorderColor;
 }
-.ui.checkbox label:hover,
-.ui.checkbox + label:hover {
+.ui.checkbox:not(.invisible) label:hover,
+.ui.checkbox:not(.invisible) + label:hover {
     color: @labelHoverColor;
 }
 
@@ -146,7 +149,7 @@
 .ui.checkbox label:active::after {
     color: @checkboxPressedColor;
 }
-.ui.checkbox input:active ~ label {
+.ui.checkbox:not(.invisible) input:active ~ label {
     color: @labelPressedColor;
 }
 
@@ -161,7 +164,7 @@
 .ui.checkbox input:focus ~ label::after {
     color: @checkboxFocusCheckColor;
 }
-.ui.checkbox input:focus ~ label {
+.ui.checkbox:not(.invisible) input:focus ~ label {
     color: @labelFocusColor;
 }
 
@@ -652,6 +655,59 @@
         }
     }
 }
+& when (@variationCheckboxInvisible) {
+    /* --------------
+         Invisible
+    --------------- */
+
+    .ui.invisible.checkbox {
+        &:not(.compact) {
+            display: block;
+        }
+        & input {
+            left: -99999px;
+            position: absolute;
+        }
+        & label::before,
+        & label::after {
+            display: none;
+        }
+        & label {
+            transition: @invisibleCheckboxLabelTransition;
+        }
+    }
+    .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) {
+        & + label {
+            background: @invisibleCheckboxBackground;
+            border-color: @invisibleCheckboxBorderColor;
+            box-shadow: @invisibleCheckboxBoxShadow;
+            color: @invisibleCheckboxColor;
+        }
+        &:not(:hover):focus + label:not(.image) {
+            box-shadow: @invisibleCheckboxFocusBoxShadow;
+        }
+        & + label.image,
+        .basic& + label {
+            box-shadow: none;
+        }
+    }
+
+    .ui.invisible.checkbox input:not(:checked) {
+        & + label.image {
+            opacity: @invisibleCheckboxImageOpacityUnchecked;
+            filter: @invisibleCheckboxImageFilterUnchecked;
+        }
+        &:not(:hover):focus + label.image {
+            opacity: @invisibleCheckboxImageOpacityFocus;
+        }
+        & when (@variationCheckboxDisabled) {
+            &[disabled] + label.image,
+            .disabled& + label.image {
+                opacity: @invisibleCheckboxImageOpacityUncheckedDisabled;
+            }
+        }
+    }
+}
 
 /* --------------------
         Size

package/src/definitions/modules/dimmer.js

@@ -528,7 +528,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/dimmer.less

@@ -220,7 +220,7 @@ body.dimmable > .dimmer {
     .light.light.light.light.light.dimmer {
         background: @lightBackgroundColor;
     }
-    .very.light.light.light.light.dimmer {
+    .very.very.very.very.light.dimmer {
         background: @veryLightBackgroundColor;
     }
 }
@@ -249,7 +249,7 @@ body.dimmable > .dimmer {
         .light.light.light.light.light.inverted.dimmer {
             background: @lightInvertedBackgroundColor;
         }
-        .very.light.light.light.light.inverted.dimmer {
+        .very.very.very.very.light.inverted.dimmer {
             background: @veryLightInvertedBackgroundColor;
         }
     }

package/src/definitions/modules/dropdown.js

@@ -363,7 +363,7 @@
                             module.verbose('Adding clear icon');
                             $clear = $('<i />')
                                 .addClass('remove icon')
-                                .insertBefore($text)
+                                .insertAfter($icon)
                             ;
                         }
                         if (module.is.search() && !module.has.search()) {
@@ -529,7 +529,7 @@
                     callback = isFunction(callback)
                         ? callback
                         : function () {};
-                    if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache()) {
+                    if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache() && !module.has.maxSelections()) {
                         module.clearItems();
                     }
                     if (!module.can.show() && module.is.remote()) {
@@ -579,7 +579,10 @@
                             if ($subMenu.length > 0) {
                                 module.verbose('Hiding sub-menu', $subMenu);
                                 $subMenu.each(function () {
-                                    module.animate.hide(false, $(this));
+                                    var $sub = $(this);
+                                    if (!module.is.animating($sub)) {
+                                        module.animate.hide(false, $sub);
+                                    }
                                 });
                             }
                         }
@@ -774,6 +777,8 @@
                         }
                     ;
                     if (settings.useLabels && module.has.maxSelections()) {
+                        module.show();
+
                         return;
                     }
                     if (settings.apiSettings) {
@@ -1097,8 +1102,8 @@
                             notFoundTokens = []
                         ;
                         tokens.forEach(function (value) {
-                            if (module.set.selected(module.escape.htmlEntities(value.trim()), null, true, true) === false) {
-                                notFoundTokens.push(value);
+                            if (module.set.selected(module.escape.htmlEntities(value.trim()), null, false, true) === false) {
+                                notFoundTokens.push(value.trim());
                             }
                         });
                         event.preventDefault();
@@ -1231,7 +1236,7 @@
                             module.set.filtered();
                         }
                         clearTimeout(module.timer);
-                        module.timer = setTimeout(module.search, settings.delay.search);
+                        module.timer = setTimeout(function () { module.search(); }, settings.delay.search);
                     },
                     label: {
                         click: function (event) {
@@ -1407,11 +1412,13 @@
                                     if (settings.allowAdditions) {
                                         module.remove.userAddition();
                                     }
-                                    module.remove.filteredItem();
+                                    if (!settings.keepSearchTerm) {
+                                        module.remove.filteredItem();
+                                        module.remove.searchTerm();
+                                    }
                                     if (!module.is.visible() && $target.length > 0) {
                                         module.show();
                                     }
-                                    module.remove.searchTerm();
                                     if (!module.is.focusedOnSearch() && skipRefocus !== true) {
                                         module.focusSearch(true);
                                     }
@@ -1597,7 +1604,9 @@
                                         module.verbose('Selecting item from keyboard shortcut', $selectedItem);
                                         module.event.item.click.call($selectedItem, event);
                                         if (module.is.searchSelection()) {
-                                            module.remove.searchTerm();
+                                            if (!settings.keepSearchTerm) {
+                                                module.remove.searchTerm();
+                                            }
                                             if (module.is.multiple()) {
                                                 $search.trigger('focus');
                                             }
@@ -1814,7 +1823,7 @@
                             ? value
                             : text;
                         if (module.can.activate($(element))) {
-                            module.set.selected(value, $(element));
+                            module.set.selected(value, $(element), false, settings.keepSearchTerm);
                             if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) {
                                 module.hideAndClear();
                             }
@@ -2166,7 +2175,7 @@
                                         return;
                                     }
                                     if (isMultiple) {
-                                        if ($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(String)) !== -1) {
+                                        if ($.inArray(module.escape.htmlEntities(String(optionValue)), value.map(String).map(module.escape.htmlEntities)) !== -1) {
                                             $selectedItem = $selectedItem
                                                 ? $selectedItem.add($choice)
                                                 : $choice;
@@ -2227,7 +2236,7 @@
                             return false;
                         }
 
-                        return true;
+                        return false;
                     },
                     disabled: function () {
                         $search.attr('tabindex', module.is.disabled() ? -1 : 0);
@@ -2317,7 +2326,7 @@
                                 $.each(values, function (value, name) {
                                     module.set.text(name);
                                 });
-                            } else {
+                            } else if (settings.useLabels) {
                                 $.each(values, function (value, name) {
                                     module.add.label(value, name);
                                 });
@@ -2464,7 +2473,7 @@
                             valueIsSet       = searchValue !== ''
                         ;
                         if (isMultiple && hasSearchValue) {
-                            module.verbose('Adjusting input width', searchWidth, settings.glyphWidth);
+                            module.verbose('Adjusting input width', searchWidth);
                             $search.css('width', searchWidth + 'px');
                         }
                         if (hasSearchValue || (isSearchMultiple && valueIsSet)) {
@@ -2763,7 +2772,7 @@
                             return false;
                         }
                         module.debug('Setting selected menu item to', $selectedItem);
-                        if (module.is.multiple()) {
+                        if (module.is.multiple() && !keepSearchTerm) {
                             module.remove.searchWidth();
                         }
                         if (module.is.single()) {
@@ -3738,12 +3747,12 @@
                     show: function () {
                         module.verbose('Delaying show event to ensure user intent');
                         clearTimeout(module.timer);
-                        module.timer = setTimeout(module.show, settings.delay.show);
+                        module.timer = setTimeout(function () { module.show(); }, settings.delay.show);
                     },
                     hide: function () {
                         module.verbose('Delaying hide event to ensure user intent');
                         clearTimeout(module.timer);
-                        module.timer = setTimeout(module.hide, settings.delay.hide);
+                        module.timer = setTimeout(function () { module.hide(); }, settings.delay.hide);
                     },
                 },
 
@@ -3869,7 +3878,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var
@@ -4006,6 +4015,7 @@
         forceSelection: false, // force a choice on blur with search selection
 
         allowAdditions: false, // whether multiple select should allow user added values
+        keepSearchTerm: false, // whether the search value should be kept and menu stays filtered on item selection
         ignoreCase: false, // whether to consider case sensitivity when creating labels
         ignoreSearchCase: true, // whether to consider case sensitivity when filtering items
         hideAdditions: true, // whether or not to hide special message prompting a user they can enter a value
@@ -4025,8 +4035,6 @@
         duration: 200, // duration of transition
         displayType: false, // displayType of transition
 
-        glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
-
         headerDivider: true, // whether option headers should have an additional divider line underneath when converted from <select> <optgroup>
 
         collapseOnActionable: true, // whether the dropdown should collapse upon selection of an actionable item

package/src/definitions/modules/dropdown.less

@@ -1181,6 +1181,16 @@ select.ui.dropdown {
     }
 }
 
+& when (@variationDropdownDisabled) or (@variationDropdownReadonly) {
+    .ui.disabled.dropdown,
+    .ui.read-only.dropdown {
+        > .remove.icon,
+        > .label > .delete.icon {
+            display: none;
+        }
+    }
+}
+
 /*******************************
            Variations
 *******************************/
@@ -1328,8 +1338,8 @@ select.ui.dropdown {
         margin: 0 !important;
         border-top: @menuBorder;
     }
-    .ui.scrolling.dropdown .menu .item.item.item,
-    .ui.dropdown .scrolling.menu > .item.item.item {
+    .ui.ui.ui.scrolling.dropdown .menu .item,
+    .ui.ui.ui.dropdown .scrolling.menu > .item {
         border-top: @scrollingMenuItemBorder;
     }
     .ui.scrolling.dropdown .menu .item:first-child,
@@ -1354,24 +1364,55 @@ select.ui.dropdown {
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingMobileMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingMobileMaxMenuHeight;
+            }
+        }
     }
     @media only screen and (min-width: @tabletBreakpoint) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingTabletMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingTabletMaxMenuHeight;
+            }
+        }
     }
     @media only screen and (min-width: @computerBreakpoint) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingComputerMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingComputerMaxMenuHeight;
+            }
+        }
     }
     @media only screen and (min-width: @widescreenMonitorBreakpoint) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingWidescreenMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingWidescreenMaxMenuHeight;
+            }
+        }
+    }
+    & when (@variationDropdownResizable) {
+        .ui.scrolling.resizable.dropdown .menu,
+        .ui.dropdown .scrolling.resizable.menu {
+            resize: @resizableDirection;
+            max-height: none;
+        }
     }
 }
 

package/src/definitions/modules/embed.js

@@ -440,7 +440,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/flyout.js

@@ -525,7 +525,9 @@
                                         $removedInputs = $(collectNodes(mutation.removedNodes)).filter('a[href], [tabindex], :input');
                                     if ($addedInputs.length > 0 || $removedInputs.length > 0) {
                                         shouldRefreshInputs = true;
-                                        ignoreAutofocus = false;
+                                        if ($addedInputs.filter(':input').length > 0 || $removedInputs.filter(':input').length > 0) {
+                                            ignoreAutofocus = false;
+                                        }
                                     }
                                 }
 
@@ -1245,7 +1247,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/modal.js

@@ -290,7 +290,9 @@
                                         $removedInputs = $(collectNodes(mutation.removedNodes)).filter('a[href], [tabindex], :input');
                                     if ($addedInputs.length > 0 || $removedInputs.length > 0) {
                                         shouldRefreshInputs = true;
-                                        ignoreAutofocus = false;
+                                        if ($addedInputs.filter(':input').length > 0 || $removedInputs.filter(':input').length > 0) {
+                                            ignoreAutofocus = false;
+                                        }
                                     }
                                 }
 
@@ -525,7 +527,7 @@
                     },
                     debounce: function (method, delay) {
                         clearTimeout(module.timer);
-                        module.timer = setTimeout(method, delay);
+                        module.timer = setTimeout(function () { method(); }, delay);
                     },
                     keyboard: function (event) {
                         var
@@ -620,7 +622,7 @@
                             ignoreRepeatedEvents = false;
                             if (settings.allowMultiple) {
                                 if (module.others.active()) {
-                                    $otherModals.filter('.' + className.active).find(selector.dimmer).addClass('active');
+                                    $otherModals.filter('.' + className.active).find(selector.dimmer).removeClass('out').addClass('transition fade in active');
                                 }
 
                                 if (settings.detachable) {
@@ -692,6 +694,8 @@
                                     onStart: function () {
                                         if (!module.others.active() && !module.others.animating() && !keepDimmed) {
                                             module.hideDimmer();
+                                        } else if (settings.allowMultiple) {
+                                            (hideOthersToo ? $allModals : $previousModal).find(selector.dimmer).removeClass('in').addClass('out');
                                         }
                                         if (settings.keyboardShortcuts && !module.others.active()) {
                                             module.remove.keyboardShortcuts();
@@ -704,11 +708,7 @@
                                             $previousModal.addClass(className.front);
                                             $module.removeClass(className.front);
 
-                                            if (hideOthersToo) {
-                                                $allModals.find(selector.dimmer).removeClass('active');
-                                            } else {
-                                                $previousModal.find(selector.dimmer).removeClass('active');
-                                            }
+                                            (hideOthersToo ? $allModals : $previousModal).find(selector.dimmer).removeClass('active');
                                         }
                                         if (isFunction(settings.onHidden)) {
                                             settings.onHidden.call(element);
@@ -1273,7 +1273,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/modal.less

@@ -437,19 +437,22 @@
         overflow: hidden;
     }
     .scrolling.dimmable > .dimmer {
-        justify-content: flex-start;
+        justify-content: center;
         position: fixed;
     }
     .scrolling.dimmable:not(body) > .dimmer {
-        justify-content: center;
         position: absolute;
     }
     .scrolling.dimmable.dimmed > .dimmer {
         overflow: auto;
         overscroll-behavior: @overscrollBehavior;
     }
+    .modals.dimmer .ui.scrolling.modal.fullscreen {
+        top: 0;
+    }
     .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
         margin: @scrollingMargin auto;
+        top: @scrollingTop;
     }
 
     /* Fix for Firefox, Edge, IE11 */
@@ -478,6 +481,12 @@
         overflow: auto;
         overscroll-behavior: @overscrollBehavior;
     }
+    & when (@variationTableResizable) {
+        .ui.modal > .resizable.scrolling.content {
+            resize: @resizableDirection;
+            max-height: none;
+        }
+    }
 }
 
 & when (@variationModalOverlay) {

package/src/definitions/modules/nag.js

@@ -88,7 +88,7 @@
                     }
 
                     if (settings.displayTime > 0) {
-                        setTimeout(module.hide, settings.displayTime);
+                        setTimeout(function () { module.hide(); }, settings.displayTime);
                     }
                     module.show();
                 },
@@ -377,7 +377,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/popup.js

@@ -194,7 +194,7 @@
                         ;
                         clearTimeout(module.hideTimer);
                         if (!openedWithTouch || (openedWithTouch && settings.addTouchEvents)) {
-                            module.showTimer = setTimeout(module.show, delay);
+                            module.showTimer = setTimeout(function () { module.show(); }, delay);
                         }
                     },
                     end: function () {
@@ -204,7 +204,7 @@
                                 : settings.delay
                         ;
                         clearTimeout(module.showTimer);
-                        module.hideTimer = setTimeout(module.hide, delay);
+                        module.hideTimer = setTimeout(function () { module.hide(); }, delay);
                     },
                     touchstart: function (event) {
                         openedWithTouch = true;
@@ -248,9 +248,11 @@
                 // generates popup html from metadata
                 create: function () {
                     var
+                        targetSibling = $target.next(selector.popup),
+                        contentFallback = !settings.popup && targetSibling.length === 0 ? $module.attr('title') : false,
                         html      = module.get.html(),
                         title     = module.get.title(),
-                        content   = module.get.content()
+                        content   = module.get.content(contentFallback)
                     ;
 
                     if (html || content || title) {
@@ -291,10 +293,10 @@
                         if (settings.hoverable) {
                             module.bind.popup();
                         }
-                    } else if ($target.next(selector.popup).length > 0) {
+                    } else if (targetSibling.length > 0) {
                         module.verbose('Pre-existing popup found');
                         settings.inline = true;
-                        settings.popup = $target.next(selector.popup).data(metadata.activator, $module);
+                        settings.popup = targetSibling.data(metadata.activator, $module);
                         module.refresh();
                         if (settings.hoverable) {
                             module.bind.popup();
@@ -484,10 +486,10 @@
 
                         return $module.data(metadata.title) || settings.title;
                     },
-                    content: function () {
+                    content: function (fallback) {
                         $module.removeData(metadata.content);
 
-                        return $module.data(metadata.content) || settings.content || $module.attr('title');
+                        return $module.data(metadata.content) || settings.content || fallback;
                     },
                     variation: function () {
                         $module.removeData(metadata.variation);
@@ -1242,7 +1244,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/popup.less

@@ -117,7 +117,6 @@
     [data-tooltip]::before,
     [data-tooltip]::after {
         pointer-events: none;
-        visibility: hidden;
         opacity: 0;
         transition:
             transform @tooltipDuration @tooltipEasing,
@@ -138,9 +137,10 @@
     [data-tooltip]::after {
         transform-origin: center bottom;
     }
+    [data-tooltip][data-variation~="visible"]::before,
+    [data-tooltip][data-variation~="visible"]::after,
     [data-tooltip]:hover::before,
     [data-tooltip]:hover::after {
-        visibility: visible;
         pointer-events: auto;
         opacity: 1;
     }
@@ -833,8 +833,8 @@
         @color: @value;
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
-        @cl: lighten(@c, @loadingColoredPercent);
-        @ll: darken(@l, @loadingColoredPercent);
+        @cl: if(iscolor(@c), lighten(@c, @loadingColoredPercent), @c);
+        @ll: if(iscolor(@l), darken(@l, @loadingColoredPercent), @l);
 
         & when not (@variationPopupTooltip) {
             .ui.ui.ui.@{color}.popup::before,

package/src/definitions/modules/progress.js

@@ -791,7 +791,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/rating.js

@@ -368,7 +368,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var