fomantic-ui 2.9.2-beta.0 → 2.9.2-beta.10

package/src/definitions/collections/menu.less

@@ -1,9 +1,8 @@
-/*
- * # Fomantic - Menu
+/*!
+ * # Fomantic-UI - Menu
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
- * Copyright 2015 Contributor
  * Released under the MIT license
  * https://opensource.org/licenses/MIT
  *
@@ -796,7 +795,7 @@ Floated Menu / Item
     .ui.compact.menu .item:last-child {
         border-radius: 0 @borderRadius @borderRadius 0;
     }
-    .ui.pagination.menu .item:last-child::before {
+    .ui.pagination.menu:not(.wrapping) .item:last-child::before {
         display: none;
     }
 
@@ -1490,12 +1489,17 @@ Floated Menu / Item
 }
 
 & when (@variationMenuCentered) {
-    .ui.center.aligned.menu,
-    .ui.centered.menu {
+    .ui.center.aligned.menu:not(.fluid),
+    .ui.centered.menu:not(.fluid) {
         display: inline-flex;
         transform: translateX(-50%);
         margin-left: 50%;
     }
+    .ui.center.aligned.menu .item,
+    .ui.centered.menu .item {
+        flex: 1 0 auto;
+        justify-content: center;
+    }
 }
 
 & when (@variationMenuInverted) {
@@ -1915,6 +1919,35 @@ Floated Menu / Item
     }
 }
 
+& when (@variationMenuWrapping) {
+    .ui.wrapping.menu {
+        flex-wrap: wrap;
+        & .item::before {
+            right: auto;
+            left: 0;
+        }
+        & .item:first-child::before {
+            display: none;
+        }
+        &:not(.tabular) .item {
+            &:last-of-type,
+            &:last-child {
+                border-right: @dividerSize solid @dividerBackground;
+            }
+        }
+    }
+    & when (@variationMenuWrapped) {
+        .ui.wrapped.menu:not(.tabular) .item {
+            &:first-child {
+                border-bottom-left-radius: 0;
+            }
+            &:last-child {
+                border-top-right-radius: 0;
+            }
+        }
+    }
+}
+
 /* --------------
      Sizes
 --------------- */

package/src/definitions/elements/input.less

@@ -64,11 +64,10 @@
 
 /* browsers require these rules separate */
 
