fomantic-ui 2.9.3-beta.3 → 2.9.3-beta.30

package/src/definitions/modules/slider.less

@@ -426,4 +426,5 @@
     });
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/sticky.js

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

package/src/definitions/modules/sticky.less

@@ -65,4 +65,5 @@
     position: sticky;
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/tab.js

@@ -786,7 +786,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/tab.less

@@ -82,4 +82,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/toast.js

@@ -702,7 +702,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/toast.less

@@ -139,6 +139,13 @@
                 box-shadow: @floatingShadow;
                 border: @toastBoxBorder;
             }
+            & when (@variationToastInverted) {
+                &.inverted.floating,
+                &.inverted.hoverfloating:hover {
+                    box-shadow: @invertedFloatingShadow;
+                    border: @invertedToastBoxBorder;
+                }
+            }
         }
         & when (@variationToastCompact) {
             &.compact,
@@ -714,4 +721,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/transition.js

@@ -142,7 +142,7 @@
                         ? ($allModules.length - index) * interval
                         : index * interval;
                     module.debug('Delaying animation by', delay);
-                    setTimeout(module.animate, delay);
+                    setTimeout(function () { module.animate(); }, delay);
                 },
 
                 animate: function (overrideSettings) {
@@ -849,7 +849,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/transition.less

@@ -113,4 +113,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/ad.less

@@ -293,4 +293,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/card.less

@@ -1178,4 +1178,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/comment.less

@@ -290,5 +290,13 @@
         }
     }
 }
+& when (@variationCommentDisabled) {
+    .ui.disabled.comments,
+    .ui.comments .disabled.comment {
+        opacity: @disabledOpacity;
+        pointer-events: @disabledPointerEvents;
+    }
+}
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/feed.less

@@ -317,4 +317,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/item.less

@@ -597,5 +597,13 @@
         }
     }
 }
+& when (@variationItemDisabled) {
+    .ui.disabled.items,
+    .ui.items > .disabled.item {
+        opacity: @disabledOpacity;
+        pointer-events: @disabledPointerEvents;
+    }
+}
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/views/statistic.less

@@ -414,4 +414,5 @@
     });
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/overrides.less

@@ -0,0 +1,7 @@
+// ------------------
+//     Overrides
+// -------------------
+
+@import (optional) "@{themesFolder}/default/@{type}s/@{element}.overrides";
+@import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
+@import (optional) "@{siteFolder}/@{type}s/@{element}.overrides";

package/src/theme.less

@@ -6,7 +6,7 @@
        Theme
 ------------------- */
 
-@theme: @@element;
+@theme: if(@@element = "default", "", @@element);
 
 /* --------------------
    Site Variables
@@ -80,10 +80,11 @@
      Overrides
 ------------------- */
 
+// Keep empty mixin in case of custom components using it so they dont break
 .loadUIOverrides() {
-    & when not (@theme = "default") {
-        @import (optional) "@{themesFolder}/default/@{type}s/@{element}.overrides";
-    }
-    @import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
-    @import (optional) "@{siteFolder}/@{type}s/@{element}.overrides";
+    /* loadUIOverrides mixin is deprecated and will be removed in 2.10.0
+       Replace mixin call by
+          @import (multiple, optional) "../../overrides.less";
+       instead
+    */
 }

package/src/themes/amazon/elements/button.variables

@@ -3,7 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @textColor: #111;
 @fontWeight: normal;

package/src/themes/bootstrap3/elements/button.variables

@@ -3,7 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @fontWeight: @normal;
 @textColor: rgba(51, 51, 51, 1);

package/src/themes/chubby/elements/header.variables

@@ -2,7 +2,12 @@
        Header
 -------------------- */
 
-@headerFont: "Source Sans Pro", Helvetica Neue, Helvetica, Arial, sans-serif;
+@headerFont:
+    "Source Sans Pro",
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @fontWeight: bold;
 @textTransform: none;
 

package/src/themes/default/collections/message.variables

@@ -19,9 +19,7 @@
 @borderWidth: 1px;
 @borderShadow: 0 0 0 @borderWidth @strongBorderColor inset;
 @shadowShadow: 0 0 0 0 rgba(0, 0, 0, 0);
-@boxShadow:
-    @borderShadow,
-    @shadowShadow;
+@boxShadow: @borderShadow, @shadowShadow;
 
 @transition:
     opacity @defaultDuration @defaultEasing,
