fomantic-ui 2.9.4-beta.98 → 2.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.4-beta.98+94c52bd",
+  "version": "2.9.4",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",
@@ -44,7 +44,7 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-clone": "^2.0.1",
     "gulp-concat": "^2.6.1",
-    "@fomantic/gulp-concat-css": "^3.2.1",
+    "@fomantic/gulp-concat-css": "^3.3.0",
     "@fomantic/gulp-concat-filenames": "^1.2.1",
     "@fomantic/gulp-dedupe": "^0.0.3",
     "gulp-flatten": "^0.4.0",
@@ -92,4 +92,4 @@
   },
   "title": "Fomantic UI",
   "style": "dist/semantic.css"
-}
+}

package/src/definitions/collections/form.less

@@ -640,6 +640,11 @@
             box-shadow: @formStates[@@state][inputFocusBoxShadow];
         }
 
+        .ui.form .field.@{state} > textarea:hover:not(:focus),
+        .ui.form .field.@{state} > input:hover:not(:focus) {
+            border-color: @formStates[@@state][inputHoverBorderColor];
+        }
+
         /* Preserve Native Select Stylings */
         .ui.form .field.@{state} select {
             -webkit-appearance: menulist-button;

package/src/definitions/elements/divider.less

@@ -50,8 +50,8 @@
 --------------- */
 
 /* Allow divider between each column row */
-.ui.grid > .column + .divider,
-.ui.grid > .row > .column + .divider {
+.ui.grid > .column + .divider@{notVertical},
+.ui.grid > .row > .column + .divider@{notVertical} {
     left: auto;
 }
 
@@ -126,45 +126,55 @@
         bottom: 0;
     }
 
-    /* Inside grid */
-    @media only screen and (max-width: @largestMobileScreen) {
+    & when (@variationGridStackable) {
+        /* Inside grid */
         .ui.stackable.grid .ui.vertical.divider,
         .ui.grid .stackable.row .ui.vertical.divider {
-            display: table;
-            white-space: nowrap;
-            height: auto;
-            margin: @horizontalMargin;
-            overflow: hidden;
-            line-height: 1;
-            text-align: center;
-            position: static;
-            top: 0;
-            left: 0;
-            transform: none;
+            flex: 1;
         }
-
-        .ui.stackable.grid .ui.vertical.divider::before,
-        .ui.grid .stackable.row .ui.vertical.divider::before,
-        .ui.stackable.grid .ui.vertical.divider::after,
-        .ui.grid .stackable.row .ui.vertical.divider::after {
-            left: 0;
-            border-left: none;
-            border-right: none;
-            content: "";
-            display: table-cell;
-            position: relative;
-            top: 50%;
-            width: 50%;
-            background-repeat: no-repeat;
-        }
-
-        .ui.stackable.grid .ui.vertical.divider::before,
-        .ui.grid .stackable.row .ui.vertical.divider::before {
-            background-position: right @horizontalDividerMargin top 50%;
-        }
-        .ui.stackable.grid .ui.vertical.divider::after,
-        .ui.grid .stackable.row .ui.vertical.divider::after {
-            background-position: left @horizontalDividerMargin top 50%;
+        @media only screen and (max-width: @largestMobileScreen) {
+            .ui.stackable.grid .column + .ui.vertical.divider,
+            .ui.grid .stackable.row .column + .ui.vertical.divider {
+                margin: @verticalDividerMargin;
+            }
+            .ui.stackable.grid .ui.vertical.divider,
+            .ui.grid .stackable.row .ui.vertical.divider {
+                display: table;
+                white-space: nowrap;
+                height: auto;
+                margin: @horizontalMargin;
+                overflow: hidden;
+                line-height: 1;
+                text-align: center;
+                position: static;
+                top: 0;
+                left: 0;
+                transform: none;
+            }
+
+            .ui.stackable.grid .ui.vertical.divider::before,
+            .ui.grid .stackable.row .ui.vertical.divider::before,
+            .ui.stackable.grid .ui.vertical.divider::after,
+            .ui.grid .stackable.row .ui.vertical.divider::after {
+                left: 0;
+                border-left: none;
+                border-right: none;
+                content: "";
+                display: table-cell;
+                position: relative;
+                top: 50%;
+                width: 50%;
+                background-repeat: no-repeat;
+            }
+
+            .ui.stackable.grid .ui.vertical.divider::before,
+            .ui.grid .stackable.row .ui.vertical.divider::before {
+                background-position: right @horizontalDividerMargin top 50%;
+            }
+            .ui.stackable.grid .ui.vertical.divider::after,
+            .ui.grid .stackable.row .ui.vertical.divider::after {
+                background-position: left @horizontalDividerMargin top 50%;
+            }
         }
     }
 }

package/src/definitions/elements/input.less

@@ -113,6 +113,13 @@
     box-shadow: @downBoxShadow;
 }
 
+.ui.form .field > textarea:hover:not(:focus),
+.ui.input > textarea:hover:not(:focus),
+.ui.form .field > input:hover:not(:focus),
+.ui.input > input:hover:not(:focus) {
+    border-color: @selectedBorderColor;
+}
+
 & when (@variationInputLoading) {
     /* --------------------
            Loading

package/src/definitions/elements/step.less

@@ -204,10 +204,6 @@
                     left: @circularStepIconDistance;
                 }
 
-                &.link::before,
-                &.link::after {
-                    cursor: pointer;
-                }
                 &.completed {
                     background: @circularStepCompletedBackground;
                 }
@@ -236,6 +232,15 @@
                     }
                 }
             }
+
+            & a.step::before,
+            & a.step::after,
+            & a.step .content,
+            & .step.link .content,
+            & .step.link::before,
+            & .step.link::after {
+                cursor: pointer;
+            }
         }
 
         & .step {
@@ -590,6 +595,7 @@
         .ui.circular.steps .disabled.step {
             cursor: auto;
             opacity: @circularStepDisabledItemOpacity;
+            pointer-events: none;
 
             &::before,
             &::after {

package/src/definitions/modules/dropdown.js

@@ -1620,7 +1620,7 @@
                                     module.verbose('Selecting item from keyboard shortcut', $selectedItem);
                                     module.event.item.click.call($selectedItem, event);
                                 }
-                                if (module.is.searchSelection()) {
+                                if (module.is.searchSelection() && !settings.keepSearchTerm) {
                                     module.remove.searchTerm();
                                 }
                                 if (module.is.multiple()) {

package/src/definitions/modules/dropdown.less

@@ -27,6 +27,7 @@
 @notButton: if(@variationDropdownButton, e(":not(.button)"));
 @notSimple: if(@variationDropdownSimple, e(":not(.simple)"));
 @notUpward: if(@variationDropdownUpward, e(":not(.upward)"));
+@notInverted: if(@variationDropdownInverted, e(":not(.inverted)"));
 
 @notTransparent: if(@variationInputTransparent, e(":not(.transparent)"));
 @notVertical: if(@variationMenuVertical, e(":not(.vertical)"));
@@ -466,7 +467,7 @@ select.ui.dropdown {
         box-shadow: @selectionMenuBoxShadow;
         transition: @selectionMenuTransition;
     }
-    .ui.selection.dropdown@{notPointing}@{notFloating} .menu {
+    .ui.selection.dropdown@{notPointing}@{notFloating} > .menu {
         border-top-width: 0;
         border-radius: @selectionMenuBorderRadius;
     }
@@ -623,6 +624,18 @@ select.ui.dropdown {
         border-color: @selectionFocusBorderColor;
         box-shadow: @selectionFocusMenuBoxShadow;
     }
+    @supports selector(:has(.f)) {
+        .ui.ui.selection.dropdown@{notInverted}:has(> input:focus) {
+            border-color: @selectionFocusBorderColor;
+            box-shadow: none;
+            & > i.icon {
+                opacity: @selectionIconFocusOpacity;
+            }
+        }
+    }
+    .ui.ui.selection.dropdown:focus > i.icon {
+        opacity: @selectionIconFocusOpacity;
+    }
 
     /* Visible */
     .ui.selection.visible.dropdown > .text:not(.default) {
@@ -1313,7 +1326,7 @@ select.ui.dropdown {
 
     & when (@variationDropdownSelection) {
         /* Selection */
-        .ui.ui.upward.selection.dropdown@{notPointing}@{notFloating} .menu {
+        .ui.ui.upward.selection.dropdown@{notPointing}@{notFloating} > .menu {
             border-top-width: @menuBorderWidth;
             border-bottom-width: 0;
             box-shadow: @upwardSelectionMenuBoxShadow;

package/src/definitions/modules/slider.js

@@ -493,7 +493,7 @@
                     resize: function (_event) {
                         // To avoid a useless performance cost, we only call the label refresh when its necessary
                         if (gapRatio !== module.get.gapRatio()) {
-                            module.setup.labels();
+                            module.resync();
                             gapRatio = module.get.gapRatio();
                         }
                     },
@@ -507,11 +507,11 @@
 
                 resync: function () {
                     module.verbose('Resyncing thumb position based on value');
+                    module.setup.labels();
                     if (module.is.range()) {
                         module.update.position(module.secondThumbVal, $secondThumb);
                     }
                     module.update.position(module.thumbVal, $thumb);
-                    module.setup.labels();
                 },
                 takeStep: function (multiplier) {
                     if (!multiplier) {

package/src/themes/default/elements/flag.variables

@@ -5,7 +5,7 @@
 /* --------------
     Path
 --------------- */
-@flagPath: "https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/";
+@flagPath: "https://cdn.jsdelivr.net/gh/jdecked/twemoji@latest/assets/svg/";
 @flagFileType: "svg";
 
 /* -------------------

package/src/themes/default/globals/colors.less

@@ -510,6 +510,7 @@
         inputFocusBackground: @inputErrorFocusBackground;
         inputFocusColor: @inputErrorFocusColor;
         inputFocusBorderColor: @inputErrorFocusBorder;
+        inputHoverBorderColor: @inputErrorHoverBorder;
         inputFocusBoxShadow: @inputErrorFocusBoxShadow;
         inputPlaceholderColor: @inputErrorPlaceholderColor;
         inputPlaceholderFocusColor: @inputErrorPlaceholderFocusColor;
@@ -538,6 +539,7 @@
         inputFocusBackground: @inputInfoFocusBackground;
         inputFocusColor: @inputInfoFocusColor;
         inputFocusBorderColor: @inputInfoFocusBorder;
+        inputHoverBorderColor: @inputInfoHoverBorder;
         inputFocusBoxShadow: @inputInfoFocusBoxShadow;
         inputPlaceholderColor: @inputInfoPlaceholderColor;
         inputPlaceholderFocusColor: @inputInfoPlaceholderFocusColor;
@@ -566,6 +568,7 @@
         inputFocusBackground: @inputSuccessFocusBackground;
         inputFocusColor: @inputSuccessFocusColor;
         inputFocusBorderColor: @inputSuccessFocusBorder;
+        inputHoverBorderColor: @inputSuccessHoverBorder;
         inputFocusBoxShadow: @inputSuccessFocusBoxShadow;
         inputPlaceholderColor: @inputSuccessPlaceholderColor;
         inputPlaceholderFocusColor: @inputSuccessPlaceholderFocusColor;
@@ -594,6 +597,7 @@
         inputFocusBackground: @inputWarningFocusBackground;
         inputFocusColor: @inputWarningFocusColor;
         inputFocusBorderColor: @inputWarningFocusBorder;
+        inputHoverBorderColor: @inputWarningHoverBorder;
         inputFocusBoxShadow: @inputWarningFocusBoxShadow;
         inputPlaceholderColor: @inputWarningPlaceholderColor;
         inputPlaceholderFocusColor: @inputWarningPlaceholderFocusColor;

package/src/themes/default/globals/site.variables

@@ -1510,21 +1510,25 @@
 @inputErrorFocusColor: @negativeTextColor;
 @inputErrorFocusBorder: @negativeBorderColor;
 @inputErrorFocusBoxShadow: none;
+@inputErrorHoverBorder: @negativeBorderColor;
 
 @inputInfoFocusBackground: @infoBackgroundColor;
 @inputInfoFocusColor: @infoTextColor;
 @inputInfoFocusBorder: @infoBorderColor;
 @inputInfoFocusBoxShadow: none;
+@inputInfoHoverBorder: @infoBorderColor;
 
 @inputSuccessFocusBackground: @positiveBackgroundColor;
 @inputSuccessFocusColor: @positiveTextColor;
 @inputSuccessFocusBorder: @positiveBorderColor;
 @inputSuccessFocusBoxShadow: none;
+@inputSuccessHoverBorder: @positiveBorderColor;
 
 @inputWarningFocusBackground: @warningBackgroundColor;
 @inputWarningFocusColor: @warningTextColor;
 @inputWarningFocusBorder: @warningBorderColor;
 @inputWarningFocusBoxShadow: none;
+@inputWarningHoverBorder: @warningBorderColor;
 
 /* Placeholder state */
 @inputErrorPlaceholderColor: if(iscolor(@formErrorColor), lighten(@formErrorColor, 40), @formErrorColor);

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

@@ -162,7 +162,7 @@
 @selectionBorder: 1px solid @selectionBorderColor;
 @selectionBorderRadius: @borderRadius;
 
-@selectionIconOpacity: 0.8;
+@selectionIconOpacity: 0.5;
 @selectionIconZIndex: 3;
 @selectionIconHitbox: @selectionVerticalPadding;
 @selectionIconMargin: -@selectionIconHitbox;
@@ -219,6 +219,8 @@
 @selectionVisibleConnectingBorder: 0;
 @selectionVisibleIconOpacity: "";
 
+@selectionIconFocusOpacity: 1;
+
 /* --------------
      Search
 -------------- */
@@ -315,7 +317,7 @@
 @selectedColor: @selectedTextColor;
 
 /* Clearable */
-@clearableIconOpacity: 0.6;
+@clearableIconOpacity: 0.5;
 @clearableIconActiveOpacity: 1;
 @clearableTextMargin: 1.5em;
 @clearableIconMargin: 1.5em;