fomantic-ui 2.9.3-beta.5 → 2.9.3-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.3-beta.5+b6b51ca",
+  "version": "2.9.3-beta.7+81f7c2c",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/behaviors/form.js

@@ -643,7 +643,7 @@
                         var $field = typeof identifier === 'string'
                                 ? module.get.field(identifier)
                                 : identifier,
-                            $label = $field.closest(selector.group).find('label').eq(0)
+                            $label = $field.closest(selector.group).find('label:not(:empty)').eq(0)
                         ;
 
                         return $label.length === 1

package/src/definitions/collections/form.less

@@ -527,6 +527,11 @@
             color: @c;
         }
 
+        // needs separate selector because not supported by every browser
+        .ui.form .fields:has(.@{state}) > label {
+            color: @c;
+        }
+
         .ui.form .fields.@{state} .field .ui.label,
         .ui.form .field.@{state} .ui.label {
             background-color: @lbg;
@@ -729,6 +734,11 @@
             .ui.inverted.form .@{state}.field label {
                 color: @lbg;
             }
+
+            // needs separate selector because not supported by every browser
+            .ui.inverted.form .fields:has(.@{state}) > label {
+                color: @lbg;
+            }
         }
     });
 }
@@ -804,10 +814,11 @@
          Required Field
     --------------------- */
 
-    .ui.form .required.fields:not(.grouped) > .field > label::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
-    .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after,
     .ui.form label.required::after {
         margin: @requiredMargin;
@@ -815,7 +826,8 @@
         color: @requiredColor;
     }
 
-    .ui.form .required.fields:not(.grouped) > .field > label::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
     .ui.form label.required::after {
@@ -823,7 +835,7 @@
         vertical-align: top;
     }
 
-    .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after {
         position: absolute;
         top: 0;
@@ -831,6 +843,12 @@
     }
 }
 
+.ui.ui.ui.ui.form .fields > label:empty::after,
+.ui.ui.ui.ui.form .field > label:empty::after {
+    content: " ";
+    display: inline-block;
+}
+
 /*******************************
            Variations
 *******************************/

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 */

package/src/definitions/modules/popup.less

@@ -86,7 +86,6 @@
         width: @arrowSize;
         height: @arrowSize;
         background: @tooltipArrowBackground;
-        transform: rotate(45deg);
         z-index: @arrowZIndex;
         box-shadow: @tooltipArrowBoxShadow;
     }
@@ -114,23 +113,6 @@
         z-index: @tooltipZIndex;
     }
 
-    /* Default Position (Top Center) */
-    [data-tooltip]:not([data-position])::before {
-        top: auto;
-        right: auto;
-        bottom: 100%;
-        left: 50%;
-        background: @tooltipArrowBottomBackground;
-        margin-left: @tooltipArrowHorizontalOffset;
-        margin-bottom: -@tooltipArrowVerticalOffset;
-    }
-    [data-tooltip]:not([data-position])::after {
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 100%;
-        margin-bottom: @tooltipDistanceAway;
-    }
-
     /* Animation */
     [data-tooltip]::before,
     [data-tooltip]::after {
@@ -141,8 +123,16 @@
             transform @tooltipDuration @tooltipEasing,
             opacity @tooltipDuration @tooltipEasing;
     }
+    [data-tooltip]::after,
+    [data-tooltip]:hover::before {
+        transition-delay: @tooltipDelay;
+    }
+    [data-tooltip]::before,
+    [data-tooltip]:hover::after {
+        transition-delay: 0s;
+    }
     [data-tooltip]::before {
-        transform: rotate(45deg) scale(0) !important;
+        transform: rotate(45deg) scale(@tooltipScaleInit);
         transform-origin: center top;
     }
     [data-tooltip]::after {
@@ -155,26 +145,27 @@
         opacity: 1;
     }
     [data-tooltip]:hover::before {
-        transform: rotate(45deg) scale(1) !important;
+        transform: rotate(45deg) scale(1);
     }
 
     /* Animation Position */
-    [data-tooltip]::after,
+    [data-tooltip]:not([data-position])::after,
     [data-tooltip][data-position="top center"]::after,
     [data-tooltip][data-position="bottom center"]::after {
-        transform: translateX(-50%) scale(0) !important;
+        transform: translateX(-50%) scale(@tooltipScaleInit);
     }