@@ -71,14 +69,10 @@
 @attachedXOffset: -1px;
 @attachedYOffset: -1px;
 @attachedBoxShadow: 0 0 0 @borderWidth @borderColor inset;
-@attachedBottomBoxShadow:
-    @attachedBoxShadow,
-    @subtleShadow;
+@attachedBottomBoxShadow: @attachedBoxShadow, @subtleShadow;
 
 /* Floating */
-@floatingBoxShadow:
-    @borderShadow,
-    @floatingShadow;
+@floatingBoxShadow: @borderShadow, @floatingShadow;
 
 /* Colors */
 @redBoxShadow:

package/src/themes/default/collections/table.variables

@@ -294,3 +294,6 @@
 @small: 0.9em;
 @medium: 1em;
 @large: 1.1em;
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -38,9 +38,7 @@
 @borderBoxShadowColor: transparent;
 @borderBoxShadowWidth: 1px;
 @borderBoxShadow: 0 0 0 @borderBoxShadowWidth @borderBoxShadowColor inset;
-@boxShadow:
-    @borderBoxShadow,
-    @shadowBoxShadow;
+@boxShadow: @borderBoxShadow, @shadowBoxShadow;
 
 /* Icon */
 @iconHeight: auto;

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

@@ -60,3 +60,6 @@
 @textFontFamily: @pageFont;
 @textLineHeight: 1.5;
 @textSize: @large;
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -396,7 +396,7 @@
     @1f1e8-1f1ff: {
         countrycode: cz;
         class: czechia;
-        aliasClass: false;
+        aliasClass: czech_republic;
         aliasClass2: false;
     };
     @1f1e9-1f1f0: {

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

@@ -139,11 +139,14 @@
 
 @ribbonMargin: 1rem;
 @ribbonOffset: e(%("calc(%d - %d)", -@ribbonMargin, @ribbonTriangleSize));
+@ribbonCenterSize: 1em;
+@ribbonCenterOffset: e(%("calc(50% - %d)", @ribbonCenterSize));
 @basicRibbonOffset: e(%("calc(%d - %d)", @verticalPadding, @basicBorderWidth));
 @ribbonDistance: e(%("calc(%d + %d)", @ribbonMargin, @ribbonTriangleSize));
 @rightRibbonOffset: e(%("calc(100%% + %d + %d)", @ribbonMargin, @ribbonTriangleSize));
 
 @ribbonImageTopDistance: 1rem;
+@ribbonImageBottomDistance: @ribbonImageTopDistance;
 @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: e(%("calc(%d - %d)", -@ribbonImageMargin, @ribbonTriangleSize));
 @rightRibbonImageOffset: e(%("calc(100%% + %d + %d)", @ribbonImageMargin, @ribbonTriangleSize));
@@ -152,6 +155,8 @@
 @ribbonTableOffset: e(%("calc(%d - %d)", -@ribbonTableMargin, @ribbonTriangleSize));
 @rightRibbonTableOffset: e(%("calc(100%% + %d + %d)", @ribbonTableMargin, @ribbonTriangleSize));
 
+@ribbonZIndex: 1;
+
 /* Inverted */
 @invertedBackgroundColor: darken(@backgroundColor, 20);
 @invertedBackground: @black;

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

@@ -63,6 +63,7 @@
 @piledBoxShadow: "";
 @piledDegrees: 1.2deg;
 @piledBorder: @border;
+@invertedPiledBorder: @borderWidth solid @solidWhiteBorderColor;
 
 /* Circular */
 @circularPadding: 2em;
@@ -72,6 +73,8 @@
 @stackedPageBackground: @subtleTransparentBlack;
 @stackedPadding: @verticalPadding + (0.4em);
 @tallStackedPadding: @verticalPadding + (0.8em);
+@stackedBorderColor: @borderColor;
+@invertedStackedBorderColor: rgba(225, 225, 225, 0.5);
 
 /*******************************
             States
@@ -85,6 +88,7 @@
 /* Loading Spinner */
 @loaderSize: 3em;
 @loaderLineZIndex: 101;
+@loadingMinHeight: @loaderSize * 1.5;
 
 /*******************************
             Variations
@@ -92,6 +96,7 @@
 
 /* Raised */
 @raisedBoxShadow: @floatingShadow;
+@invertedRaisedBoxShadow: @invertedFloatingShadow;
 
 /* Padded */
 @paddedSegmentPadding: 1.5em;
@@ -147,3 +152,6 @@
         rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
     );
 @tertiaryInvertedColor: @invertedMutedTextColor;
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -14,7 +14,23 @@
 @fontFileNameSupplement: "Lato";
 
 // based on https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L577 list
