fomantic-ui 2.9.1-beta.27 → 2.9.1-beta.29

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

@@ -11,8 +11,7 @@
     opacity @defaultDuration @defaultEasing,
     background-color @defaultDuration @defaultEasing,
     color @defaultDuration @defaultEasing,
-    background @defaultDuration @defaultEasing
-;
+    background @defaultDuration @defaultEasing;
 
 @hoverBackgroundColor: #e0e0e0;
 
@@ -24,18 +23,14 @@
 @backgroundImage: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
 @boxShadow:
     0 1px 0 1px rgba(255, 255, 255, 0.3) inset,
-    0 0 0 1px #adb2bb inset
-;
+    0 0 0 1px #adb2bb inset;
 
 @coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
-@coloredBoxShadow:
-    0 1px 0 0 rgba(255, 255, 255, 0.2) inset
-;
+@coloredBoxShadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
 
 @downBoxShadow:
     0 0 0 1px #adb2bb inset,
-    0 1px 3px rgba(0, 0, 0, 0.2) inset
-;
+    0 1px 3px rgba(0, 0, 0, 0.2) inset;
 
 @labeledIconBackgroundColor: #313a43;
 @labeledIconColor: #fff;

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

@@ -38,8 +38,7 @@
 @basicHoverBackground: transparent;
 @basicDownBoxShadow:
     0 0 0 1px #adadad inset,
-    0 3px 5px rgba(0, 0, 0, 0.125) inset
-;
+    0 3px 5px rgba(0, 0, 0, 0.125) inset;
 
 @groupButtonOffset: 0 0 0 -1px;
 @verticalGroupOffset: 0 0 -1px 0;
@@ -47,15 +46,12 @@
 /* States */
 
 @hoverBackgroundColor: #e6e6e6;
-@hoverBoxShadow:
-    0 0 0 1px #adadad inset
-;
+@hoverBoxShadow: 0 0 0 1px #adadad inset;
 
 @downBackgroundColor: #e6e6e6;
 @downBoxShadow:
     0 0 0 1px #adadad inset,
-    0 3px 5px rgba(0, 0, 0, 0.125) inset
-;
+    0 3px 5px rgba(0, 0, 0, 0.125) inset;
 
 @activeBackgroundColor: #e6e6e6;
 

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

@@ -14,8 +14,7 @@
 @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
 @boxShadow:
     0 0 0 1px @borderColor inset,
-    @shadowBoxShadow
-;
+    @shadowBoxShadow;
 
 /* Padding */
 @verticalPadding: 0.8em;
@@ -28,8 +27,7 @@
 @groupBoxShadow: none;
 @groupButtonBoxShadow:
     0 0 0 1px @borderColor inset,
-    @shadowBoxShadow
-;
+    @shadowBoxShadow;
 @verticalBoxShadow: 0 0 0 1px @borderColor inset;
 @groupButtonOffset: 0 0 0 -1px;
 @verticalGroupOffset: 0 0 -1px 0;
@@ -50,8 +48,7 @@
 @focusBackgroundImage: none;
 @focusBoxShadow:
     0 0 1px rgba(81, 167, 232, 0.8) inset,
-    0 0 3px 2px rgba(81, 167, 232, 0.8)
-;
+    0 0 3px 2px rgba(81, 167, 232, 0.8);
 @focusColor: @hoveredTextColor;
 @iconFocusOpacity: 0.85;
 
@@ -60,8 +57,7 @@
 @downBackgroundImage: "";
 @downBoxShadow:
     0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important
-;
+    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
 @downColor: @pressedTextColor;
 
 /* Active */
@@ -70,16 +66,14 @@
 @activeColor: @selectedTextColor;
 @activeBoxShadow:
     0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important
-;
+    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
 
 /* Active + Hovered */
 @activeHoverBackgroundColor: #dadada;
 @activeHoverBackgroundImage: none;
 @activeHoverBoxShadow:
     0 0 0 1px rgba(0, 0, 0, 0.1) inset,
-    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important
-;
+    0 1px 4px 0 rgba(0, 0, 0, 0.1) inset !important;
 @activeHoverColor: @selectedTextColor;
 
 /* Loading */

