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

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

@@ -2,19 +2,19 @@
          Site Settings
 *******************************/
 
-@import 'variation.variables';
+@import "variation.variables";
 @supportIE: true;
 
 /* -------------------
        Fonts
 -------------------- */
 
-@fontName: 'Lato';
-@fontFileNameLatin: 'LatoLatin';
-@fontFileNameSupplement: 'Lato';
+@fontName: "Lato";
+@fontFileNameLatin: "LatoLatin";
+@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;
@@ -28,8 +28,8 @@
 @fonts: {
     @regularLatin: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameLatin}-Regular.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameLatin}-Regular.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameLatin}-Regular.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameLatin}-Regular.woff") format("woff"));
         font-style: normal;
         font-weight: @normal;
         font-display: @fontDisplay;
@@ -38,8 +38,8 @@
     };
     @boldLatin: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameLatin}-Bold.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameLatin}-Bold.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameLatin}-Bold.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameLatin}-Bold.woff") format("woff"));
         font-style: normal;
         font-weight: @bold;
         font-display: @fontDisplay;
@@ -48,8 +48,8 @@
     };
     @italicLatin: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameLatin}-Italic.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameLatin}-Italic.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameLatin}-Italic.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameLatin}-Italic.woff") format("woff"));
         font-style: italic;
         font-weight: @normal;
         font-display: @fontDisplay;
@@ -58,8 +58,8 @@
     };
     @boldItalicLatin: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff") format("woff"));
         font-style: italic;
         font-weight: @bold;
         font-display: @fontDisplay;
@@ -68,8 +68,8 @@
     };
     @regularSupplement: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameSupplement}-Regular.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameSupplement}-Regular.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff") format("woff"));
         font-style: normal;
         font-weight: @normal;
         font-display: @fontDisplay;
@@ -78,8 +78,8 @@
     };
     @boldSupplement: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameSupplement}-Bold.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameSupplement}-Bold.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff") format("woff"));
         font-style: normal;
         font-weight: @bold;
         font-display: @fontDisplay;
@@ -88,8 +88,8 @@
     };
     @italicSupplement: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameSupplement}-Italic.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameSupplement}-Italic.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff") format("woff"));
         font-style: italic;
         font-weight: @normal;
         font-display: @fontDisplay;