-    [data-tooltip]:hover::after,
+    [data-tooltip]:not([data-position]):hover::after,
+    [data-tooltip][data-position="top center"]:hover::after,
     [data-tooltip][data-position="bottom center"]:hover::after {
-        transform: translateX(-50%) scale(1) !important;
+        transform: translateX(-50%) scale(1);
     }
     [data-tooltip][data-position="left center"]::after,
     [data-tooltip][data-position="right center"]::after {
-        transform: translateY(-50%) scale(0) !important;
+        transform: translateY(-50%) scale(@tooltipScaleInit);
     }
     [data-tooltip][data-position="left center"]:hover::after,
     [data-tooltip][data-position="right center"]:hover::after {
-        transform: translateY(-50%) scale(1) !important;
+        transform: translateY(-50%) scale(1);
         // https://github.com/fomantic/Fomantic-UI/pull/1537
         // stylelint-disable-next-line property-no-vendor-prefix
         -moz-transform: translateY(-50%) scale(1.0001) !important;
@@ -183,13 +174,13 @@
     [data-tooltip][data-position="top right"]::after,
     [data-tooltip][data-position="bottom left"]::after,
     [data-tooltip][data-position="bottom right"]::after {
-        transform: scale(0) !important;
+        transform: scale(@tooltipScaleInit);
     }
     [data-tooltip][data-position="top left"]:hover::after,
     [data-tooltip][data-position="top right"]:hover::after,
     [data-tooltip][data-position="bottom left"]:hover::after,
     [data-tooltip][data-position="bottom right"]:hover::after {
-        transform: scale(1) !important;
+        transform: scale(1);
     }
     & when (@variationPopupFixed) {
         [data-tooltip][data-variation~="fixed"]::after {
@@ -215,11 +206,11 @@
 
         /* Arrow */
         [data-tooltip][data-inverted]::before {
-            box-shadow: none !important;
+            box-shadow: none;
         }
 
         /* Arrow Position */
-        [data-tooltip][data-inverted]::before {
+        [data-tooltip]:not([data-position])[data-inverted]::before {
             background: @invertedArrowBottomBackground;
         }
 
@@ -241,15 +232,16 @@
                 background: @arrowBottomBackground;
             }
             & when (@variationPopupCenter) {
-                /* Top Center */
+                /* Top Center (default) */
+                [data-tooltip]:not([data-position])::after,
                 [data-position="top center"][data-tooltip]::after {
                     top: auto;
                     right: auto;
                     left: 50%;
                     bottom: 100%;
-                    transform: translateX(-50%);
                     margin-bottom: @tooltipDistanceAway;
                 }
+                [data-tooltip]:not([data-position])::before,
                 [data-position="top center"][data-tooltip]::before {
                     top: auto;
                     right: auto;
@@ -310,7 +302,6 @@
                     right: auto;
                     left: 50%;
                     top: 100%;
-                    transform: translateX(-50%);
                     margin-top: @tooltipDistanceAway;
                 }
                 [data-position="bottom center"][data-tooltip]::before {
@@ -362,7 +353,6 @@
                     right: 100%;
                     top: 50%;
                     margin-right: @tooltipDistanceAway;
-                    transform: translateY(-50%);
                 }
                 [data-position="left center"][data-tooltip]::before {
                     right: 100%;
@@ -379,7 +369,6 @@
                     left: 100%;
                     top: 50%;
                     margin-left: @tooltipDistanceAway;
-                    transform: translateY(-50%);
                 }
                 [data-position="right center"][data-tooltip]::before {
                     left: 100%;
@@ -454,6 +443,19 @@
         }
     }
 
+    [data-position="top left"][data-tooltip]::after {
+        transform-origin: bottom left;
+    }
+    [data-position="top right"][data-tooltip]::after {
+        transform-origin: bottom right;
+    }
+    [data-position="bottom left"][data-tooltip]::after {
+        transform-origin: top left;
+    }
+    [data-position="bottom right"][data-tooltip]::after {
+        transform-origin: top right;
+    }
+
     & when (@variationPopupBasic) {
         /* --------------
             Basic
@@ -822,7 +824,7 @@
     }
     .ui.inverted.popup::before {
         background-color: @invertedArrowColor;
-        box-shadow: none !important;
+        box-shadow: none;
     }
 }
 

package/src/definitions/modules/slider.js

@@ -103,9 +103,7 @@
                     module.setup.layout();
                     module.setup.labels();
 
-                    if (!module.is.disabled()) {
-                        module.bind.events();
-                    }
+                    module.bind.events();
 
                     module.read.metadata();
                     module.read.settings();
@@ -401,6 +399,9 @@
                         }
                     },
                     keydown: function (event, first) {
+                        if (module.is.disabled()) {
+                            return;
+                        }
                         if (settings.preventCrossover && module.is.range() && module.thumbVal === module.secondThumbVal) {
                             $currThumb = undefined;
                         }
@@ -437,7 +438,7 @@
                         }
                     },
                     activateFocus: function (event) {
-                        if (!module.is.focused() && module.is.hover() && module.determine.keyMovement(event) !== NO_STEP) {
+                        if (!module.is.disabled() && !module.is.focused() && module.is.hover() && module.determine.keyMovement(event) !== NO_STEP) {
                             event.preventDefault();
                             module.event.keydown(event, true);
                             $module.trigger('focus');

package/src/themes/default/modules/modal.variables

@@ -133,6 +133,7 @@
 /* Scrolling Margin */
 @scrollingMargin: 2rem;
 @mobileScrollingMargin: @mobileTopAlignedMargin;
+@scrollingTop: 1em;
 
 /* Scrolling Content */
 @scrollingContentMaxHeight: calc(80vh - 10rem);

package/src/themes/default/modules/popup.variables

@@ -79,8 +79,10 @@
 @tooltipLineHeight: @lineHeight;
 @tooltipDistanceAway: @relative7px;
 @tooltipZIndex: 1900;
-@tooltipDuration: @defaultDuration;
+@tooltipDuration: 0.2s;
 @tooltipEasing: @defaultEasing;
+@tooltipDelay: 0.04s;
+@tooltipScaleInit: 0.8;
 
 /* Inverted */
 @tooltipInvertedBackground: @invertedBackground;