package/src/themes/classic/views/card.overrides

@@ -17,8 +17,7 @@
 @width: 300px;
 @boxShadow:
     0 0 0 1px @borderColor,
-    0 3px 0 0 @borderColor
-;
+    0 3px 0 0 @borderColor;
 @border: none;
 @zIndex: "";
 
@@ -87,8 +86,7 @@
 @hoverBorder: none;
 @hoverBoxShadow:
     0 0 0 1px @selectedBorderColor,
-    0 3px 0 0 @selectedBorderColor
-;
+    0 3px 0 0 @selectedBorderColor;
 
 /* -------------------
       Variations

package/src/themes/colored/modules/checkbox.variables

@@ -24,6 +24,4 @@
 
 /* Handle */
 @handleBackground: @white @subtleGradient;
-@handleBoxShadow:
-    0 0 0 1px @selectedBorderColor inset
-;
+@handleBoxShadow: 0 0 0 1px @selectedBorderColor inset;

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

@@ -37,8 +37,7 @@
 @inputColor: @textColor;
 @inputTransition:
     color @defaultDuration @defaultEasing,
-    border-color @defaultDuration @defaultEasing
-;
+    border-color @defaultDuration @defaultEasing;
 @inputBoxShadow: 0 0 0 0 transparent inset;
 
 /* Select */

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

@@ -27,8 +27,7 @@
 @itemTransition:
     background @defaultDuration @defaultEasing,
     box-shadow @defaultDuration @defaultEasing,
-    color @defaultDuration @defaultEasing
-;
+    color @defaultDuration @defaultEasing;
 @itemFontWeight: @normal;
 @itemTextColor: @textColor;
 
@@ -431,8 +430,7 @@
 @attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:
     @boxShadow,
-    @attachedBoxShadow
-;
+    @attachedBoxShadow;
 
 /* Resize large sizes */
 @mini: @11px;

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

@@ -21,15 +21,13 @@
 @shadowShadow: 0 0 0 0 rgba(0, 0, 0, 0);
 @boxShadow:
     @borderShadow,
-    @shadowShadow
-;
+    @shadowShadow;
 
 @transition:
     opacity @defaultDuration @defaultEasing,
     color @defaultDuration @defaultEasing,
     background @defaultDuration @defaultEasing,
-    box-shadow @defaultDuration @defaultEasing
-;
+    box-shadow @defaultDuration @defaultEasing;
 
 /* Header */
 @headerFontSize: @relativeLarge;
@@ -75,154 +73,118 @@
 @attachedBoxShadow: 0 0 0 @borderWidth @borderColor inset;
 @attachedBottomBoxShadow:
     @attachedBoxShadow,
-    @subtleShadow
-;
+    @subtleShadow;
 
 /* Floating */
 @floatingBoxShadow:
     @borderShadow,