@@ -98,8 +98,8 @@
     };
     @boldItalicSupplement: {
         font-family: @fontName;
-        src: url('@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2') format('woff2')
-            if(@supportIE, e(',') url('@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff') format('woff'));
+        src: url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2") format("woff2")
+            if(@supportIE, e(",") url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff") format("woff"));
         font-style: italic;
         font-weight: @bold;
         font-display: @fontDisplay;
@@ -110,12 +110,12 @@
 
 @googleFontName: @fontName;
 @importGoogleFonts: false;
-@googleFontSizes: 'ital,wght@0,400%3B0,700%3B1,400%3B1,700';
-@googleSubset: 'latin';
-@googleFontDisplay: 'swap';
+@googleFontSizes: "ital,wght@0,400%3B0,700%3B1,400%3B1,700";
+@googleSubset: "latin";
+@googleFontDisplay: "swap";
 
-@googleProtocol: 'https://';
-@googleFontRequest: '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}&display=@{googleFontDisplay}';
+@googleProtocol: "https://";
+@googleFontRequest: "@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}&display=@{googleFontDisplay}";
 
 @bold: bold;
 @normal: normal;
@@ -127,7 +127,7 @@
 /* This is the single variable that controls them all */
 @emSize: 14px;
 
-/* The size of page text  */
+/* The size of page text */
 @fontSize: 14px;
 
 /* -------------------
@@ -153,7 +153,7 @@
 @lightSecondaryColor: @lightBlack;
 
 /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */
-@blendingBaseColor: #cccccc;
+@blendingBaseColor: #ccc;
 
 /* --------------
   Page Heading
@@ -192,10 +192,10 @@
 -------------------- */
 
 /* Used on inputs, textarea etc */
-@focusedFormBorderColor: #85B7D9;
+@focusedFormBorderColor: #85b7d9;
 
 /* Used on dropdowns, other larger blocks */
-@focusedFormMutedBorderColor: #96C8DA;
+@focusedFormMutedBorderColor: #96c8da;
 
 /* -------------------
         Sizes
@@ -219,7 +219,7 @@
         Page
 -------------------- */
 
-@pageBackground: #FFFFFF;
+@pageBackground: #fff;
 @pageOverflowX: hidden;
 
 @lineHeight: 1.4285em;
@@ -236,7 +236,7 @@
        Links
 -------------------- */
 
-@linkColor: #4183C4;
+@linkColor: #4183c4;
 @linkUnderline: none;
 @linkHoverColor: darken(saturate(@linkColor, 20), 15, relative);
 @linkHoverUnderline: @linkUnderline;
@@ -283,7 +283,7 @@
   Highlighted Text
 -------------------- */
 
-@highlightBackground: #CCE2FF;
+@highlightBackground: #cce2ff;
 @highlightColor: @textColor;
 
 @inputHighlightBackground: rgba(100, 100, 100, 0.4);
@@ -332,58 +332,58 @@
 -------------------- */
 
 /* ---  Colors  --- */
-@red: #DB2828;
-@orange: #F2711C;
-@yellow: #FBBD08;
-@olive: #B5CC18;
-@green: #21BA45;
-@teal: #00B5AD;
-@blue: #2185D0;
-@violet: #6435C9;
-@purple: #A333C8;
-@pink: #E03997;
-@brown: #A5673F;
+@red: #db2828;
+@orange: #f2711c;
+@yellow: #fbbd08;
+@olive: #b5cc18;
+@green: #21ba45;
+@teal: #00b5ad;
+@blue: #2185d0;
+@violet: #6435c9;
+@purple: #a333c8;
+@pink: #e03997;
+@brown: #a5673f;
 @grey: #767676;
-@black: #1B1C1D;
+@black: #1b1c1d;
 
 /* ---  Light Colors  --- */
-@lightRed: #FF695E;
-@lightOrange: #FF851B;
-@lightYellow: #FFE21F;
-@lightOlive: #D9E778;
-@lightGreen: #2ECC40;
-@lightTeal: #6DFFFF;
-@lightBlue: #54C8FF;
-@lightViolet: #A291FB;
-@lightPurple: #DC73FF;
-@lightPink: #FF8EDF;
-@lightBrown: #D67C1C;
-@lightGrey: #DCDDDE;
+@lightRed: #ff695e;
+@lightOrange: #ff851b;
+@lightYellow: #ffe21f;
+@lightOlive: #d9e778;
+@lightGreen: #2ecc40;
+@lightTeal: #6dffff;
+@lightBlue: #54c8ff;
+@lightViolet: #a291fb;
+@lightPurple: #dc73ff;
+@lightPink: #ff8edf;
+@lightBrown: #d67c1c;
+@lightGrey: #dcddde;
 @lightBlack: #545454;
 
 /* ---   Neutrals  --- */
-@fullBlack: #000000;
-@offWhite: #F9FAFB;
-@darkWhite: #F3F4F5;
-@midWhite: #DCDDDE;
-@white: #FFFFFF;
+@fullBlack: #000;
+@offWhite: #f9fafb;
+@darkWhite: #f3f4f5;
+@midWhite: #dcddde;
+@white: #fff;
 
 /* --- Colored Backgrounds --- */
-@primaryBackground: #DFF0FF;
-@secondaryBackground: #F4F4F4;
-@redBackground: #FFE8E6;
-@orangeBackground: #FFEDDE;
-@yellowBackground: #FFF8DB;
-@oliveBackground: #FBFDEF;
-@greenBackground: #E5F9E7;
-@tealBackground: #E1F7F7;
-@blueBackground: #DFF0FF;
-@violetBackground: #EAE7FF;
-@purpleBackground: #F6E7FF;
-@pinkBackground: #FFE3FB;
-@brownBackground: #F1E2D3;
-@greyBackground: #F4F4F4;
-@blackBackground: #F4F4F4;
+@primaryBackground: #dff0ff;
+@secondaryBackground: #f4f4f4;
+@redBackground: #ffe8e6;
+@orangeBackground: #ffedde;
+@yellowBackground: #fff8db;
+@oliveBackground: #fbfdef;
+@greenBackground: #e5f9e7;
+@tealBackground: #e1f7f7;
+@blueBackground: #dff0ff;
+@violetBackground: #eae7ff;
+@purpleBackground: #f6e7ff;
+@pinkBackground: #ffe3fb;
+@brownBackground: #f1e2d3;
+@greyBackground: #f4f4f4;
+@blackBackground: #f4f4f4;
 
 /* --- Colored Headers --- */
 @primaryHeaderColor: darken(@primaryTextColor, 5);
@@ -407,10 +407,10 @@
 @secondaryTextColor: @invertedTextColor;
 @redTextColor: @red;
 @orangeTextColor: @orange;
-@yellowTextColor: #B58105; // Yellow text is difficult to read
-@oliveTextColor: #8ABC1E; // Olive is difficult to read
-@greenTextColor: #1EBC30; // Green is difficult to read
-@tealTextColor: #10A3A3; // Teal text is difficult to read
+@yellowTextColor: #b58105; // Yellow text is difficult to read
+@oliveTextColor: #8abc1e; // Olive is difficult to read
+@greenTextColor: #1ebc30; // Green is difficult to read
+@tealTextColor: #10a3a3; // Teal text is difficult to read
 @blueTextColor: @blue;
 @violetTextColor: @violet;
 @purpleTextColor: @purple;
@@ -424,10 +424,10 @@
 @lightSecondaryTextColor: @invertedTextColor;
 @lightRedTextColor: @lightRed;
 @lightOrangeTextColor: @lightOrange;
-@lightYellowTextColor: #B58105; // Yellow text is difficult to read
-@lightOliveTextColor: #8ABC1E; // Olive is difficult to read
-@lightGreenTextColor: #1EBC30; // Green is difficult to read
-@lightTealTextColor: #10A3A3; // Teal text is difficult to read
+@lightYellowTextColor: #b58105; // Yellow text is difficult to read
+@lightOliveTextColor: #8abc1e; // Olive is difficult to read
+@lightGreenTextColor: #1ebc30; // Green is difficult to read
+@lightTealTextColor: #10a3a3; // Teal text is difficult to read
 @lightBlueTextColor: @lightBlue;
 @lightVioletTextColor: @lightViolet;
 @lightPurpleTextColor: @lightPurple;
@@ -704,39 +704,39 @@
 
 /* Positive */
 @positiveColor: @green;
-@positiveBackgroundColor: #FCFFF5;
-@positiveBorderColor: #A3C293;
-@positiveHeaderColor: #1A531B;
-@positiveTextColor: #2C662D;
+@positiveBackgroundColor: #fcfff5;
+@positiveBorderColor: #a3c293;
+@positiveHeaderColor: #1a531b;
+@positiveTextColor: #2c662d;
 
 /* Negative */
 @negativeColor: @red;
-@negativeBackgroundColor: #FFF6F6;
-@negativeBorderColor: #E0B4B4;
-@negativeHeaderColor: #912D2B;
-@negativeTextColor: #9F3A38;
+@negativeBackgroundColor: #fff6f6;
+@negativeBorderColor: #e0b4b4;
+@negativeHeaderColor: #912d2b;
+@negativeTextColor: #9f3a38;
 
 /* Info */
-@infoColor: #31CCEC;
-@infoBackgroundColor: #F8FFFF;
-@infoBorderColor: #A9D5DE;
-@infoHeaderColor: #0E566C;
-@infoTextColor: #276F86;
+@infoColor: #31ccec;
+@infoBackgroundColor: #f8ffff;
+@infoBorderColor: #a9d5de;
+@infoHeaderColor: #0e566c;
+@infoTextColor: #276f86;
 
 /* Warning */
-@warningColor: #F2C037;
-@warningBorderColor: #C9BA9B;
-@warningBackgroundColor: #FFFAF3;
-@warningHeaderColor: #794B02;
-@warningTextColor: #573A08;
+@warningColor: #f2c037;
+@warningBorderColor: #c9ba9b;
+@warningBackgroundColor: #fffaf3;
+@warningHeaderColor: #794b02;
+@warningTextColor: #573a08;
 
 /* -------------------
         Paths
 -------------------- */
 
 /* For source only. Modified in gulp for dist */
-@imagePath: '../../themes/default/assets/images';
-@fontPath: '../../themes/default/assets/fonts';
+@imagePath: "../../themes/default/assets/images";
+@fontPath: "../../themes/default/assets/fonts";
 
 /* -------------------
        Em Sizes
@@ -746,43 +746,43 @@
   This rounds @size values to the closest pixel then expresses that value in (r)em.
   This ensures all size values round to exact pixels
 */
-@miniRaw: unit( (round(@miniSize * @emSize) / @emSize ));
-@tinyRaw: unit( (round(@tinySize * @emSize) / @emSize ));
-@smallRaw: unit( (round(@smallSize * @emSize) / @emSize ));
-@mediumRaw: unit( (round(@mediumSize * @emSize) / @emSize ));
-@largeRaw: unit( (round(@largeSize * @emSize) / @emSize ));
-@bigRaw: unit( (round(@bigSize * @emSize) / @emSize ));
-@hugeRaw: unit( (round(@hugeSize * @emSize) / @emSize ));
-@massiveRaw: unit( (round(@massiveSize * @emSize) / @emSize ));
-
-@mini: unit( @miniRaw, rem);
-@tiny: unit( @tinyRaw, rem);
-@small: unit( @smallRaw, rem);
-@medium: unit( @mediumRaw, rem);
-@large: unit( @largeRaw, rem);
-@big: unit( @bigRaw, rem);
-@huge: unit( @hugeRaw, rem);
-@massive: unit( @massiveRaw, rem);
+@miniRaw: unit((round(@miniSize * @emSize) / @emSize));
+@tinyRaw: unit((round(@tinySize * @emSize) / @emSize));
+@smallRaw: unit((round(@smallSize * @emSize) / @emSize));
+@mediumRaw: unit((round(@mediumSize * @emSize) / @emSize));
+@largeRaw: unit((round(@largeSize * @emSize) / @emSize));
+@bigRaw: unit((round(@bigSize * @emSize) / @emSize));
+@hugeRaw: unit((round(@hugeSize * @emSize) / @emSize));
+@massiveRaw: unit((round(@massiveSize * @emSize) / @emSize));
+
+@mini: unit(@miniRaw, rem);
+@tiny: unit(@tinyRaw, rem);
+@small: unit(@smallRaw, rem);
+@medium: unit(@mediumRaw, rem);
+@large: unit(@largeRaw, rem);
+@big: unit(@bigRaw, rem);
+@huge: unit(@hugeRaw, rem);
+@massive: unit(@massiveRaw, rem);
 
 /* em */
-@relativeMini: unit( @miniRaw, em);
-@relativeTiny: unit( @tinyRaw, em);
-@relativeSmall: unit( @smallRaw, em);
-@relativeMedium: unit( @mediumRaw, em);
-@relativeLarge: unit( @largeRaw, em);
-@relativeBig: unit( @bigRaw, em);
-@relativeHuge: unit( @hugeRaw, em);
-@relativeMassive: unit( @massiveRaw, em);
+@relativeMini: unit(@miniRaw, em);
+@relativeTiny: unit(@tinyRaw, em);
+@relativeSmall: unit(@smallRaw, em);
+@relativeMedium: unit(@mediumRaw, em);
+@relativeLarge: unit(@largeRaw, em);
+@relativeBig: unit(@bigRaw, em);
+@relativeHuge: unit(@hugeRaw, em);
+@relativeMassive: unit(@massiveRaw, em);
 
 /* rem */
-@absoluteMini: unit( @miniRaw, rem);
-@absoluteTiny: unit( @tinyRaw, rem);
-@absoluteSmall: unit( @smallRaw, rem);
-@absoluteMedium: unit( @mediumRaw, rem);
-@absoluteLarge: unit( @largeRaw, rem);
-@absoluteBig: unit( @bigRaw, rem);
-@absoluteHuge: unit( @hugeRaw, rem);
-@absoluteMassive: unit( @massiveRaw, rem);
+@absoluteMini: unit(@miniRaw, rem);
+@absoluteTiny: unit(@tinyRaw, rem);
+@absoluteSmall: unit(@smallRaw, rem);
+@absoluteMedium: unit(@mediumRaw, rem);
+@absoluteLarge: unit(@largeRaw, rem);
+@absoluteBig: unit(@bigRaw, rem);
+@absoluteHuge: unit(@hugeRaw, rem);
+@absoluteMassive: unit(@massiveRaw, rem);
 
 /* -------------------
        Icons
@@ -816,16 +816,16 @@
      Brand Colors
 -------------------- */
 
-@facebookColor: #3B5998;
-@twitterColor: #1DA1F2;
-@googlePlusColor: #DD4B39;
-@linkedInColor: #0077B5;
-@youtubeColor: #FF0000;
-@pinterestColor: #BD081C;
-@vkColor: #45668E;
-@instagramColor: #49769C;
-@telegramColor: #0088CC;
-@whatsAppColor: #25D366;
+@facebookColor: #3b5998;
+@twitterColor: #1da1f2;
+@googlePlusColor: #dd4b39;
+@linkedInColor: #0077b5;
+@youtubeColor: #f00;
+@pinterestColor: #bd081c;
+@vkColor: #45668e;
+@instagramColor: #49769c;
+@telegramColor: #08c;
+@whatsAppColor: #25d366;
 
 /* -------------------
       Borders
@@ -840,15 +840,15 @@
 @strongSelectedBorderColor: rgba(34, 36, 38, 0.5);
 @disabledBorderColor: rgba(34, 36, 38, 0.5);
 
-@solidInternalBorderColor: #FAFAFA;
-@solidBorderColor: #D4D4D5;
-@solidSelectedBorderColor: #BCBDBD;
+@solidInternalBorderColor: #fafafa;
+@solidBorderColor: #d4d4d5;
+@solidSelectedBorderColor: #bcbdbd;
 
 @whiteBorderColor: rgba(255, 255, 255, 0.1);
 @selectedWhiteBorderColor: rgba(255, 255, 255, 0.8);
 
-@solidWhiteBorderColor: #555555;
-@selectedSolidWhiteBorderColor: #999999;
+@solidWhiteBorderColor: #555;
+@selectedSolidWhiteBorderColor: #999;
 
 /* -------------------
     Derived Values
@@ -869,7 +869,7 @@
 @headerLineHeightOffset: ((@headerLineHeight - 1em) / 2);
 
 /* Header Spacing */
-@headerTopMargin: e(%('calc(2rem - %d)', @headerLineHeightOffset));
+@headerTopMargin: e(%("calc(2rem - %d)", @headerLineHeightOffset));
 @headerBottomMargin: 1rem;
 @headerMargin: @headerTopMargin 0 @headerBottomMargin;
 
@@ -909,135 +909,135 @@
 
 */
 
-@1px: unit( (1 / @emSize), rem);
-@2px: unit( (2 / @emSize), rem);
-@3px: unit( (3 / @emSize), rem);
-@4px: unit( (4 / @emSize), rem);
-@5px: unit( (5 / @emSize), rem);
-@6px: unit( (6 / @emSize), rem);
-@7px: unit( (7 / @emSize), rem);
-@8px: unit( (8 / @emSize), rem);
-@9px: unit( (9 / @emSize), rem);
-@10px: unit( (10 / @emSize), rem);
-@11px: unit( (11 / @emSize), rem);
-@12px: unit( (12 / @emSize), rem);
-@13px: unit( (13 / @emSize), rem);
-@14px: unit( (14 / @emSize), rem);
-@15px: unit( (15 / @emSize), rem);
-@16px: unit( (16 / @emSize), rem);
-@17px: unit( (17 / @emSize), rem);
-@18px: unit( (18 / @emSize), rem);
-@19px: unit( (19 / @emSize), rem);
-@20px: unit( (20 / @emSize), rem);
-@21px: unit( (21 / @emSize), rem);
-@22px: unit( (22 / @emSize), rem);
-@23px: unit( (23 / @emSize), rem);
-@24px: unit( (24 / @emSize), rem);
-@25px: unit( (25 / @emSize), rem);
-@26px: unit( (26 / @emSize), rem);
-@27px: unit( (27 / @emSize), rem);
-@28px: unit( (28 / @emSize), rem);
-@29px: unit( (29 / @emSize), rem);
-@30px: unit( (30 / @emSize), rem);
-@31px: unit( (31 / @emSize), rem);
-@32px: unit( (32 / @emSize), rem);
-@33px: unit( (33 / @emSize), rem);
-@34px: unit( (34 / @emSize), rem);
-@35px: unit( (35 / @emSize), rem);
-@36px: unit( (36 / @emSize), rem);
-@37px: unit( (37 / @emSize), rem);
-@38px: unit( (38 / @emSize), rem);
-@39px: unit( (39 / @emSize), rem);
-@40px: unit( (40 / @emSize), rem);
-@41px: unit( (41 / @emSize), rem);
-@42px: unit( (42 / @emSize), rem);
-@43px: unit( (43 / @emSize), rem);
-@44px: unit( (44 / @emSize), rem);
-@45px: unit( (45 / @emSize), rem);
-@46px: unit( (46 / @emSize), rem);
-@47px: unit( (47 / @emSize), rem);
-@48px: unit( (48 / @emSize), rem);
-@49px: unit( (49 / @emSize), rem);
-@50px: unit( (50 / @emSize), rem);
-@51px: unit( (51 / @emSize), rem);
-@52px: unit( (52 / @emSize), rem);
-@53px: unit( (53 / @emSize), rem);
-@54px: unit( (54 / @emSize), rem);
-@55px: unit( (55 / @emSize), rem);
-@56px: unit( (56 / @emSize), rem);
-@57px: unit( (57 / @emSize), rem);
-@58px: unit( (58 / @emSize), rem);
-@59px: unit( (59 / @emSize), rem);
-@60px: unit( (60 / @emSize), rem);
-@61px: unit( (61 / @emSize), rem);
-@62px: unit( (62 / @emSize), rem);
-@63px: unit( (63 / @emSize), rem);
-@64px: unit( (64 / @emSize), rem);
-
-@relative1px: unit( (1 / @emSize), em);
-@relative2px: unit( (2 / @emSize), em);
-@relative3px: unit( (3 / @emSize), em);
-@relative4px: unit( (4 / @emSize), em);
-@relative5px: unit( (5 / @emSize), em);
-@relative6px: unit( (6 / @emSize), em);
-@relative7px: unit( (7 / @emSize), em);
-@relative8px: unit( (8 / @emSize), em);
-@relative9px: unit( (9 / @emSize), em);
-@relative10px: unit( (10 / @emSize), em);
-@relative11px: unit( (11 / @emSize), em);
-@relative12px: unit( (12 / @emSize), em);
-@relative13px: unit( (13 / @emSize), em);
-@relative14px: unit( (14 / @emSize), em);
-@relative15px: unit( (15 / @emSize), em);
-@relative16px: unit( (16 / @emSize), em);
-@relative17px: unit( (17 / @emSize), em);
-@relative18px: unit( (18 / @emSize), em);
-@relative19px: unit( (19 / @emSize), em);
-@relative20px: unit( (20 / @emSize), em);
-@relative21px: unit( (21 / @emSize), em);
-@relative22px: unit( (22 / @emSize), em);
-@relative23px: unit( (23 / @emSize), em);
-@relative24px: unit( (24 / @emSize), em);
-@relative25px: unit( (25 / @emSize), em);
-@relative26px: unit( (26 / @emSize), em);
-@relative27px: unit( (27 / @emSize), em);
-@relative28px: unit( (28 / @emSize), em);
-@relative29px: unit( (29 / @emSize), em);
-@relative30px: unit( (30 / @emSize), em);
-@relative31px: unit( (31 / @emSize), em);
-@relative32px: unit( (32 / @emSize), em);
-@relative33px: unit( (33 / @emSize), em);
-@relative34px: unit( (34 / @emSize), em);
-@relative35px: unit( (35 / @emSize), em);
-@relative36px: unit( (36 / @emSize), em);
-@relative37px: unit( (37 / @emSize), em);
-@relative38px: unit( (38 / @emSize), em);
-@relative39px: unit( (39 / @emSize), em);
-@relative40px: unit( (40 / @emSize), em);
-@relative41px: unit( (41 / @emSize), em);
-@relative42px: unit( (42 / @emSize), em);
-@relative43px: unit( (43 / @emSize), em);
-@relative44px: unit( (44 / @emSize), em);
-@relative45px: unit( (45 / @emSize), em);
-@relative46px: unit( (46 / @emSize), em);
-@relative47px: unit( (47 / @emSize), em);
-@relative48px: unit( (48 / @emSize), em);
-@relative49px: unit( (49 / @emSize), em);
-@relative50px: unit( (50 / @emSize), em);
-@relative51px: unit( (51 / @emSize), em);
-@relative52px: unit( (52 / @emSize), em);
-@relative53px: unit( (53 / @emSize), em);
-@relative54px: unit( (54 / @emSize), em);
-@relative55px: unit( (55 / @emSize), em);
-@relative56px: unit( (56 / @emSize), em);
-@relative57px: unit( (57 / @emSize), em);
-@relative58px: unit( (58 / @emSize), em);
-@relative59px: unit( (59 / @emSize), em);
-@relative60px: unit( (60 / @emSize), em);
-@relative61px: unit( (61 / @emSize), em);
-@relative62px: unit( (62 / @emSize), em);
-@relative63px: unit( (63 / @emSize), em);
-@relative64px: unit( (64 / @emSize), em);
+@1px: unit((1 / @emSize), rem);
+@2px: unit((2 / @emSize), rem);
+@3px: unit((3 / @emSize), rem);
+@4px: unit((4 / @emSize), rem);
+@5px: unit((5 / @emSize), rem);
+@6px: unit((6 / @emSize), rem);
+@7px: unit((7 / @emSize), rem);
+@8px: unit((8 / @emSize), rem);
+@9px: unit((9 / @emSize), rem);
+@10px: unit((10 / @emSize), rem);
+@11px: unit((11 / @emSize), rem);
+@12px: unit((12 / @emSize), rem);
+@13px: unit((13 / @emSize), rem);
+@14px: unit((14 / @emSize), rem);
+@15px: unit((15 / @emSize), rem);
+@16px: unit((16 / @emSize), rem);
+@17px: unit((17 / @emSize), rem);
+@18px: unit((18 / @emSize), rem);
+@19px: unit((19 / @emSize), rem);
+@20px: unit((20 / @emSize), rem);
+@21px: unit((21 / @emSize), rem);
+@22px: unit((22 / @emSize), rem);
+@23px: unit((23 / @emSize), rem);
+@24px: unit((24 / @emSize), rem);
+@25px: unit((25 / @emSize), rem);
+@26px: unit((26 / @emSize), rem);
+@27px: unit((27 / @emSize), rem);
+@28px: unit((28 / @emSize), rem);
+@29px: unit((29 / @emSize), rem);
+@30px: unit((30 / @emSize), rem);
+@31px: unit((31 / @emSize), rem);
+@32px: unit((32 / @emSize), rem);
+@33px: unit((33 / @emSize), rem);
+@34px: unit((34 / @emSize), rem);
+@35px: unit((35 / @emSize), rem);
+@36px: unit((36 / @emSize), rem);
+@37px: unit((37 / @emSize), rem);
+@38px: unit((38 / @emSize), rem);
+@39px: unit((39 / @emSize), rem);
+@40px: unit((40 / @emSize), rem);
+@41px: unit((41 / @emSize), rem);
+@42px: unit((42 / @emSize), rem);
+@43px: unit((43 / @emSize), rem);
+@44px: unit((44 / @emSize), rem);
+@45px: unit((45 / @emSize), rem);
+@46px: unit((46 / @emSize), rem);
+@47px: unit((47 / @emSize), rem);
+@48px: unit((48 / @emSize), rem);
+@49px: unit((49 / @emSize), rem);
+@50px: unit((50 / @emSize), rem);
+@51px: unit((51 / @emSize), rem);
+@52px: unit((52 / @emSize), rem);
+@53px: unit((53 / @emSize), rem);
+@54px: unit((54 / @emSize), rem);
+@55px: unit((55 / @emSize), rem);
+@56px: unit((56 / @emSize), rem);
+@57px: unit((57 / @emSize), rem);
+@58px: unit((58 / @emSize), rem);
+@59px: unit((59 / @emSize), rem);
+@60px: unit((60 / @emSize), rem);
+@61px: unit((61 / @emSize), rem);
+@62px: unit((62 / @emSize), rem);
+@63px: unit((63 / @emSize), rem);
+@64px: unit((64 / @emSize), rem);
+
+@relative1px: unit((1 / @emSize), em);
+@relative2px: unit((2 / @emSize), em);
+@relative3px: unit((3 / @emSize), em);
+@relative4px: unit((4 / @emSize), em);
+@relative5px: unit((5 / @emSize), em);
+@relative6px: unit((6 / @emSize), em);
+@relative7px: unit((7 / @emSize), em);
+@relative8px: unit((8 / @emSize), em);
+@relative9px: unit((9 / @emSize), em);
+@relative10px: unit((10 / @emSize), em);
+@relative11px: unit((11 / @emSize), em);
+@relative12px: unit((12 / @emSize), em);
+@relative13px: unit((13 / @emSize), em);
+@relative14px: unit((14 / @emSize), em);
+@relative15px: unit((15 / @emSize), em);
+@relative16px: unit((16 / @emSize), em);
+@relative17px: unit((17 / @emSize), em);
+@relative18px: unit((18 / @emSize), em);
+@relative19px: unit((19 / @emSize), em);
+@relative20px: unit((20 / @emSize), em);
+@relative21px: unit((21 / @emSize), em);
+@relative22px: unit((22 / @emSize), em);
+@relative23px: unit((23 / @emSize), em);
+@relative24px: unit((24 / @emSize), em);
+@relative25px: unit((25 / @emSize), em);
+@relative26px: unit((26 / @emSize), em);
+@relative27px: unit((27 / @emSize), em);
+@relative28px: unit((28 / @emSize), em);
+@relative29px: unit((29 / @emSize), em);
+@relative30px: unit((30 / @emSize), em);
+@relative31px: unit((31 / @emSize), em);
+@relative32px: unit((32 / @emSize), em);
+@relative33px: unit((33 / @emSize), em);
+@relative34px: unit((34 / @emSize), em);
+@relative35px: unit((35 / @emSize), em);
+@relative36px: unit((36 / @emSize), em);
+@relative37px: unit((37 / @emSize), em);
+@relative38px: unit((38 / @emSize), em);
+@relative39px: unit((39 / @emSize), em);
+@relative40px: unit((40 / @emSize), em);
+@relative41px: unit((41 / @emSize), em);
+@relative42px: unit((42 / @emSize), em);
+@relative43px: unit((43 / @emSize), em);
+@relative44px: unit((44 / @emSize), em);
+@relative45px: unit((45 / @emSize), em);
+@relative46px: unit((46 / @emSize), em);
+@relative47px: unit((47 / @emSize), em);
+@relative48px: unit((48 / @emSize), em);
+@relative49px: unit((49 / @emSize), em);
+@relative50px: unit((50 / @emSize), em);
+@relative51px: unit((51 / @emSize), em);
+@relative52px: unit((52 / @emSize), em);
+@relative53px: unit((53 / @emSize), em);
+@relative54px: unit((54 / @emSize), em);
+@relative55px: unit((55 / @emSize), em);
+@relative56px: unit((56 / @emSize), em);
+@relative57px: unit((57 / @emSize), em);
+@relative58px: unit((58 / @emSize), em);
+@relative59px: unit((59 / @emSize), em);
+@relative60px: unit((60 / @emSize), em);
+@relative61px: unit((61 / @emSize), em);
+@relative62px: unit((62 / @emSize), em);
+@relative63px: unit((63 / @emSize), em);
+@relative64px: unit((64 / @emSize), em);
 
 /* Columns */
 @oneWide: (1 / @columnCount * 100%);
@@ -1470,41 +1470,41 @@
 @transparentFormWarningBackground: @formWarningBackground;
 
 /* Input state */
-@inputErrorBorderRadius: '';
+@inputErrorBorderRadius: "";
 @inputErrorBoxShadow: none;
 
-@inputInfoBorderRadius: '';
+@inputInfoBorderRadius: "";
 @inputInfoBoxShadow: none;
 
-@inputSuccessBorderRadius: '';
+@inputSuccessBorderRadius: "";
 @inputSuccessBoxShadow: none;
 
-@inputWarningBorderRadius: '';
+@inputWarningBorderRadius: "";
 @inputWarningBoxShadow: none;
 
 /* AutoFill */
-@inputAutoFillBackground: #FFFFF0;
-@inputAutoFillBorder: #E5DFA1;
+@inputAutoFillBackground: #fffff0;
+@inputAutoFillBorder: #e5dfa1;
 @inputAutoFillFocusBackground: @inputAutoFillBackground;
-@inputAutoFillFocusBorder: #D5C315;
+@inputAutoFillFocusBorder: #d5c315;
 
-@inputAutoFillErrorBackground: #FFFAF0;
-@inputAutoFillErrorBorder: #E0B4B4;
+@inputAutoFillErrorBackground: #fffaf0;
+@inputAutoFillErrorBorder: #e0b4b4;
 
-@inputAutoFillInfoBackground: #F0FAFF;
+@inputAutoFillInfoBackground: #f0faff;
 @inputAutoFillInfoBorder: #b3e0e0;
 
-@inputAutoFillSuccessBackground: #F0FFF0;
+@inputAutoFillSuccessBackground: #f0fff0;
 @inputAutoFillSuccessBorder: #bee0b3;
 
-@inputAutoFillWarningBackground: #FFFFe0;
+@inputAutoFillWarningBackground: #ffffe0;
 @inputAutoFillWarningBorder: #e0e0b3;
 
 /* Dropdown state */
-@dropdownErrorHoverBackground: #FBE7E7;
+@dropdownErrorHoverBackground: #fbe7e7;
 @dropdownErrorSelectedBackground: @dropdownErrorHoverBackground;
-@dropdownErrorActiveBackground: #FDCFCF;
-@dropdownErrorLabelBackground: #EACBCB;
+@dropdownErrorActiveBackground: #fdcfcf;
+@dropdownErrorLabelBackground: #eacbcb;
 @dropdownErrorLabelColor: @errorTextColor;
 
 @dropdownInfoHoverBackground: #e9f2fb;