fomantic-ui 2.9.3-beta.9 → 2.9.3

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

@@ -435,20 +435,24 @@ select.ui.dropdown {
     }
 
     /* Selection Menu */
-    .ui.selection.dropdown .menu {
+    .ui.selection.dropdown:not(.unlimited) .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
-        border-top-width: 0 !important;
+    }
+    .ui.selection.dropdown .menu {
         outline: none;
         margin: 0 -@menuBorderWidth;
         min-width: @menuMinWidth;
         width: @menuMinWidth;
-        border-radius: @selectionMenuBorderRadius;
         box-shadow: @selectionMenuBoxShadow;
         transition: @selectionMenuTransition;
     }
+    .ui.selection.dropdown:not(.pointing):not(.floating) .menu {
+        border-top-width: 0;
+        border-radius: @selectionMenuBorderRadius;
+    }
     .ui.selection.dropdown .menu::after,
     .ui.selection.dropdown .menu::before {
         display: none;
@@ -471,7 +475,7 @@ select.ui.dropdown {
                 max-height: @selectionMobileMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionMobileMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -492,7 +496,7 @@ select.ui.dropdown {
                 max-height: @selectionTabletMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionTabletMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -513,7 +517,7 @@ select.ui.dropdown {
                 max-height: @selectionComputerMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionComputerMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -534,7 +538,7 @@ select.ui.dropdown {
                 max-height: @selectionWidescreenMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown .menu {
+        .ui.selection.dropdown:not(.unlimited) .menu {
             max-height: @selectionWidescreenMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -554,6 +558,12 @@ select.ui.dropdown {
         white-space: normal;
         word-wrap: normal;
     }
+    & when (@variationDropdownPointing) or (@variationDropdownFloating) {
+        .ui.selection.pointing.dropdown .menu > .item:first-child,
+        .ui.selection.floating.dropdown .menu > .item:first-child {
+            border-top: none;
+        }
+    }
 
     /* User Item */
     .ui.selection.dropdown .menu > .hidden.addition.item {
@@ -621,7 +631,7 @@ select.ui.dropdown {
     }
 
     /* Connecting Border */
-    .ui.active.selection.dropdown {
+    .ui.active.selection.dropdown:not(.pointing):not(.floating) {
         border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
         border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
     }
@@ -749,29 +759,29 @@ select.ui.dropdown {
     }
 
     /* Search Menu */
-    .ui.search.dropdown .menu {
+    .ui.search.dropdown:not(.unlimited) .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
     }
     @media only screen and (max-width: @largestMobileScreen) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchMobileMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @tabletBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchTabletMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @computerBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchComputerMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-        .ui.search.dropdown .menu {
+        .ui.search.dropdown:not(.unlimited) .menu {
             max-height: @searchWidescreenMaxMenuHeight;
         }
     }
@@ -1181,6 +1191,16 @@ select.ui.dropdown {
     }
 }
 
+& when (@variationDropdownDisabled) or (@variationDropdownReadonly) {
+    .ui.disabled.dropdown,
+    .ui.read-only.dropdown {
+        > .remove.icon,
+        > .label > .delete.icon {
+            display: none;
+        }
+    }
+}
+
 /*******************************
            Variations
 *******************************/
@@ -1273,9 +1293,9 @@ select.ui.dropdown {
 
     & when (@variationDropdownSelection) {
         /* Selection */
-        .ui.ui.upward.selection.dropdown .menu {
-            border-top-width: @menuBorderWidth !important;
-            border-bottom-width: 0 !important;
+        .ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) .menu {
+            border-top-width: @menuBorderWidth;
+            border-bottom-width: 0;
             box-shadow: @upwardSelectionMenuBoxShadow;
             border-radius: @upwardSelectionMenuBorderRadius;
         }
@@ -1284,21 +1304,23 @@ select.ui.dropdown {
         }
 
         /* Active Upward */
-        .ui.active.upward.selection.dropdown {
+        .ui.active.upward.selection.dropdown:not(.pointing):not(.floating) {
             border-radius: @upwardSelectionVisibleBorderRadius !important;
         }
 
         /* Visible Upward */
         .ui.upward.selection.dropdown.visible {
             box-shadow: @upwardSelectionVisibleBoxShadow;
-            border-radius: @upwardSelectionVisibleBorderRadius !important;
+            &:not(.pointing):not(.floating) {
+                border-radius: @upwardSelectionVisibleBorderRadius !important;
+            }
         }
 
         /* Visible Hover Upward */
         .ui.upward.active.selection.dropdown:hover {
             box-shadow: @upwardSelectionActiveHoverBoxShadow;
         }
-        .ui.upward.active.selection.dropdown:hover .menu {
+        .ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu {
             box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
         }
     }
@@ -1328,8 +1350,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 +1376,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;
+        }
     }
 }
 
@@ -1582,6 +1635,22 @@ select.ui.dropdown {
         z-index: @pointingArrowZIndex;
     }
 
+    @supports selector(:has(.f)) {
+        .ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+        .ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
+            background: @hoveredItemBackground;
+        }
+        .ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+        .ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
+            background: @selectedBackground;
+        }
+    }
+
+    & when (@variationDropdownSelection) {
+        .ui.selection.pointing.dropdown > .menu::after {
+            box-shadow: @pointingArrowBoxShadowSelection;
+        }
+    }
     .ui.pointing.dropdown > .menu:not(.hidden)::after {
         top: @pointingArrowOffset;
         left: 50%;
@@ -1727,6 +1796,12 @@ select.ui.dropdown {
         margin: @pointingArrowOffset 0 0;
     }
 
+    & when (@variationDropdownSelection) {
+        .ui.selection.pointing.upward.dropdown .menu::after {
+            box-shadow: @pointingUpwardArrowBoxShadowSelection;
+        }
+    }
+
     /* Right Pointing Upward */
     .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
         top: auto !important;
@@ -1754,6 +1829,19 @@ select.ui.dropdown {
     }
 }
 
+& when (@variationDropdownPointing) or (@variationDropdownFloating) {
+    .ui.floating.dropdown .menu .item:first-child,
+    .ui.pointing.dropdown .menu .item:first-child {
+        border-top-left-radius: @borderRadius;
+        border-top-right-radius: @borderRadius;
+    }
+    .ui.floating.dropdown .menu .item:last-child,
+    .ui.pointing.dropdown .menu .item:last-child {
+        border-bottom-left-radius: @borderRadius;
+        border-bottom-right-radius: @borderRadius;
+    }
+}
+
 /* --------------------
         Sizes
 --------------------- */
@@ -1967,6 +2055,21 @@ select.ui.dropdown {
             background: @invertedPointingArrowBackground;
             box-shadow: @invertedPointingArrowBoxShadow;
         }
+        & when (@variationDropdownUpward) {
+            .ui.inverted.upward.pointing.dropdown > .menu::after {
+                box-shadow: @invertedPointingUpwardArrowBoxShadow;
+            }
+        }
+        @supports selector(:has(.f)) {
+            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+            .ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
+                background: @invertedHoveredItemBackground;
+            }
+            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+            .ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
+                background: @invertedSelectedBackground;
+            }
+        }
     }
 }
 

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