-    @floatingShadow
-;
+    @floatingShadow;
 
 /* Colors */
 @redBoxShadow:
     0 0 0 @borderWidth @redBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @redBoxFloatingShadow:
     0 0 0 @borderWidth @redBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @orangeBoxShadow:
     0 0 0 @borderWidth @orangeBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @orangeBoxFloatingShadow:
     0 0 0 @borderWidth @orangeBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @yellowBoxShadow:
     0 0 0 @borderWidth @yellowBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @yellowBoxFloatingShadow:
     0 0 0 @borderWidth @yellowBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @oliveBoxShadow:
     0 0 0 @borderWidth @oliveBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @oliveBoxFloatingShadow:
     0 0 0 @borderWidth @oliveBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @greenBoxShadow:
     0 0 0 @borderWidth @greenBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @greenBoxFloatingShadow:
     0 0 0 @borderWidth @greenBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @tealBoxShadow:
     0 0 0 @borderWidth @tealBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @tealBoxFloatingShadow:
     0 0 0 @borderWidth @tealBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @blueBoxShadow:
     0 0 0 @borderWidth @blueBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @blueBoxFloatingShadow:
     0 0 0 @borderWidth @blueBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @violetBoxShadow:
     0 0 0 @borderWidth @violetBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @violetBoxFloatingShadow:
     0 0 0 @borderWidth @violetBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @purpleBoxShadow:
     0 0 0 @borderWidth @purpleBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @purpleBoxFloatingShadow:
     0 0 0 @borderWidth @purpleBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @pinkBoxShadow:
     0 0 0 @borderWidth @pinkBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @pinkBoxFloatingShadow:
     0 0 0 @borderWidth @pinkBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @brownBoxShadow:
     0 0 0 @borderWidth @brownBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @brownBoxFloatingShadow:
     0 0 0 @borderWidth @brownBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 
 /* Warning / Positive / Negative / Info */
 @positiveBoxShadow:
     0 0 0 @borderWidth @positiveBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @positiveBoxFloatingShadow:
     0 0 0 @borderWidth @positiveBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @negativeBoxShadow:
     0 0 0 @borderWidth @negativeBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @negativeBoxFloatingShadow:
     0 0 0 @borderWidth @negativeBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @infoBoxShadow:
     0 0 0 @borderWidth @infoBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @infoBoxFloatingShadow:
     0 0 0 @borderWidth @infoBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @warningBoxShadow:
     0 0 0 @borderWidth @warningBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @warningBoxFloatingShadow:
     0 0 0 @borderWidth @warningBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @errorBoxShadow:
     0 0 0 @borderWidth @errorBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @errorBoxFloatingShadow:
     0 0 0 @borderWidth @errorBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 @successBoxShadow:
     0 0 0 @borderWidth @successBorderColor inset,
-    @shadowShadow
-;
+    @shadowShadow;
 @successBoxFloatingShadow:
     0 0 0 @borderWidth @successBorderColor inset,
-    @floatingShadow
-;
+    @floatingShadow;
 
 @miniMessageSize: @relativeMini;
 @tinyMessageSize: @relativeTiny;

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

@@ -14,8 +14,7 @@
 @borderRadius: @defaultBorderRadius;
 @transition:
     background @defaultDuration @defaultEasing,
-    color @defaultDuration @defaultEasing
-;
+    color @defaultDuration @defaultEasing;
 @background: @white;
 @color: @textColor;
 @borderWidth: 1px;
@@ -169,8 +168,7 @@
 @attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:
     @boxShadow,
-    @attachedBoxShadow
-;
+    @attachedBoxShadow;
 
 /* Striped */
 @stripedBackground: rgba(0, 0, 50, 0.02);

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

@@ -40,8 +40,7 @@
 @borderBoxShadow: 0 0 0 @borderBoxShadowWidth @borderBoxShadowColor inset;
 @boxShadow:
     @borderBoxShadow,
-    @shadowBoxShadow
-;
+    @shadowBoxShadow;
 
 /* Icon */
 @iconHeight: auto;
@@ -62,8 +61,7 @@
     background-color @defaultDuration @defaultEasing,
     color @defaultDuration @defaultEasing,
     box-shadow @defaultDuration @defaultEasing,
-    background @defaultDuration @defaultEasing
-;
+    background @defaultDuration @defaultEasing;
 
 /*
 @willChange: box-shadow, transform, opacity, color, background;
@@ -108,8 +106,7 @@
 @downPressedShadow: none;
 @downBoxShadow:
     @borderBoxShadow,
-    @downPressedShadow
-;
+    @downPressedShadow;
 @downColor: @pressedTextColor;
 
 /* Active */
@@ -129,8 +126,7 @@
 @loadingPointerEvents: auto;
 @loadingTransition:
     all 0s linear,
-    opacity @defaultDuration @defaultEasing
-;
+    opacity @defaultDuration @defaultEasing;
 
 /* -------------------
         Types
@@ -208,8 +204,7 @@
 @basicHoverTextColor: @hoveredTextColor;
 @basicHoverBoxShadow:
     0 0 0 @basicBorderSize @selectedBorderColor inset,
-    0 0 0 0 @borderColor inset
-;
+    0 0 0 0 @borderColor inset;
 
 /* Basic Focus */
 @basicFocusBackground: @basicHoverBackground;
@@ -221,8 +216,7 @@
 @basicDownTextColor: @pressedTextColor;
 @basicDownBoxShadow:
     0 0 0 @basicBorderSize rgba(0, 0, 0, 0.15) inset,
