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

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

@@ -19,11 +19,11 @@
 
 @borderBoxShadowColor: rgba(0, 0, 0, 0.14);
 
-@green: #5CB85C;
-@red: #D9534F;
-@blue: #337AB7;
-@green: #60B044;
-@orange: #F0AD4E;
+@green: #5cb85c;
+@red: #d9534f;
+@blue: #337ab7;
+@green: #60b044;
+@orange: #f0ad4e;
 
 @primaryColor: @blue;
 @secondaryColor: @green;
@@ -37,7 +37,7 @@
 @basicActiveBackground: transparent;
 @basicHoverBackground: transparent;
 @basicDownBoxShadow:
-    0 0 0 1px #ADADAD inset,
+    0 0 0 1px #adadad inset,
     0 3px 5px rgba(0, 0, 0, 0.125) inset
 ;
 
@@ -46,17 +46,17 @@
 
 /* States */
 
-@hoverBackgroundColor: #E6E6E6;
+@hoverBackgroundColor: #e6e6e6;
 @hoverBoxShadow:
-    0 0 0 1px #ADADAD inset
+    0 0 0 1px #adadad inset
 ;
 
-@downBackgroundColor: #E6E6E6;
+@downBackgroundColor: #e6e6e6;
 @downBoxShadow:
-    0 0 0 1px #ADADAD inset,
+    0 0 0 1px #adadad inset,
     0 3px 5px rgba(0, 0, 0, 0.125) inset
 ;
 
-@activeBackgroundColor: #E6E6E6;
+@activeBackgroundColor: #e6e6e6;
 
 @disabledOpacity: 0.65;

package/src/themes/chubby/elements/button.overrides

@@ -2,7 +2,7 @@
            Overrides
 *******************************/
 
-@import (css) url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro');
+@import (css) url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro");
 
 .ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {

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

@@ -3,11 +3,11 @@
 -------------------- */
 
 /* Button Variables */
-@pageFont: 'Source Sans Pro', Arial, sans-serif;
+@pageFont: "Source Sans Pro", Arial, sans-serif;
 
 @textTransform: none;
 @fontWeight: @normal;
-@textColor: #333333;
+@textColor: #333;
 
 @verticalPadding: 1.1em;
 @horizontalPadding: 2.5em;
@@ -17,30 +17,30 @@
 @basicFontWeight: bold;
 @basicTextTransform: uppercase;
 
-@blue: #4A88CB;
+@blue: #4a88cb;
 @primaryColor: @blue;
 
 @borderRadius: 0.25em;
 
-@backgroundColor: #E6EAED;
+@backgroundColor: #e6eaed;
 @backgroundImage: none;
 @boxShadow: none;
 
-@hoverBackgroundColor: #DDDDDD;
+@hoverBackgroundColor: #ddd;
 @hoverBackgroundImage: none;
 @hoverBoxShadow: none;
 
-@downBackgroundColor: #D0D0D0;
+@downBackgroundColor: #d0d0d0;
 @downBackgroundImage: none;
 @downBoxShadow: none;
 
-@activeBackgroundColor: #CCCCCC;
+@activeBackgroundColor: #ccc;
 @activeBackgroundImage: none;
 @activeBoxShadow: none;
 
 @verticalBoxShadow: none;
 
-@loadingBackgroundColor: #F0F0F0;
+@loadingBackgroundColor: #f0f0f0;
 
 @compactVerticalPadding: (@verticalPadding * 0.5);
 @compactHorizontalPadding: (@horizontalPadding * 0.5);

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

@@ -2,4 +2,4 @@
            Overrides
 *******************************/
 
-@import (css) url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro');
+@import (css) url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro");

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

@@ -2,7 +2,7 @@
        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/chubby/views/comment.variables

@@ -7,7 +7,7 @@
 -------------------- */
 
 /* Comment */
-@commentBackground: #FFFFFF;
+@commentBackground: #fff;
 @commentMargin: 1em 0 0;
 @commentPadding: 1em 1.5em;
 @commentBorder: 1px solid rgba(0, 0, 0, 0.1);
@@ -18,7 +18,7 @@
 /* Nested Comment */
 @nestedCommentsMargin: 0 0 0.5em 0.5em;
 @nestedCommentsPadding: 1em 0 0 1em;
-@nestedCommentBackground: #F0F0F0;
+@nestedCommentBackground: #f0f0f0;
 
 /* Avatar */
 @avatarWidth: 3.5em;
@@ -43,4 +43,4 @@
 -------------------- */
 
 /* Threaded */
-@threadedCommentMargin: -1.5em 0 -1em  (@avatarWidth / 2);
+@threadedCommentMargin: -1.5em 0 -1em (@avatarWidth / 2);

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

@@ -10,7 +10,7 @@
 @shadowDistance: 0;
 @shadowOffset: (@shadowDistance / 2);
 @shadowBoxShadow: 0 -@shadowDistance 0 0 @borderColor inset;
-@backgroundColor: #FAFAFA;
+@backgroundColor: #fafafa;
 @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.09));
 @boxShadow:
     0 0 0 1px @borderColor inset,