-@fallbackFonts: system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+@fallbackFonts:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    "Liberation Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
 
 @headerFont: @fontName, @fallbackFonts;
 @pageFont: @fontName, @fallbackFonts;
@@ -653,6 +669,9 @@
 @floatingShadow:
     0 2px 4px 0 rgba(34, 36, 38, 0.12),
     0 2px 10px 0 rgba(34, 36, 38, 0.15);
+@invertedFloatingShadow:
+    0 2px 4px 0 rgba(225, 225, 225, 0.1),
+    0 2px 10px 0 rgba(225, 225, 225, 0.5);
 
 /*******************************
            Power-User

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

@@ -51,6 +51,7 @@
 @variationContainerFluid: true;
 @variationContainerAligned: true;
 @variationContainerJustified: true;
+@variationContainerResizable: true;
 @variationContainerScrolling: true;
 @variationContainerScrollingShort: true;
 @variationContainerScrollingVeryShort: true;
@@ -127,7 +128,7 @@
 @variationInputDisabled: true;
 @variationInputInverted: true;
 @variationInputStates: @variationAllStates;
-@variationInputInvalid: true;
+@variationInputInvalid: false;
 @variationInputTransparent: true;
 @variationInputCorner: true;
 @variationInputLoading: true;
@@ -235,6 +236,7 @@
 @variationSegmentAttached: true;
 @variationSegmentSeamless: true;
 @variationSegmentFitted: true;
+@variationSegmentResizable: true;
 @variationSegmentScrolling: true;
 @variationSegmentScrollingShort: true;
 @variationSegmentScrollingVeryShort: true;
@@ -372,6 +374,7 @@
 @variationTableMarked: true;
 @variationTableEqualWidth: true;
 @variationTableWide: true;
+@variationTableResizable: true;
 @variationTableScrolling: true;
 @variationTableScrollingShort: true;
 @variationTableScrollingVeryShort: true;
@@ -436,6 +439,7 @@
 
 /* Comment */
 @variationCommentInverted: true;
+@variationCommentDisabled: true;
 @variationCommentThreaded: true;
 @variationCommentMinimal: true;
 @variationCommentAvatar: true;
@@ -458,6 +462,7 @@
 
 /* Item */
 @variationItemInverted: true;
+@variationItemDisabled: true;
 @variationItemImage: true;
 @variationItemHeader: true;
 @variationItemDescription: true;
@@ -546,6 +551,7 @@
 @variationDropdownLeft: true;
 @variationDropdownUpward: true;
 @variationDropdownSimple: true;
+@variationDropdownResizable: true;
 @variationDropdownScrolling: true;
 @variationDropdownFluid: true;
 @variationDropdownFloating: true;
@@ -581,6 +587,7 @@
 @variationModalFullscreen: true;
 @variationModalOverlay: true;
 @variationModalAligned: true;
+@variationModalResizable: true;
 @variationModalScrolling: true;
 @variationModalLegacy: true;
 @variationModalCloseInside: true;
@@ -646,6 +653,7 @@
 @variationSearchDisabled: true;
 @variationSearchSelection: true;
 @variationSearchCategory: true;
+@variationSearchHorizontalCategory: true;
 @variationSearchLoading: true;
 @variationSearchAligned: true;
 @variationSearchFluid: true;
@@ -653,6 +661,7 @@
 @variationSearchVeryShort: true;
 @variationSearchLong: true;
 @variationSearchVeryLong: true;
+@variationSearchResizable: true;
 @variationSearchScrolling: true;
 @variationSearchSizes: @variationAllSizes;
 

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

@@ -21,6 +21,7 @@
 @dropdownIconSize: @relative12px;
 @dropdownIconMargin: 0 0 0 1em;
 @dropdownIconMinWidth: 1em;
+@dropdownIconMultipleRight: -1.5em;
 
 /* Current Text */
 @textTransition: none;
@@ -260,6 +261,8 @@
 @multipleSelectionChildLineHeight: @relative17px;
 @multipleSelectionSearchStartWidth: (@glyphWidth * 2);
 
+@multipleSearchMinWidth: 5.05em;
+
 /* Dropdown Icon */
 @multipleSelectionDropdownIconMargin: "";
 @multipleSelectionDropdownIconPadding: "";
