fomantic-ui 2.9.3-beta.2 → 2.9.3-beta.21

package/src/definitions/views/comment.less

@@ -291,4 +291,5 @@
     }
 }
 
-.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

@@ -598,4 +598,5 @@
     }
 }
 
-.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;
@@ -546,6 +549,7 @@
 @variationDropdownLeft: true;
 @variationDropdownUpward: true;
 @variationDropdownSimple: true;
+@variationDropdownResizable: true;
 @variationDropdownScrolling: true;
 @variationDropdownFluid: true;
 @variationDropdownFloating: true;
@@ -581,6 +585,7 @@
 @variationModalFullscreen: true;
 @variationModalOverlay: true;
 @variationModalAligned: true;
+@variationModalResizable: true;
 @variationModalScrolling: true;
 @variationModalLegacy: true;
 @variationModalCloseInside: true;
@@ -653,6 +658,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);
                 });
             }
 

package/tasks/config/project/install.js

@@ -240,6 +240,7 @@ module.exports = {
         config: './semantic.json.example',
         definitions: './src/definitions',
         gulpFile: './gulpfile.js',
+        overridesImport: './src/overrides.less',
         lessImport: './src/semantic.less',
         site: './src/_site',
         tasks: './tasks',
@@ -253,6 +254,7 @@ module.exports = {
     // expected final filenames
     files: {
         config: 'semantic.json',
+        overridesImport: 'src/overrides.less',
         lessImport: 'src/semantic.less',
         site: 'src/site',
         themeConfig: 'src/theme.config',
@@ -263,6 +265,7 @@ module.exports = {
     folders: {
         config: './',
         definitions: 'src/definitions/',
+        overridesImport: 'src/',
         lessImport: 'src/',
         modules: 'node_modules/',
         site: 'src/site/',

package/tasks/config/tasks.js

@@ -9,7 +9,7 @@ let defaultBrowsers = browserslist(browserslist.defaults);
 let userBrowsers = browserslist();
 let hasBrowserslistConfig = JSON.stringify(defaultBrowsers) !== JSON.stringify(userBrowsers);
 
-var prefix = config.prefix || {};
+let prefix = config.prefix || {};
 if (!prefix.overrideBrowserslist && !hasBrowserslistConfig) {
     prefix.overrideBrowserslist = [
         'last 2 Chrome versions',
@@ -114,10 +114,7 @@ module.exports = {
                     let
                         regExp = {
                             variable: /@(\S.*?)\s/,
-                            theme: /themes[/\\]+(.*?)[/\\].*/,
-                            element: /[/\\]([^*/\\]*)\.overrides/,
                         },
-                        theme,
                         element
                     ;
                     if (error && error.filename && /theme.less/.test(error.filename)) {
@@ -127,10 +124,6 @@ module.exports = {
                                 console.error('Missing theme.config value for', element);
                             }
                             console.error('Most likely new UI was added in an update. You will need to add missing elements from theme.config.example');
-                        } else if (error.line === 84) {
-                            element = regExp.element.exec(error.message)[1];
-                            theme = regExp.theme.exec(error.message)[1];
-                            console.error(theme + ' is not an available theme for ' + element);
                         } else {
                             console.error(error);
                         }

package/tasks/install.js

@@ -69,9 +69,9 @@ module.exports = function (callback) {
         root: path.normalize(__dirname + '/../'),
     }; */
 
-    /* Don't do end user config if SUI is a sub-module */
+    /* Don't do end user config if FUI is a sub-module */
     if (install.isSubModule()) {
-        console.info('SUI is a sub-module, skipping end-user install');
+        console.info('FUI is a sub-module, skipping end-user install');
         callback();
 
         return;
@@ -86,7 +86,7 @@ module.exports = function (callback) {
     }
 
     /* -----------------
-        Update SUI
+        Update FUI
     ----------------- */
 
     // run update scripts if semantic.json exists
@@ -96,6 +96,7 @@ module.exports = function (callback) {
             updatePaths  = {
                 config: path.join(manager.root, files.config),
                 tasks: path.join(updateFolder, folders.tasks),
+                overridesImport: path.join(updateFolder, folders.overridesImport),
                 themeImport: path.join(updateFolder, folders.themeImport),
                 definition: path.join(currentConfig.paths.source.definitions),
                 site: path.join(currentConfig.paths.source.site),
@@ -132,7 +133,11 @@ module.exports = function (callback) {
                     .pipe(plumber())
                     .pipe(gulp.dest(updatePaths.themeImport))
                 ;
-
+                console.info('Updating overrides import file');
+                gulp.src(source.overridesImport)
+                    .pipe(plumber())
+                    .pipe(gulp.dest(updatePaths.overridesImport))
+                ;
                 console.info('Adding new site theme files...');
                 wrench.copyDirSyncRecursive(source.site, updatePaths.site, settings.wrench.merge);
 
@@ -187,7 +192,7 @@ module.exports = function (callback) {
     }
 
     /* --------------
-       Create SUI
+       Create FUI
     --------------- */
 
     gulp.task('run setup', function (callback) {
@@ -263,6 +268,7 @@ module.exports = function (callback) {
             // special install paths only for PM install
             installPaths = extend(false, {}, installPaths, {
                 definition: folders.definitions,
+                overridesImport: folders.overridesImport,
                 lessImport: folders.lessImport,
                 tasks: folders.tasks,
                 theme: folders.themes,
@@ -311,6 +317,10 @@ module.exports = function (callback) {
                 .pipe(plumber())
                 .pipe(gulp.dest(installPaths.themeImport))
             ;
+            gulp.src(source.overridesImport)
+                .pipe(plumber())
+                .pipe(gulp.dest(installPaths.overridesImport))
+            ;
             gulp.src(source.lessImport)
                 .pipe(plumber())
                 .pipe(gulp.dest(installPaths.lessImport))