@@ -39,14 +39,14 @@
 -------------------- */
 
 /* Hovered */
-@hoverBackgroundColor: '';
+@hoverBackgroundColor: "";
 @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13));
-@hoverBoxShadow: '';
+@hoverBoxShadow: "";
 @hoverColor: @hoveredTextColor;
 @iconHoverOpacity: 0.85;
 
 /* Focused */
-@focusBackgroundColor: '';
+@focusBackgroundColor: "";
 @focusBackgroundImage: none;
 @focusBoxShadow:
     0 0 1px rgba(81, 167, 232, 0.8) inset,
@@ -56,8 +56,8 @@
 @iconFocusOpacity: 0.85;
 
 /* Pressed Down */
-@downBackgroundColor: #F1F1F1;
-@downBackgroundImage: '';
+@downBackgroundColor: #f1f1f1;
+@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
@@ -65,7 +65,7 @@
 @downColor: @pressedTextColor;
 
 /* Active */
-@activeBackgroundColor: #DADADA;
+@activeBackgroundColor: #dadada;
 @activeBackgroundImage: none;
 @activeColor: @selectedTextColor;
 @activeBoxShadow:
@@ -74,7 +74,7 @@
 ;
 
 /* Active + Hovered */
-@activeHoverBackgroundColor: #DADADA;
+@activeHoverBackgroundColor: #dadada;
 @activeHoverBackgroundImage: none;
 @activeHoverBoxShadow:
     0 0 0 1px rgba(0, 0, 0, 0.1) inset,
@@ -83,7 +83,7 @@
 @activeHoverColor: @selectedTextColor;
 
 /* Loading */
-@loadingBackgroundColor: #FFFFFF;
+@loadingBackgroundColor: #fff;
 
 /* -------------------
         Types

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

@@ -6,7 +6,7 @@
        Element
 -------------------- */
 
-@headerFont: 'Open Sans', Arial, sans-serif;
+@headerFont: "Open Sans", Arial, sans-serif;
 
 @blockBackground: @offWhite @subtleGradient;
 @blockBoxShadow: @subtleShadow;

package/src/themes/classic/modules/progress.variables

@@ -4,6 +4,6 @@
 
 @background: rgba(0, 0, 0, 0.05);
 @boxShadow: 0 0 4px rgba(0, 0, 0, 0.1) inset;
-@barBackground: @subtleGradient #888888;
+@barBackground: @subtleGradient #888;
 @border: 1px solid @borderColor;
 @padding: @relative3px;

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

@@ -7,7 +7,7 @@
 -------------------- */
 
 /* Item */
-@background: #FFFFFF;
+@background: #fff;
 @borderRadius: 0.325rem;
 @display: block;
 @float: left;
@@ -20,7 +20,7 @@
     0 3px 0 0 @borderColor
 ;
 @border: none;
-@zIndex: '';
+@zIndex: "";
 
 /* Item Group */
 @horizontalSpacing: 0.5em;

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

@@ -16,7 +16,7 @@
 
 /* Additional Content */
 @extraDivider: 1px solid rgba(0, 0, 0, 0.05);
-@extraBackground: #FAFAFA @subtleGradient;
+@extraBackground: #fafafa @subtleGradient;
 @extraPadding: 0.75em 1em;
 @extraBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 @extraColor: @lightTextColor;

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

@@ -108,7 +108,7 @@
 
 /* Loading Dimmer */
 @loaderDimmerColor: rgba(255, 255, 255, 0.8);