-    0 1px 4px 0 @borderColor inset
-;
+    0 1px 4px 0 @borderColor inset;
 
 /* Basic Active */
 @basicActiveBackground: @transparentBlack;

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

@@ -1159,7 +1159,7 @@
         countrycode: sa;
         class: saudi_arabia;
         aliasClass: saudiarabia;
-        aliasClass2: saudi
+        aliasClass2: saudi;
     };
     @1f1f8-1f1f3: {
         countrycode: sn;
@@ -1579,7 +1579,7 @@
         countrycode: sj;
         class: svalbard_and_jan_mayen;
         aliasClass: svalbard;
-        aliasClass2: jan_mayen
+        aliasClass2: jan_mayen;
     };
     @1f1f9-1f1e6: {
         countrycode: ta;
@@ -1598,7 +1598,7 @@
         class: united_nations;
         aliasClass: united_nations;
         aliasClass2: false;
-    }
+    };
 };
 
 @size-map: {

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

@@ -45,8 +45,7 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
 @fonts: {
     @solid: {
         font-family: @fontName;
-        src: url("@{fontPath}/@{fontName}.woff2") format("woff2")
-            if(@supportIE, e(",") url("@{fontPath}/@{fontName}.woff") format("woff"));
+        src: url("@{fontPath}/@{fontName}.woff2") format("woff2") if(@supportIE, e(",") url("@{fontPath}/@{fontName}.woff") format("woff"));
         font-style: normal;
         font-weight: @normal;
         font-display: block;
@@ -56,8 +55,7 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
     };
     @outline: {
         font-family: @outlineFontName;
-        src: url("@{fontPath}/@{outlineFontName}.woff2") format("woff2")
-            if(@supportIE, e(",") url("@{fontPath}/@{outlineFontName}.woff") format("woff"));
+        src: url("@{fontPath}/@{outlineFontName}.woff2") format("woff2") if(@supportIE, e(",") url("@{fontPath}/@{outlineFontName}.woff") format("woff"));
         font-style: normal;
         font-weight: @normal;
         font-display: block;
@@ -67,8 +65,7 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
     };
     @brand: {
         font-family: @brandFontName;
-        src: url("@{fontPath}/@{brandFontName}.woff2") format("woff2")
-            if(@supportIE, e(",") url("@{fontPath}/@{brandFontName}.woff") format("woff"));
+        src: url("@{fontPath}/@{brandFontName}.woff2") format("woff2") if(@supportIE, e(",") url("@{fontPath}/@{brandFontName}.woff") format("woff"));
         font-style: normal;
         font-weight: @normal;
         font-display: block;
@@ -78,7 +75,10 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
     };
 };
 
-// Underscores in map keys will be replaced by dots to separate classnames at compile time
+// Underscores in map keys will be replaced by @iconClassSeparator to separate classnames at compile time
+@iconClassSeparator: ".";
+@iconForcedOrder: false;
+@iconForcedAttribute: class;
 
 /* Deprecated (In/Out Naming Conflict) */
 @icon-deprecated-map: {
@@ -2104,14 +2104,12 @@ Icons are order A-Z in their group, Solid, Outline, Thin (Pro only) and Brand
     -@cornerIconStroke -@cornerIconStroke 0 @white,
     @cornerIconStroke -@cornerIconStroke 0 @white,
     -@cornerIconStroke @cornerIconStroke 0 @white,
-    @cornerIconStroke @cornerIconStroke 0 @white
-;
+    @cornerIconStroke @cornerIconStroke 0 @white;
 @cornerIconInvertedShadow:
     -@cornerIconStroke -@cornerIconStroke 0 @black,
     @cornerIconStroke -@cornerIconStroke 0 @black,
     -@cornerIconStroke @cornerIconStroke 0 @black,
-    @cornerIconStroke @cornerIconStroke 0 @black
-;
+    @cornerIconStroke @cornerIconStroke 0 @black;
 
 @cornerOffset: 0;
 @borderedGroupCornerOffset: 1.15em;

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

@@ -24,8 +24,7 @@
 @borderRadius: @defaultBorderRadius;
 @transition:
     box-shadow @defaultDuration @defaultEasing,
-    border-color @defaultDuration @defaultEasing
-;
+    border-color @defaultDuration @defaultEasing;
 
 /* -------------------
         Types

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

@@ -106,9 +106,7 @@
 @linkListItemHoverColor: @hoveredTextColor;
 @linkListItemDownColor: @pressedTextColor;
 @linkListItemActiveColor: @selectedTextColor;
-@linkListTransition:
-    @defaultDuration color @defaultEasing
-;
+@linkListTransition: @defaultDuration color @defaultEasing;
 
 /* Inverted Link List */
 @invertedLinkListItemColor: @invertedUnselectedTextColor;
@@ -124,8 +122,7 @@
 @selectionListTransition:
     @defaultDuration color @defaultEasing,
     @defaultDuration padding-left @defaultEasing,
-    @defaultDuration background-color @defaultEasing
-;
+    @defaultDuration background-color @defaultEasing;
 
 /* Selection List States */
 @selectionListBackground: transparent;
@@ -153,8 +150,7 @@
 @animatedListTransition:
     @animatedDuration color @defaultEasing @animatedDelay,
     @animatedDuration padding-left @defaultEasing @animatedDelay,
-    @animatedDuration background-color @defaultEasing @animatedDelay
-;
+    @animatedDuration background-color @defaultEasing @animatedDelay;
 @animatedListIndent: 1em;
 
 /* Bulleted */

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

@@ -34,15 +34,19 @@
 /* Glow Gradient */
 @placeholderLoadingAnimationDuration: 2s;
 @placeholderLoadingGradientWidth: 1200px;
-@placeholderLoadingGradient: linear-gradient(to right,
-rgba(0, 0, 0, 0.08) 0,
-rgba(0, 0, 0, 0.15) 15%,
-rgba(0, 0, 0, 0.08) 30%
+// prettier-ignore
+@placeholderLoadingGradient: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0.08) 0,
+    rgba(0, 0, 0, 0.15) 15%,
+    rgba(0, 0, 0, 0.08) 30%
 );
-@placeholderInvertedLoadingGradient: linear-gradient(to right,
-rgba(255, 255, 255, 0.08) 0,
-rgba(255, 255, 255, 0.14) 15%,
-rgba(255, 255, 255, 0.08) 30%
+// prettier-ignore
+@placeholderInvertedLoadingGradient: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0.08) 0,
+    rgba(255, 255, 255, 0.14) 15%,
+    rgba(255, 255, 255, 0.08) 30%
 );
 
 /* Variations */

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

