fomantic-ui 2.9.4-beta.91 → 2.9.4-beta.92

package/dist/semantic.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.4-beta.91+83986c3
+ * # Fomantic UI - 2.9.4-beta.92+84fc179
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *
@@ -9,7 +9,7 @@
  *
  */
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Site
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Site
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -465,7 +465,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Form Validation
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Form Validation
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -2665,7 +2665,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Accordion
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Accordion
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -3261,7 +3261,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Calendar
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Calendar
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -5285,7 +5285,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Checkbox
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Checkbox
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -6174,7 +6174,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Dimmer
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Dimmer
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -6907,7 +6907,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Dropdown
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Dropdown
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -11340,7 +11340,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Embed
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Embed
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -12029,7 +12029,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Flyout
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Flyout
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -13581,7 +13581,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Modal
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Modal
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -15219,7 +15219,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Nag
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Nag
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -15786,7 +15786,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Popup
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Popup
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -17348,7 +17348,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Progress
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Progress
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -18328,7 +18328,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Slider
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Slider
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -19875,7 +19875,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Rating
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Rating
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -20416,7 +20416,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Search
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Search
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -22047,7 +22047,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Shape
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Shape
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -22845,7 +22845,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Sidebar
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Sidebar
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -23900,7 +23900,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Sticky
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Sticky
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -24818,7 +24818,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Tab
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Tab
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -25786,7 +25786,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Toast
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Toast
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -26751,7 +26751,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Transition
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Transition
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -27786,7 +27786,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - API
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - API
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -29012,7 +29012,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - State
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - State
  * https://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -29710,7 +29710,7 @@
 })(jQuery, window, document);
 
 /*!
- * # Fomantic-UI 2.9.4-beta.91+83986c3 - Visibility
+ * # Fomantic-UI 2.9.4-beta.92+84fc179 - Visibility
  * https://github.com/fomantic/Fomantic-UI/
  *
  *

package/dist/semantic.min.css

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.4-beta.91+83986c3
+ * # Fomantic UI - 2.9.4-beta.92+84fc179
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.4-beta.91+83986c3
+ * # Fomantic UI - 2.9.4-beta.92+84fc179
  * https://github.com/fomantic/Fomantic-UI
  * https://fomantic-ui.com/
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.4-beta.91+83986c3",
+  "version": "2.9.4-beta.92+84fc179",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/collections/form.less

@@ -17,6 +17,19 @@
 
 @import (multiple) "../../theme.config";
 
+@notInline: if(@variationFormInline, e(":not(.inline)"));
+@notInverted: if(@variationFormInverted, e(":not(.inverted)"));
+@notWide: if(@variationFormWide, e(":not(.wide)"));
+@notGrouped: if(@variationFormGrouped, e(":not(.grouped)"));
+@notRequired: if(@variationFormRequired, e(":not(.required)"));
+@notUnstackable: if(@variationFormUnstackable, e(":not(.unstackable)"));
+
+@notToggle: if(@variationCheckboxToggle, e(":not(.toggle)"));
+@notSlider: if(@variationCheckboxSlider, e(":not(.slider)"));
+@notCompact: if(@variationDropdownCompact, e(":not(.compact)"));
+@notIcon: if(@variationInputIcon, e(":not(.icon)"));
+@notCorner: if(@variationLabelCorner, e(":not(.corner)"));
+
 /*******************************
             Elements
 *******************************/
@@ -69,7 +82,7 @@
     font-weight: @labelFontWeight;
     text-transform: @labelTextTransform;
 }
-.ui.form:not(.inverted) .field > label:not(.button) {
+.ui.form@{notInverted} .field > label:not(.button) {
     color: @labelColor;
 }
 
@@ -183,16 +196,16 @@
     Checkbox margin
 --------------------- */
 
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) label + .ui.ui.checkbox {
     margin-top: @checkboxLabelFieldTopMargin;
 }
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) .ui.checkbox {
     margin-top: @inputLineHeight + @checkboxFieldTopMargin;
 }
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) .ui.toggle.checkbox {
     margin-top: @inputLineHeight + @checkboxToggleFieldTopMargin;
 }
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
+.ui.form .fields@{notGrouped}@{notInline} .field:not(:only-child) .ui.slider.checkbox {
     margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin;
 }
 .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