-@loaderInvertedDimmerColor: rgba(0, 0, 0 , 0.85);
+@loaderInvertedDimmerColor: rgba(0, 0, 0, 0.85);
 @loaderDimmerZIndex: 100;
 
 /* Loading Spinner */
@@ -120,7 +120,7 @@
 -------------------- */
 
 /* Required */
-@requiredContent: '*';
+@requiredContent: "*";
 @requiredColor: @negativeColor;
 @requiredVerticalOffset: -0.2em;
 @requiredDistance: 0.2em;

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

@@ -19,7 +19,7 @@
 @gutterWidth: 2rem;
 @rowSpacing: 2rem;
 
-@tableWidth: e(%('calc(100%% + %d)', @gutterWidth));
+@tableWidth: e(%("calc(100%% + %d)", @gutterWidth));
 @columnMaxImageWidth: 100%;
 
 @consecutiveGridDistance: (@rowSpacing / 2);

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

@@ -10,7 +10,7 @@
 @verticalMargin: @medium;
 @horizontalMargin: 0;
 @margin: @verticalMargin @horizontalMargin;
-@background: #FFFFFF;
+@background: #fff;
 @fontFamily: @pageFont;
 @itemBackground: none;
 @fontWeight: @normal;
@@ -63,7 +63,7 @@
 @dropdownIconDistance: 1em;
 
 /* Header */
-@headerBackground: '';
+@headerBackground: "";
 @headerWeight: @bold;
 @headerTextTransform: @normal;
 
@@ -83,7 +83,7 @@
 @arrowTransition: background @defaultDuration @defaultEasing;
 @arrowZIndex: 2;
 
-@arrowHoverColor: #F2F2F2;
+@arrowHoverColor: #f2f2f2;
 @arrowActiveColor: @arrowHoverColor;
 @arrowActiveHoverColor: @arrowActiveColor;
 
@@ -114,7 +114,7 @@
 
 /* Label */
 @labelOffset: -0.15em;
-@labelBackground: #999999;
+@labelBackground: #999;
 @labelTextColor: @white;
 
 @labelTextMargin: 1em;
@@ -128,13 +128,13 @@
 /* Image Label */
 @imageLabelTextDistance: 0.8em;
 @imageLabelVerticalPadding: 0.2833em; /* Calculates as: @verticalLabel (from label.less) - @labelVerticalPadding (from here) */
-@imageLabelHeight: (1em + @imageLabelVerticalPadding * 2);  /* Logic adopted from label.less */
+@imageLabelHeight: (1em + @imageLabelVerticalPadding * 2); /* Logic adopted from label.less */
 @imageLabelImageMargin: -@imageLabelVerticalPadding @imageLabelTextDistance -@imageLabelVerticalPadding -@imageLabelTextDistance;
 
 /* Dropdown in Menu */
 @dropdownMenuBoxShadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
 
-@dropdownBackground: #FFFFFF;
+@dropdownBackground: #fff;
 @dropdownMenuDistance: 0;
 @dropdownMenuBorderRadius: @borderRadius;
 
@@ -204,7 +204,7 @@
 /* Vertical */
 @verticalBoxShadow: @boxShadow;
 @verticalPointerWidth: 2px;
-@verticalBackground: #FFFFFF;
+@verticalBackground: #fff;
 @verticalItemBackground: none;
 @verticalDividerBackground: @dividerBackground;
 
@@ -284,8 +284,8 @@
 @secondaryPointingInvertedActiveColor: @invertedSelectedTextColor;
 
 /* Tiered */
-@tieredActiveItemBackground: #FCFCFC;
-@tieredActiveMenuBackground: #FCFCFC;
+@tieredActiveItemBackground: #fcfcfc;
+@tieredActiveMenuBackground: #fcfcfc;
 
 @tieredSubMenuTextTransform: @normal;
 @tieredSubMenuFontWeight: @normal;
@@ -321,7 +321,7 @@
 @tabularVerticalBackground: none @tabularBackgroundColor;
 
 @tabularFluidOffset: 1px;
-@tabularFluidWidth: e(%('calc(100%% + %d)', @tabularFluidOffset * 2));
+@tabularFluidWidth: e(%("calc(100%% + %d)", @tabularFluidOffset * 2));
 
 @tabularActiveBackground: none @white;
 @tabularActiveColor: @selectedTextColor;