-.ui.input > input::-webkit-input-placeholder {
+.ui.input > input::placeholder {
     color: @placeholderColor;
 }
 .ui.input > input::-moz-placeholder {
-    color: @placeholderColor;
     opacity: 1;
 }
 .ui.input > input:-ms-input-placeholder when (@supportIE) {
@@ -148,12 +147,8 @@
     color: @focusColor;
     box-shadow: @focusBoxShadow;
 }
-.ui.input.focus > input::-webkit-input-placeholder,
-.ui.input > input:focus::-webkit-input-placeholder {
-    color: @placeholderFocusColor;
-}
-.ui.input.focus > input::-moz-placeholder,
-.ui.input > input:focus::-moz-placeholder {
+.ui.input.focus > input::placeholder,
+.ui.input > input:focus::placeholder {
     color: @placeholderFocusColor;
 }
 & when (@supportIE) {
@@ -192,10 +187,7 @@
         }
 
         /* Placeholder */
-        .ui.input.@{state} > input::-webkit-input-placeholder {
-            color: @formStates[@@state][inputPlaceholderColor];
-        }
-        .ui.input.@{state} > input::-moz-placeholder {
+        .ui.input.@{state} > input::placeholder {
             color: @formStates[@@state][inputPlaceholderColor];
         }
         .ui.input.@{state} > input:-ms-input-placeholder when (@supportIE) {
@@ -203,10 +195,7 @@
         }
 
         /* Focused Placeholder */
-        .ui.input.@{state} > input:focus::-webkit-input-placeholder {
-            color: @formStates[@@state][inputPlaceholderFocusColor];
-        }
-        .ui.input.@{state} > input:focus::-moz-placeholder {
+        .ui.input.@{state} > input:focus::placeholder {
             color: @formStates[@@state][inputPlaceholderFocusColor];
         }
         .ui.input.@{state} > input:focus:-ms-input-placeholder when (@supportIE){
@@ -258,10 +247,7 @@
             color: inherit;
         }
 
-        .ui.transparent.inverted.input > input::-webkit-input-placeholder {
-            color: @transparentInvertedPlaceholderColor;
-        }
-        .ui.transparent.inverted.input > input::-moz-placeholder {
+        .ui.transparent.inverted.input > input::placeholder {
             color: @transparentInvertedPlaceholderColor;
         }
         .ui.transparent.inverted.input > input:-ms-input-placeholder when (@supportIE) {

package/src/definitions/globals/site.less

@@ -195,30 +195,12 @@ a:hover {
 *******************************/
 
 /* Site */
-::-webkit-selection {
-    background-color: @highlightBackground;
-    color: @highlightColor;
-}
-::-moz-selection {
-    background-color: @highlightBackground;
-    color: @highlightColor;
-}
 ::selection {
     background-color: @highlightBackground;
     color: @highlightColor;
 }
 
 /* Form */
-textarea::-webkit-selection,
-input::-webkit-selection {
-    background-color: @inputHighlightBackground;
-    color: @inputHighlightColor;
-}
-textarea::-moz-selection,
-input::-moz-selection {
-    background-color: @inputHighlightBackground;
-    color: @inputHighlightColor;
-}
 textarea::selection,
 input::selection {
     background-color: @inputHighlightBackground;

package/src/definitions/modules/accordion.js

@@ -175,7 +175,7 @@
                         .addClass(className.animating)
                     ;
                     if (settings.animateChildren) {
-                        if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                        if ($.fn.transition !== undefined) {
                             $activeContent
                                 .children()
                                 .transition({
@@ -239,7 +239,7 @@
                             .addClass(className.animating)
                         ;
                         if (settings.animateChildren) {
-                            if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                            if ($.fn.transition !== undefined) {
                                 $activeContent
                                     .children()
                                     .transition({
@@ -308,7 +308,7 @@
                             .stop(true, true)
                         ;
                         if (settings.animateChildren) {
-                            if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                            if ($.fn.transition !== undefined) {
                                 $openContents
                                     .children()
                                     .transition({

package/src/definitions/modules/checkbox.less

@@ -409,10 +409,10 @@
 
     /* Active */
     .ui.slider.checkbox input:checked ~ label {
-        color: @sliderOnLabelColor !important;
+        color: @sliderOnLabelColor;
     }
     .ui.slider.checkbox input:checked ~ label::before {
-        background-color: @sliderOnLineColor !important;
+        background-color: @sliderOnLineColor;
     }
     .ui.slider.checkbox input:checked ~ label::after {
         left: @sliderTravelDistance;
@@ -420,10 +420,10 @@
 
     /* Active Focus */
     .ui.slider.checkbox input:focus:checked ~ label {
-        color: @sliderOnFocusLabelColor !important;
+        color: @sliderOnFocusLabelColor;
     }
     .ui.slider.checkbox input:focus:checked ~ label::before {
-        background-color: @sliderOnFocusLineColor !important;
+        background-color: @sliderOnFocusLineColor;
     }
 
     & when (@variationCheckboxRightAligned) {
@@ -520,10 +520,10 @@
 
     /* Active */
     .ui.toggle.checkbox input:checked ~ label {
-        color: @toggleOnLabelColor !important;
+        color: @toggleOnLabelColor;
     }
     .ui.toggle.checkbox input:checked ~ label::before {
-        background-color: @toggleOnLaneColor !important;
+        background-color: @toggleOnLaneColor;
     }
     .ui.toggle.checkbox input:checked ~ label::after {
         left: @toggleOnOffset;
@@ -532,10 +532,10 @@
 
     /* Active Focus */
     .ui.toggle.checkbox input:focus:checked ~ label {
-        color: @toggleOnFocusLabelColor !important;
+        color: @toggleOnFocusLabelColor;
     }
     .ui.toggle.checkbox input:focus:checked ~ label::before {
-        background-color: @toggleOnFocusLaneColor !important;
+        background-color: @toggleOnFocusLaneColor;
     }
 
     & when (@variationCheckboxRightAligned) {
@@ -563,8 +563,8 @@
          Fitted
     --------------- */
 
-    .ui.fitted.checkbox label {
-        padding-left: 0 !important;
+    .ui.ui.fitted.checkbox label {
+        padding-left: 0;
     }
 
     .ui.fitted.toggle.checkbox {
@@ -580,14 +580,14 @@
     /* --------------
          Inverted
     --------------- */
-    .ui.inverted.checkbox label,
-    .ui.inverted.checkbox + label {
-        color: @invertedTextColor !important;
+    .ui.ui.ui.inverted.checkbox label,
+    .ui.ui.ui.inverted.checkbox + label {
+        color: @invertedTextColor;
     }
 
     /* Hover */
-    .ui.inverted.checkbox label:hover {
-        color: @invertedHoveredTextColor !important;
+    .ui.ui.inverted.checkbox label:hover {
+        color: @invertedHoveredTextColor;
     }
     .ui.inverted.checkbox label:hover::before {
         border-color: @strongSelectedBorderColor;
@@ -599,56 +599,56 @@
         }
 
         /* Slider Line */
-        .ui.inverted.slider.checkbox label::before {
-            background-color: @invertedUnselectedTextColor !important;
+        .ui.ui.inverted.slider.checkbox label::before {
+            background-color: @invertedUnselectedTextColor;
         }
 
         /* Slider Hover */
-        .ui.inverted.slider.checkbox label:hover::before {
-            background: @invertedLightTextColor !important;
+        .ui.ui.inverted.slider.checkbox label:hover::before {
+            background: @invertedLightTextColor;
         }
 
         /* Slider Active */
-        .ui.inverted.slider.checkbox input:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.slider.checkbox input:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.slider.checkbox input:checked ~ label::before {
-            background-color: @selectedWhiteBorderColor !important;
+        .ui.ui.inverted.slider.checkbox input:checked ~ label::before {
+            background-color: @selectedWhiteBorderColor;
         }
 
         /* Slider Active Focus */
-        .ui.inverted.slider.checkbox input:focus:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.slider.checkbox input:focus:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.slider.checkbox input:focus:checked ~ label::before {
-            background-color: @selectedWhiteBorderColor !important;
+        .ui.ui.inverted.slider.checkbox input:focus:checked ~ label::before {
+            background-color: @selectedWhiteBorderColor;
         }
     }
     & when (@variationCheckboxToggle) {
         /* Toggle Switch */
-        .ui.inverted.toggle.checkbox label::before {
-            background-color: @invertedTextColor !important;
+        .ui.ui.inverted.toggle.checkbox label::before {
+            background-color: @invertedTextColor;
         }
 
         /* Toggle Hover */
-        .ui.inverted.toggle.checkbox label:hover::before {
-            background: @invertedHoveredTextColor !important;
+        .ui.ui.inverted.toggle.checkbox label:hover::before {
+            background: @invertedHoveredTextColor;
         }
 
         /* Toggle Active */
-        .ui.inverted.toggle.checkbox input:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.toggle.checkbox input:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.toggle.checkbox input:checked ~ label::before {
-            background-color: @toggleOnLaneColor !important;
+        .ui.ui.inverted.toggle.checkbox input:checked ~ label::before {
+            background-color: @toggleOnLaneColor;
         }
 
         /* Toggle Active Focus */
-        .ui.inverted.toggle.checkbox input:focus:checked ~ label {
-            color: @invertedSelectedTextColor !important;
+        .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label {
+            color: @invertedSelectedTextColor;
         }
-        .ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
-            background-color: @toggleOnFocusLaneColor !important;
+        .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
+            background-color: @toggleOnFocusLaneColor;
         }
     }
 }

package/src/definitions/modules/dimmer.js

@@ -229,7 +229,7 @@
                         callback = isFunction(callback)
                             ? callback
                             : function () {};
-                        if (settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+                        if (settings.useCSS && $.fn.transition !== undefined) {
                             if (settings.useFlex) {
                                 module.debug('Using flex dimmer');
                                 module.remove.legacy();
@@ -288,7 +288,7 @@
                         callback = isFunction(callback)
                             ? callback
                             : function () {};
-                        if (settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+                        if (settings.useCSS && $.fn.transition !== undefined) {
                             module.verbose('Hiding dimmer with css');
                             $dimmer
                                 .transition({

package/src/definitions/modules/dropdown.js

@@ -3637,7 +3637,7 @@
                                     displayType: module.get.displayType(),
                                 }).transition('show');
                                 callback.call(element);
-                            } else if (module.can.useElement('transition') && $module.transition('is supported')) {
+                            } else if (module.can.useElement('transition')) {
                                 $currentMenu
                                     .transition({
                                         animation: transition + ' in',
@@ -3679,7 +3679,7 @@
                                     displayType: module.get.displayType(),
                                 }).transition('hide');
                                 callback.call(element);
-                            } else if ($.fn.transition !== undefined && $module.transition('is supported')) {
+                            } else if ($.fn.transition !== undefined) {
                                 $currentMenu
                                     .transition({
                                         animation: transition + ' out',

package/src/definitions/modules/dropdown.less

@@ -425,6 +425,12 @@ select.ui.dropdown {
         /* Compact */
         .ui.compact.selection.dropdown {
             min-width: 0;
+            & > .menu {
+                width: auto;
+            }
+            &:not(.multiline) {
+                width: max-content;
+            }
         }
     }
 
@@ -1898,16 +1904,6 @@ select.ui.dropdown {
     }
 
     /* Selection for form elements */
-    .ui.inverted.dropdown textarea::-webkit-selection,
-    .ui.inverted.dropdown input::-webkit-selection {
-        background-color: @invertedInputHighlightBackground;
-        color: @invertedInputHighlightColor;
-    }
-    .ui.inverted.dropdown textarea::-moz-selection,
-    .ui.inverted.dropdown input::-moz-selection {
-        background-color: @invertedInputHighlightBackground;
-        color: @invertedInputHighlightColor;
-    }
     .ui.inverted.dropdown textarea::selection,
     .ui.inverted.dropdown input::selection {
         background-color: @invertedInputHighlightBackground;

package/src/definitions/modules/embed.js

@@ -655,7 +655,7 @@
                 return ''
                     + '<iframe src="' + deQuote(src) + '"'
                     + ' width="100%" height="100%"'
-                    + ' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
+                    + ' msallowFullScreen allowFullScreen></iframe>';
             },
             placeholder: function (image, icon) {
                 var

package/src/definitions/modules/embed.less

@@ -68,7 +68,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    background-color: @placeholderBackground;
+    background: @placeholderBackground;
 }
 
 /* --------------

package/src/definitions/modules/flyout.js

@@ -80,8 +80,8 @@
                 elementNamespace,
                 id,
                 observer,
+                observeAttributes = false,
                 currentScroll,
-                transitionEvent,
 
                 module
             ;
@@ -145,8 +145,6 @@
                         });
                     }
 
-                    transitionEvent = module.get.transitionEvent();
-
                     // avoids locking rendering if initialized in onReady
                     if (settings.delaySetup) {
                         requestAnimationFrame(module.setup.layout);
@@ -498,7 +496,7 @@
                             ;
                             mutations.every(function (mutation) {
                                 if (mutation.type === 'attributes') {
-                                    if (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input')) {
+                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').length > 0)) {
                                         shouldRefreshInputs = true;
                                     }
                                 } else {
@@ -549,13 +547,14 @@
                     if (!settings.dimPage) {
                         return;
                     }
-                    $inputs = $module.find('[tabindex], :input:enabled').filter(':visible').filter(function () {
+                    $inputs = $module.find('a[href], [tabindex], :input:enabled').filter(':visible').filter(function () {
                         return $(this).closest('.disabled').length === 0;
                     });
-                    $module.removeAttr('tabindex');
                     if ($inputs.length === 0) {
                         $inputs = $module;
                         $module.attr('tabindex', -1);
+                    } else {
+                        $module.removeAttr('tabindex');
                     }
                     $inputs.first()
                         .on('keydown' + elementNamespace, module.event.inputKeyDown.first)
@@ -652,6 +651,7 @@
                             }
                         }
                         module.set.dimmerStyles();
+                        module.set.observeAttributes(false);
                         module.pushPage(function () {
                             callback.call(element);
                             settings.onVisible.call(element);
@@ -660,6 +660,7 @@
                             }
                             module.save.focus();
                             module.refreshInputs();
+                            requestAnimationFrame(module.set.observeAttributes);
                         });
                         settings.onChange.call(element);
                     } else {
@@ -680,6 +681,7 @@
                     if (module.is.visible() || module.is.animating()) {
                         module.debug('Hiding flyout', callback);
                         module.refreshFlyouts();
+                        module.set.observeAttributes(false);
                         module.pullPage(function () {
                             callback.call(element);
                             if (isFunction(settings.onHidden)) {
@@ -752,13 +754,13 @@
                     };
                     transitionEnd = function (event) {
                         if (event.target === $module[0]) {
-                            $module.off(transitionEvent + elementNamespace, transitionEnd);
+                            $module.off('transitionend' + elementNamespace, transitionEnd);
                             module.remove.animating();
                             callback.call(element);
                         }
                     };
-                    $module.off(transitionEvent + elementNamespace);
-                    $module.on(transitionEvent + elementNamespace, transitionEnd);
+                    $module.off('transitionend' + elementNamespace);
+                    $module.on('transitionend' + elementNamespace, transitionEnd);
                     requestAnimationFrame(animate);
                     if (settings.dimPage && !module.othersVisible()) {
                         requestAnimationFrame(dim);
@@ -793,7 +795,7 @@
                     };
                     transitionEnd = function (event) {
                         if (event.target === $module[0]) {
-                            $module.off(transitionEvent + elementNamespace, transitionEnd);
+                            $module.off('transitionend' + elementNamespace, transitionEnd);
                             module.remove.animating();
                             module.remove.closing();
                             module.remove.overlay();
@@ -807,8 +809,8 @@
                             callback.call(element);
                         }
                     };
-                    $module.off(transitionEvent + elementNamespace);
-                    $module.on(transitionEvent + elementNamespace, transitionEnd);
+                    $module.off('transitionend' + elementNamespace);
+                    $module.on('transitionend' + elementNamespace, transitionEnd);
                     requestAnimationFrame(animate);
                 },
 
@@ -831,6 +833,9 @@
                 },
 
                 set: {
+                    observeAttributes: function (state) {
+                        observeAttributes = state !== false;
+                    },
                     autofocus: function () {
                         var
                             $autofocus = $inputs.filter('[autofocus]'),
@@ -973,23 +978,6 @@
 
                         return className.left;
                     },
-                    transitionEvent: function () {
-                        var
-                            element     = document.createElement('element'),
-                            transitions = {
-                                transition: 'transitionend',
-                                OTransition: 'oTransitionEnd',
-                                MozTransition: 'transitionend',
-                                WebkitTransition: 'webkitTransitionEnd',
-                            },
-                            transition
-                        ;
-                        for (transition in transitions) {
-                            if (element.style[transition] !== undefined) {
-                                return transitions[transition];
-                            }
-                        }
-                    },
                     id: function () {
                         return id;
                     },

package/src/definitions/modules/modal.js

@@ -82,6 +82,7 @@
                 elementEventNamespace,
                 id,
                 observer,
+                observeAttributes = false,
                 module
             ;
             module = {
@@ -265,7 +266,7 @@
                             ;
                             mutations.every(function (mutation) {
                                 if (mutation.type === 'attributes') {
-                                    if (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input')) {
+                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').length > 0)) {
                                         shouldRefreshInputs = true;
                                     }
                                 } else {
@@ -324,10 +325,11 @@
                     $inputs = $module.find('a[href], [tabindex], :input:enabled').filter(':visible').filter(function () {
                         return $(this).closest('.disabled').length === 0;
                     });
-                    $module.removeAttr('tabindex');
                     if ($inputs.length === 0) {
                         $inputs = $module;
                         $module.attr('tabindex', -1);
+                    } else {
+                        $module.removeAttr('tabindex');
                     }
                     $inputs.first()
                         .on('keydown' + elementEventNamespace, module.event.inputKeyDown.first)
@@ -604,8 +606,9 @@
                                     $module.detach().appendTo($dimmer);
                                 }
                             }
-                            if (settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                            if (settings.transition && $.fn.transition !== undefined) {
                                 module.debug('Showing modal with css animations');
+                                module.set.observeAttributes(false);
                                 $module
                                     .transition({
                                         debug: settings.debug,
@@ -623,6 +626,7 @@
                                             module.save.focus();
                                             module.set.active();
                                             module.refreshInputs();
+                                            requestAnimationFrame(module.set.observeAttributes);
                                             callback();
                                         },
                                     })
@@ -652,8 +656,9 @@
 
                     if (module.is.animating() || module.is.active()) {
                         module.debug('Hiding modal');
-                        if (settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
+                        if (settings.transition && $.fn.transition !== undefined) {
                             module.remove.active();
+                            module.set.observeAttributes(false);
                             $module
                                 .transition({
                                     debug: settings.debug,
@@ -673,6 +678,7 @@
                                     },
                                     onComplete: function () {
                                         module.unbind.scrollLock();
+                                        module.remove.active();
                                         if (settings.allowMultiple) {
                                             $previousModal.addClass(className.front);
                                             $module.removeClass(className.front);
@@ -988,9 +994,7 @@
                         return module.cache.isIE;
                     },
                     animating: function () {
-                        return $module.transition('is supported')
-                            ? $module.transition('is animating')
-                            : $module.is(':visible');
+                        return $module.transition('is animating');
                     },
                     scrolling: function () {
                         return $dimmable.hasClass(className.scrolling);
@@ -1033,6 +1037,9 @@
                 },
 
                 set: {
+                    observeAttributes: function (state) {
+                        observeAttributes = state !== false;
+                    },
                     autofocus: function () {
                         var
                             $autofocus = $inputs.filter('[autofocus]'),