@@ -210,7 +223,7 @@
           Transparent
     --------------------- */
 
-    .ui.form .field .transparent.input:not(.icon) input,
+    .ui.form .field .transparent.input@{notIcon} input,
     .ui.form .field input.transparent,
     .ui.form .field textarea.transparent {
         padding: @transparentPadding;
@@ -254,7 +267,7 @@
 --------------------- */
 
 /* Block */
-.ui.form .field > .selection.dropdown:not(.compact) {
+.ui.form .field > .selection.dropdown@{notCompact} {
     min-width: auto;
     width: 100%;
 }
@@ -287,8 +300,8 @@
 
 & when (@variationFormInline) {
     /* Inline */
-    .ui.form .inline.fields .field:not(.wide) .ui.input,
-    .ui.form .inline.field:not(.wide) .ui.input {
+    .ui.form .inline.fields .field@{notWide} .ui.input,
+    .ui.form .inline.field@{notWide} .ui.input {
         width: auto;
         vertical-align: middle;
     }
@@ -528,9 +541,9 @@
         }
 
         .ui.ui.form .fields.@{state} .field label,
-        .ui.ui.form .fields.@{state} .field .ui.label:not(.corner),
+        .ui.ui.form .fields.@{state} .field .ui.label@{notCorner},
         .ui.ui.form .field.@{state} label,
-        .ui.ui.form .field.@{state} .ui.label:not(.corner),
+        .ui.ui.form .field.@{state} .ui.label@{notCorner},
         .ui.ui.form .fields.@{state} .field .input,
         .ui.ui.form .field.@{state} .input {
             color: @c;
@@ -720,12 +733,12 @@
         /*--------------------
             Checkbox State
         ---------------------*/
-        .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label,
-        .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label {
+        .ui.form .fields.@{state} .field .checkbox@{notToggle}@{notSlider} label,
+        .ui.form .field.@{state} .checkbox@{notToggle}@{notSlider} label {
             color: @c;
         }
-        .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label::before,
-        .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label::before {
+        .ui.form .fields.@{state} .field .checkbox@{notToggle}@{notSlider} label::before,
+        .ui.form .field.@{state} .checkbox@{notToggle}@{notSlider} label::before {
             background: @bg;
             border-color: @bdc;
         }
@@ -820,11 +833,11 @@
          Required Field
     --------------------- */
 
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > label::after,
     .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after,
     .ui.form label.required::after {
         margin: @requiredMargin;
@@ -832,7 +845,7 @@
         color: @requiredColor;
     }
 
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > label::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > label::after,
     .ui.form .required.fields.inline > label::after,
     .ui.form .required.fields.grouped > label::after,
     .ui.form .required.field > label::after,
@@ -841,7 +854,7 @@
         vertical-align: top;
     }
 
-    .ui.form .required.fields:not(.grouped):not(.inline) > .field > .checkbox::after,
+    .ui.form .required.fields@{notGrouped}@{notInline} > .field > .checkbox::after,
     .ui.form .required.field > .checkbox::after {
         position: absolute;
         top: 0;
@@ -849,13 +862,13 @@
     }
 }
 
-.ui.ui.ui.ui.form .fields:not(.required) > label:empty::after,
-.ui.ui.ui.ui.form .fields:not(.grouped):not(.inline) > .field:not(.required) > label:empty::after {
+.ui.ui.ui.ui.form .fields@{notRequired} > label:empty::after,
+.ui.ui.ui.ui.form .fields@{notGrouped}@{notInline} > .field@{notRequired} > label:empty::after {
     content: " ";
     display: inline-block;
 }
 
-.ui.ui.ui.ui.form .inline.fields .field:not(.required) > label:empty {
+.ui.ui.ui.ui.form .inline.fields .field@{notRequired} > label:empty {
     display: none;
 }
 
@@ -1012,8 +1025,8 @@
         margin-bottom: 0;
     }
 
-    .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
-    .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
+    .ui.form@{notUnstackable} .fields@{notUnstackable} > .fields,
+    .ui.form@{notUnstackable} .fields@{notUnstackable} > .field {
         width: @oneColumn;
         margin: 0 0 @rowDistance;
     }

package/src/definitions/collections/grid.less

@@ -17,6 +17,17 @@
 
 @import (multiple) "../../theme.config";
 
+@notAligned: if(@variationGridAligned, e(":not(.aligned)"));
+@notJustified: if(@variationGridJustified, e(":not(.justified)"));
+@notStretched: if(@variationGridStretched, e(":not(.stretched)"));
+@notStackable: if(@variationGridStackable, e(":not(.stackable)"));
+@notHorizontally: if(@variationGridHorizontal, e(":not(.horizontally)"));
+@notVertically: if(@variationGridVertical, e(":not(.vertically)"));
+
+@notAttached: if(@variationSegmentAttached, e(":not(.attached)"));
+@notCompact: if(@variationSegmentCompact, e(":not(.compact)"));
+@notVertical: if(@variationSegmentVertical, e(":not(.vertical)"));
+
 /*******************************
             Standard
 *******************************/
@@ -125,8 +136,8 @@
 }
 
 /* Segment inside Aligned Grid */
-.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
-.ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
+.ui.grid .aligned.row > .column > .segment@{notCompact}@{notAttached},
+.ui.aligned.grid .column > .segment@{notCompact}@{notAttached} {
     width: 100%;
 }
 
@@ -953,9 +964,9 @@
         text-align: center;
         justify-content: center;
     }
-    .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
-    .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
-    .ui.grid .centered.row > .column:not(.aligned):not(.justified) {
+    .ui.centered.grid > .column@{notAligned}@{notJustified}:not(.row),
+    .ui.centered.grid > .row > .column@{notAligned}@{notJustified},
+    .ui.grid .centered.row > .column@{notAligned}@{notJustified} {
         text-align: left;
     }
 
@@ -1008,16 +1019,20 @@
             Padded
     ----------------------- */
 
-    .ui.padded.grid:not(.vertically):not(.horizontally) {
+    .ui.padded.grid@{notVertically}@{notHorizontally} {
         margin: 0;
     }
-    [class*="horizontally padded"].ui.grid {
-        margin-left: 0;
-        margin-right: 0;
+    & when (@variationGridHorizontal) {
+        [class*="horizontally padded"].ui.grid {
+            margin-left: 0;
+            margin-right: 0;
+        }
     }
-    [class*="vertically padded"].ui.grid {
-        margin-top: 0;
-        margin-bottom: 0;
+    & when (@variationGridVertical) {
+        [class*="vertically padded"].ui.grid {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
     }
 }
 
@@ -1100,7 +1115,7 @@
     & when (@variationGridPadded) {
         /* Padded Horizontally Divided */
         [class*="horizontally padded"].ui.divided.grid,
-        .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
+        .ui.padded.divided.grid@{notVertically}@{notHorizontally} {
             width: 100%;
         }
     }
@@ -1499,8 +1514,8 @@
             box-shadow: none !important;
             margin: 0;
         }
-        .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched),
-        .ui.doubling.grid:not(.stretched) > .row:not(.stretched) > .column:not(.stretched) {
+        .ui.grid@{notStretched} > .doubling.row@{notStretched} > .column@{notStretched},
+        .ui.doubling.grid@{notStretched} > .row@{notStretched} > .column@{notStretched} {
             display: inline-block !important;
         }
         .ui[class*="two column"].doubling.grid > .row > .column,
@@ -1594,79 +1609,79 @@
             margin: 0 !important;
             box-shadow: none !important;
         }
-        .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="two column"].doubling:not(.stackable).row > .column {
+        .ui[class*="two column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="two column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="two column"].doubling@{notStackable}.row > .column {
             width: @oneColumn !important;
         }
-        .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="three column"].doubling:not(.stackable).row > .column {
+        .ui[class*="three column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="three column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="three column"].doubling@{notStackable}.row > .column {
             width: @twoColumn !important;
         }
-        .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="four column"].doubling:not(.stackable).row > .column {
+        .ui[class*="four column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="four column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="four column"].doubling@{notStackable}.row > .column {
             width: @twoColumn !important;
         }
-        .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="five column"].doubling:not(.stackable).row > .column {
+        .ui[class*="five column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="five column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="five column"].doubling@{notStackable}.row > .column {
             width: @twoColumn !important;
         }
-        .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="six column"].doubling:not(.stackable).row > .column {
+        .ui[class*="six column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="six column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="six column"].doubling@{notStackable}.row > .column {
             width: @twoColumn !important;
         }
-        .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column {
+        .ui[class*="seven column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="seven column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="seven column"].doubling@{notStackable}.row > .column {
             width: @twoColumn !important;
         }
-        .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column {
+        .ui[class*="eight column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="eight column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="eight column"].doubling@{notStackable}.row > .column {
             width: @twoColumn !important;
         }
-        .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column {
+        .ui[class*="nine column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="nine column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="nine column"].doubling@{notStackable}.row > .column {
             width: @threeColumn !important;
         }
-        .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column {
+        .ui[class*="ten column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="ten column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="ten column"].doubling@{notStackable}.row > .column {
             width: @threeColumn !important;
         }
-        .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="eleven column"].doubling:not(.stackable).row > .column {
+        .ui[class*="eleven column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="eleven column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="eleven column"].doubling@{notStackable}.row > .column {
             width: @threeColumn !important;
         }
-        .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column {
+        .ui[class*="twelve column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="twelve column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="twelve column"].doubling@{notStackable}.row > .column {
             width: @threeColumn !important;
         }
-        .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="thirteen column"].doubling:not(.stackable).row > .column {
+        .ui[class*="thirteen column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="thirteen column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="thirteen column"].doubling@{notStackable}.row > .column {
             width: @threeColumn !important;
         }
-        .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column {
+        .ui[class*="fourteen column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="fourteen column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="fourteen column"].doubling@{notStackable}.row > .column {
             width: @fourColumn !important;
         }
-        .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="fifteen column"].doubling:not(.stackable).row > .column {
+        .ui[class*="fifteen column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="fifteen column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="fifteen column"].doubling@{notStackable}.row > .column {
             width: @fourColumn !important;
         }
-        .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
-        .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
-        .ui.ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column {
+        .ui[class*="sixteen column"].doubling@{notStackable}.grid > .row > .column,
+        .ui[class*="sixteen column"].doubling@{notStackable}.grid > .column:not(.row),
+        .ui.ui.grid > [class*="sixteen column"].doubling@{notStackable}.row > .column {
             width: @fourColumn !important;
         }
     }
@@ -1696,7 +1711,7 @@
             box-shadow: none !important;
             padding: (@stackableRowSpacing / 2) (@stackableGutter / 2);
         }
-        .ui.stackable.grid:not(.vertically) > .row {
+        .ui.stackable.grid@{notVertically} > .row {
             margin: 0;
             padding: 0;
         }
@@ -1710,7 +1725,7 @@
 
         /* Don't pad inside segment or nested grid */
         .ui.grid .ui.stackable.grid,
-        .ui.segment:not(.vertical) .ui.stackable.page.grid {
+        .ui.segment@{notVertical} .ui.stackable.page.grid {
             margin-left: -(@stackableGutter / 2);
             margin-right: -(@stackableGutter / 2);
         }
@@ -1731,9 +1746,9 @@
             }
         }
         .ui.stackable.celled.grid > .column:not(.row),
-        .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
+        .ui.stackable.divided@{notVertically}.grid > .column:not(.row),
         .ui.stackable.celled.grid > .row > .column,
-        .ui.stackable.divided:not(.vertically).grid > .row > .column {
+        .ui.stackable.divided@{notVertically}.grid > .row > .column {
             border-top: @stackableMobileBorder;
             box-shadow: none !important;
             padding-top: @stackableRowSpacing !important;
@@ -1745,8 +1760,8 @@
             }
         }
         & when (@variationGridDivided) {
-            .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
-            .ui.stackable.divided:not(.vertically).grid > .row > .column {
+            .ui.stackable.divided@{notVertically}.grid > .column:not(.row),
+            .ui.stackable.divided@{notVertically}.grid > .row > .column {
                 padding-left: 0 !important;
                 padding-right: 0 !important;
             }