@@ -398,9 +398,9 @@
 /* Inverted Active */
 @invertedActiveBackground: @invertedArrowActiveColor;
 @invertedActiveColor: @invertedSelectedTextColor;
-@invertedArrowActiveColor: #3D3E3F;
+@invertedArrowActiveColor: #3d3e3f;
 
-/* Inverted Active Hover  */
+/* Inverted Active Hover */
 @invertedActiveHoverBackground: @invertedActiveBackground;
 @invertedActiveHoverColor: @white;
 @invertedArrowActiveHoverColor: @invertedArrowActiveColor;
@@ -426,7 +426,7 @@
 @attachedTopOffset: 0;
 @attachedBottomOffset: 0;
 @attachedHorizontalOffset: -@borderWidth;
-@attachedWidth: e(%('calc(100%% + %d)', -@attachedHorizontalOffset * 2));
+@attachedWidth: e(%("calc(100%% + %d)", -@attachedHorizontalOffset * 2));
 @attachedBoxShadow: none;
 @attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:

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

@@ -12,7 +12,7 @@
 @verticalPadding: 1em;
 @horizontalPadding: 1.5em;
 @padding: @verticalPadding @horizontalPadding;
-@background: #F8F8F9;
+@background: #f8f8f9;
 @lineHeightOffset: ((@lineHeight - 1em) / 2);
 
 @borderRadius: @defaultBorderRadius;

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

@@ -97,10 +97,10 @@
 @definitionColumnFontWeight: @bold;
 @definitionColumnColor: @selectedTextColor;
 @definitionColumnFontSize: @relativeMedium;
-@definitionColumnTextTransform: '';
-@definitionColumnBoxShadow: '';
-@definitionColumnTextAlign: '';
-@definitionColumnHorizontalPadding: '';
+@definitionColumnTextTransform: "";
+@definitionColumnBoxShadow: "";
+@definitionColumnTextAlign: "";
+@definitionColumnHorizontalPadding: "";
 
 /* --------------
     Couplings
@@ -144,16 +144,16 @@
 @warningBackgroundHover: darken(@warningBackgroundColor, 3);
 @warningColorHover: darken(@warningColor, 3);
 @invertedWarningColor: @warningTextColor;
-@invertedWarningBackgroundColor: #EEC97E;
+@invertedWarningBackgroundColor: #eec97e;
 
 /* Active */
 @activeColor: @textColor;
-@activeBackgroundColor: #E0E0E0;
+@activeBackgroundColor: #e0e0e0;
 @activeBoxShadow: @stateMarkerWidth 0 0 @activeColor inset;
 @invertedActiveColor: @textColor;
-@invertedActiveBackgroundColor: #A0A0A0;
+@invertedActiveBackgroundColor: #a0a0a0;
 
-@activeBackgroundHover: #EFEFEF;
+@activeBackgroundHover: #efefef;
 @activeColorHover: @selectedTextColor;
 
 /* --------------
@@ -164,7 +164,7 @@
 @attachedTopOffset: 0;
 @attachedBottomOffset: 0;
 @attachedHorizontalOffset: -@borderWidth;
-@attachedWidth: e(%('calc(100%% + %d)', -@attachedHorizontalOffset * 2));
+@attachedWidth: e(%("calc(100%% + %d)", -@attachedHorizontalOffset * 2));
 @attachedBoxShadow: none;
 @attachedBorder: @borderWidth solid @solidBorderColor;
 @attachedBottomBoxShadow:
@@ -183,16 +183,16 @@
 @selectableInvertedTextColor: @invertedSelectedTextColor;
 
 /* Sortable */
-@sortableBackground: '';
+@sortableBackground: "";
 @sortableColor: @textColor;
 
 @sortableBorder: 1px solid @borderColor;
 @sortableIconWidth: auto;
 @sortableIconDistance: 0.5em;
 @sortableIconOpacity: 0.8;
-@sortableIconFont: 'Icons';
-@sortableIconAscending: '\f0d8';
-@sortableIconDescending: '\f0d7';
+@sortableIconFont: "Icons";
+@sortableIconAscending: "\f0d8";
+@sortableIconDescending: "\f0d7";
 @sortableDisabledColor: @disabledTextColor;
 
 @sortableHoverBackground: @transparentBlack;
@@ -216,7 +216,7 @@
 @coloredBorderSizeCover: (@coloredBorderSize / 2);
 
 /* Inverted */