@@ -471,3 +474,6 @@
 /* Scrollhint */
 @invertedScrollhintStartColor: rgba(255, 255, 255, 0.75);
 @invertedScrollhintEndColor: rgba(255, 255, 255, 0);
+
+/* Resizable */
+@resizableDirection: vertical;

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);
@@ -260,3 +261,6 @@
     1px -1px 2px rgba(255, 255, 255, 0.3),
     -1px 2px 2px rgba(255, 255, 255, 0.3),
     1px 2px 2px rgba(255, 255, 255, 0.3);
+
+/* Resizable */
+@resizableDirection: vertical;

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;

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

@@ -174,3 +174,6 @@
 @bigSearchSize: @relativeBig;
 @hugeSearchSize: @relativeHuge;
 @massiveSearchSize: @relativeMassive;
+
+/* Resizable */
+@resizableDirection: vertical;

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

@@ -36,6 +36,7 @@
 @toastInvertedColor: @black;
 
 @toastBoxBorder: 1px solid rgba(34, 36, 38, 0.12);
+@invertedToastBoxBorder: 1px solid rgba(225, 225, 225, 0.5);
 
 /* Icon */
 @toastIconContentPadding: 3em;

package/src/themes/default/views/card.variables

@@ -21,9 +21,7 @@
 @width: 290px;
 @borderWidth: 1px;
 @borderShadow: 0 0 0 @borderWidth @solidBorderColor;
-@boxShadow:
-    @shadowBoxShadow,
-    @borderShadow;
+@boxShadow: @shadowBoxShadow, @borderShadow;
 @border: none;
 @zIndex: "";
 @transition:
@@ -164,9 +162,7 @@
 @linkHoverTransform: translateY(-@linkHoverRaiseDistance);
 
 @shadowHoverBoxShadow: 0 @shadowDistance @linkHoverRaiseDistance 0 @solidSelectedBorderColor;
-@linkHoverBoxShadow:
-    @shadowHoverBoxShadow,
-    @borderShadow;
+@linkHoverBoxShadow: @shadowHoverBoxShadow, @borderShadow;
 
 /* Horizontal */
 @horizontalMinWidth: 270px;
@@ -174,12 +170,8 @@
 @horizontalImageWidth: 150px;
 
 /* Raised */
-@raisedShadow:
-    @borderShadow,
-    @floatingShadow;
-@raisedShadowHover:
-    @borderShadow,
-    @floatingShadowHover;
+@raisedShadow: @borderShadow, @floatingShadow;
+@raisedShadowHover: @borderShadow, @floatingShadowHover;
 
 /* Basic Raised */
 @basicRaisedShadow: @floatingShadow;

package/src/themes/github/elements/button.variables

@@ -3,7 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textTransform: none;
 @fontWeight: bold;
 @textColor: #333;

package/src/themes/twitter/elements/button.variables

@@ -2,7 +2,11 @@
    Global Variables
 -------------------- */
 
-@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
 @textColor: #66757f;
 @blue: #55acee;
 

package/tasks/admin/distributions/create.js

@@ -3,7 +3,7 @@
 *******************************/
 
 /*
- This will create individual distribution repositories for each SUI distribution
+ This will create individual distribution repositories for each FUI distribution
 
   * copy distribution files to release
   * update package.json file
@@ -153,6 +153,8 @@ module.exports = function (callback) {
                 tasks.push(function () {
                     let
                         definitions,
+                        overridesImport,
+                        lessImport,
                         themeImport,
                         themeConfig,
                         siteTheme,
@@ -161,7 +163,10 @@ module.exports = function (callback) {
                     definitions = gulp.src('src/definitions/**/*', { base: 'src/' })
                         .pipe(gulp.dest(outputDirectory))
                     ;
-                    themeImport = gulp.src('src/semantic.less', { base: 'src/' })
+                    overridesImport = gulp.src('src/overrides.less', { base: 'src/' })
+                        .pipe(gulp.dest(outputDirectory))
+                    ;
+                    lessImport = gulp.src('src/semantic.less', { base: 'src/' })
                         .pipe(gulp.dest(outputDirectory))
                     ;
                     themeImport = gulp.src('src/theme.less', { base: 'src/' })
@@ -177,7 +182,7 @@ module.exports = function (callback) {
                         .pipe(gulp.dest(outputDirectory))
                     ;
 
-                    return mergeStream(definitions, themeImport, themeConfig, siteTheme, themes);
+                    return mergeStream(definitions, overridesImport, lessImport, themeImport, themeConfig, siteTheme, themes);
                 });
             }