@@ -106,8 +106,7 @@
 @attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:
     @boxShadow,
-    @attachedBoxShadow
-;
+    @attachedBoxShadow;
 
 /* Inverted */
 @invertedBackground: @black;
@@ -132,21 +131,21 @@
 @tertiaryColor: @mutedTextColor;
 
 @secondaryInvertedLightness: 0.2;
+// prettier-ignore
 @secondaryInvertedBackground:
     lighten(@black, (@secondaryInvertedLightness * 100))
     linear-gradient(
         rgba(255, 255, 255, @secondaryInvertedLightness) 0,
         rgba(255, 255, 255, @secondaryInvertedLightness) 100%
-    )
-;
+    );
 @secondaryInvertedColor: @invertedMutedTextColor;
 
 @tertiaryInvertedLightness: 0.35;
+// prettier-ignore
 @tertiaryInvertedBackground:
     lighten(@black, (@tertiaryInvertedLightness * 100))
     linear-gradient(
         rgba(255, 255, 255, @tertiaryInvertedLightness) 0,
         rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
-    )
-;
+    );
 @tertiaryInvertedColor: @invertedMutedTextColor;

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

@@ -27,8 +27,7 @@
     background-color @defaultDuration @defaultEasing,
     opacity @defaultDuration @defaultEasing,
     color @defaultDuration @defaultEasing,
-    box-shadow @defaultDuration @defaultEasing
-;
+    box-shadow @defaultDuration @defaultEasing;
 @lineHeight: @relativeLarge;
 @alignItems: center;
 @justifyContent: center;