-@invertedBackground: #333333;
+@invertedBackground: #333;
 @invertedBorder: none;
 @invertedCellBorder: 1px solid @whiteBorderColor;
 @invertedCellBorderColor: @whiteBorderColor;
@@ -245,7 +245,7 @@
 @basicTableCellBackground: transparent;
 @basicTableHeaderDivider: none;
 @basicTableCellBorder: 1px solid rgba(0, 0, 0, 0.1);
-@basicTableCellPadding: '';
+@basicTableCellPadding: "";
 @basicTableStripedBackground: @transparentBlack;
 
 /* Padded */

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

@@ -9,7 +9,7 @@
 /* Button */
 @verticalMargin: 0;
 @horizontalMargin: 0.25em;
-@backgroundColor: #E0E1E2;
+@backgroundColor: #e0e1e2;
 @backgroundImage: none;
 @background: @backgroundColor @backgroundImage;
 @lineHeight: 1em;
@@ -47,7 +47,7 @@
 @iconHeight: auto;
 @iconOpacity: 0.8;
 @iconDistance: @relative6px;
-@iconColor: '';
+@iconColor: "";
 @iconTransition: opacity @defaultDuration @defaultEasing;
 @iconVerticalAlign: baseline;
 
@@ -85,7 +85,7 @@
 -------------------- */
 
 /* Hovered */
-@hoverBackgroundColor: #CACBCD;
+@hoverBackgroundColor: #cacbcd;
 @hoverBackgroundImage: @backgroundImage;
 @hoverBoxShadow: @boxShadow;
 @hoverColor: @hoveredTextColor;
@@ -94,7 +94,7 @@
 /* Focused */
 @focusBackgroundColor: @hoverBackgroundColor;
 @focusBackgroundImage: none;
-@focusBoxShadow: '';
+@focusBoxShadow: "";
 @focusColor: @hoveredTextColor;
 @iconFocusOpacity: 0.85;
 
@@ -103,8 +103,8 @@
 @disabledBoxShadow: none;
 
 /* Pressed Down */
-@downBackgroundColor: #BABBBC;
-@downBackgroundImage: '';
+@downBackgroundColor: #babbbc;
+@downBackgroundImage: "";
 @downPressedShadow: none;
 @downBoxShadow:
     @borderBoxShadow,
@@ -113,7 +113,7 @@
 @downColor: @pressedTextColor;
 
 /* Active */
-@activeBackgroundColor: #C0C1C2;
+@activeBackgroundColor: #c0c1c2;
 @activeBackgroundImage: none;
 @activeColor: @selectedTextColor;
 @activeBoxShadow: @borderBoxShadow;
@@ -137,7 +137,7 @@
 -------------------- */
 
 /* Or */
-@orText: 'or';
+@orText: "or";
 
 @orGap: 0.3em;
 @orHeight: (@verticalPadding * 2) + 1em;
@@ -166,7 +166,7 @@
 /* Labeled */
 @labeledLabelFontSize: @medium;
 @labeledLabelAlign: center;
-@labeledLabelPadding: '';
+@labeledLabelPadding: "";
 @labeledLabelFontSize: @relativeMedium;
 @labeledLabelBorderColor: @borderColor;
 @labeledLabelBorderOffset: -@borderBoxShadowWidth;
@@ -178,7 +178,7 @@
 @labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
 @labeledIconPadding: (@horizontalPadding + @labeledIconWidth);
 @labeledIconBorder: transparent;
-@labeledIconColor: '';
+@labeledIconColor: "";
 
 @labeledIconLeftShadow: -1px 0 0 0 @labeledIconBorder inset;
 @labeledIconRightShadow: 1px 0 0 0 @labeledIconBorder inset;
@@ -204,7 +204,7 @@
 @basicTextTransform: none;
 
 /* Basic Hover */
-@basicHoverBackground: #FFFFFF;
+@basicHoverBackground: #fff;
 @basicHoverTextColor: @hoveredTextColor;
 @basicHoverBoxShadow:
     0 0 0 @basicBorderSize @selectedBorderColor inset,
@@ -217,7 +217,7 @@
 @basicFocusBoxShadow: @basicHoverBoxShadow;
 
 /* Basic Down */
-@basicDownBackground: #F8F8F8;
+@basicDownBackground: #f8f8f8;
 @basicDownTextColor: @pressedTextColor;
 @basicDownBoxShadow:
     0 0 0 @basicBorderSize rgba(0, 0, 0, 0.15) inset,
@@ -226,7 +226,7 @@
 
 /* Basic Active */
 @basicActiveBackground: @transparentBlack;
-@basicActiveBoxShadow: '';
+@basicActiveBoxShadow: "";
 @basicActiveTextColor: @selectedTextColor;
 
 /* Basic Inverted */

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

@@ -6,7 +6,7 @@
        Element
 -------------------- */
 
-/* Minimum Gutter is used to determine  the maximum container width for a given device */
+/* Minimum Gutter is used to determine the maximum container width for a given device */
 
 @maxWidth: 100%;
 @wideRatio: 1.2;
@@ -16,17 +16,17 @@
 @mobileWidth: auto;
 @mobileGutter: 1em;
 
-@tabletMinimumGutter: (@emSize  * 1);
+@tabletMinimumGutter: (@emSize * 1);
 @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
 @tabletWideWidth: (@tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @tabletGutter: auto;
 
-@computerMinimumGutter: (@emSize  * 1.5);
+@computerMinimumGutter: (@emSize * 1.5);
 @computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
 @computerWideWidth: (@computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @computerGutter: auto;
 
-@largeMonitorMinimumGutter: (@emSize  * 2);
+@largeMonitorMinimumGutter: (@emSize * 2);
 @largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
 @largeMonitorWideWidth: (@largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @largeMonitorGutter: auto;
@@ -37,19 +37,19 @@
 @veryRelaxedGridGutterWidth: 5rem;
 
 @mobileGridWidth: @mobileWidth;
-@tabletGridWidth: e(%('calc(%d + %d)', @tabletWidth, @gridGutterWidth));
-@computerGridWidth: e(%('calc(%d + %d)', @computerWidth, @gridGutterWidth));
-@largeMonitorGridWidth: e(%('calc(%d + %d)', @largeMonitorWidth, @gridGutterWidth));
+@tabletGridWidth: e(%("calc(%d + %d)", @tabletWidth, @gridGutterWidth));
+@computerGridWidth: e(%("calc(%d + %d)", @computerWidth, @gridGutterWidth));
+@largeMonitorGridWidth: e(%("calc(%d + %d)", @largeMonitorWidth, @gridGutterWidth));
 
 @mobileRelaxedGridWidth: @mobileWidth;
-@tabletRelaxedGridWidth: e(%('calc(%d + %d)', @tabletWidth, @relaxedGridGutterWidth));
-@computerRelaxedGridWidth: e(%('calc(%d + %d)', @computerWidth, @relaxedGridGutterWidth));
-@largeMonitorRelaxedGridWidth: e(%('calc(%d + %d)', @largeMonitorWidth, @relaxedGridGutterWidth));
+@tabletRelaxedGridWidth: e(%("calc(%d + %d)", @tabletWidth, @relaxedGridGutterWidth));
+@computerRelaxedGridWidth: e(%("calc(%d + %d)", @computerWidth, @relaxedGridGutterWidth));
+@largeMonitorRelaxedGridWidth: e(%("calc(%d + %d)", @largeMonitorWidth, @relaxedGridGutterWidth));
 
 @mobileVeryRelaxedGridWidth: @mobileWidth;
-@tabletVeryRelaxedGridWidth: e(%('calc(%d + %d)', @tabletWidth, @veryRelaxedGridGutterWidth));
-@computerVeryRelaxedGridWidth: e(%('calc(%d + %d)', @computerWidth, @veryRelaxedGridGutterWidth));
-@largeMonitorVeryRelaxedGridWidth: e(%('calc(%d + %d)', @largeMonitorWidth, @veryRelaxedGridGutterWidth));
+@tabletVeryRelaxedGridWidth: e(%("calc(%d + %d)", @tabletWidth, @veryRelaxedGridGutterWidth));
+@computerVeryRelaxedGridWidth: e(%("calc(%d + %d)", @computerWidth, @veryRelaxedGridGutterWidth));
+@largeMonitorVeryRelaxedGridWidth: e(%("calc(%d + %d)", @largeMonitorWidth, @veryRelaxedGridGutterWidth));
 
 /* -------------------
        Types