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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.4-beta.91+83986c3",
+  "version": "2.9.4-beta.93+22d2d0d",
   "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;
             }

package/src/definitions/collections/menu.less

@@ -17,6 +17,17 @@
 
 @import (multiple) "../../theme.config";
 
+@notSecondary: if(@variationMenuSecondary, e(":not(.secondary)"));
+@notText: if(@variationMenuText, e(":not(.text)"));
+@notTabular: if(@variationMenuTabular, e(":not(.tabular)"));
+@notVertical: if(@variationMenuVertical, e(":not(.vertical)"));
+@notBorderless: if(@variationMenuBorderless, e(":not(.borderless)"));
+@notFluid: if(@variationMenuFluid, e(":not(.fluid)"));
+@notWrapping: if(@variationMenuWrapping, e(":not(.wrapping)"));
+
+@notUpward: if(@variationDropdownUpward, e(":not(.upward)"));
+@notFloating: if(@variationLabelFloating, e(":not(.floating)"));
+
 /*******************************
             Standard
 *******************************/
@@ -60,7 +71,7 @@
     margin: 0;
 }
 
-.ui.menu:not(.vertical) > .menu {
+.ui.menu@{notVertical} > .menu {
     display: flex;
 }
 
@@ -68,7 +79,7 @@
       Item
 --------------- */
 
-.ui.menu:not(.vertical) .item {
+.ui.menu@{notVertical} .item {
     display: flex;
     align-items: center;
 }
@@ -135,7 +146,7 @@
      Button
 --------------- */
 
-.ui.menu:not(.vertical) .item > .button {
+.ui.menu@{notVertical} .item > .button {
     position: relative;
     top: @buttonOffset;
     margin: @buttonMargin;
@@ -162,7 +173,7 @@
 .ui.menu .item > .input {
     width: 100%;
 }
-.ui.menu:not(.vertical) .item > .input {
+.ui.menu@{notVertical} .item > .input {
     position: relative;
     top: @inputOffset;
     margin: @inputVerticalMargin 0;
@@ -298,7 +309,7 @@
     .ui.vertical.menu .dropdown.item.upward .menu {
         bottom: 0;
     }
-    .ui.vertical.menu .dropdown.item:not(.upward) .menu {
+    .ui.vertical.menu .dropdown.item@{notUpward} .menu {
         top: 0;
     }
     .ui.vertical.menu .active.dropdown.item {
@@ -319,7 +330,7 @@
      Labels
 --------------- */
 
-.ui.menu .item > .label:not(.floating) {
+.ui.menu .item > .label@{notFloating} {
     margin-left: @labelTextMargin;
     padding: @labelVerticalPadding @labelHorizontalPadding;
 }
@@ -401,11 +412,11 @@
     }
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-    .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
+    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .item:not(.right)@{notBorderless}:first-child {
         border-left: @dividerSize solid @dividerBackground;
     }
-    .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child,
-    .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child {
+    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .right.item@{notBorderless}:last-child,
+    .ui.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} > .container > .right.menu > .item@{notBorderless}:last-child {
         border-right: @dividerSize solid @dividerBackground;
     }
 }
@@ -482,27 +493,27 @@ Floated Menu / Item
 ------------------- */
 
 /* Left Floated */
-.ui.menu:not(.vertical) .left.item,
-.ui.menu:not(.vertical) .left.menu {
+.ui.menu@{notVertical} .left.item,
+.ui.menu@{notVertical} .left.menu {
     display: flex;
     margin-right: auto !important;
 }
 
 /* Right Floated */
-.ui.menu:not(.vertical) .right.item,
-.ui.menu:not(.vertical) .right.menu {
+.ui.menu@{notVertical} .right.item,
+.ui.menu@{notVertical} .right.menu {
     display: flex;
     margin-left: auto !important;
 }
 
-.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
-.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
+.ui.menu@{notVertical} :not(.dropdown) > .left.menu,
+.ui.menu@{notVertical} :not(.dropdown) > .right.menu {
     display: inherit;
 }
 
 /* Center */
-.ui.menu:not(.vertical) .center.item,
-.ui.menu:not(.vertical) .center.menu {
+.ui.menu@{notVertical} .center.item,
+.ui.menu@{notVertical} .center.menu {
     display: flex;
     margin-left: auto !important;
     margin-right: auto !important;
@@ -795,7 +806,7 @@ Floated Menu / Item
     .ui.compact.menu .item:last-child {
         border-radius: 0 @borderRadius @borderRadius 0;
     }
-    .ui.pagination.menu:not(.wrapping) .item:last-child::before {
+    .ui.pagination.menu@{notWrapping} .item:last-child::before {
         display: none;
     }
 
@@ -972,7 +983,7 @@ Floated Menu / Item
             border-bottom-width: 0;
         }
 
-        .ui.secondary.pointing.menu .item > .label:not(.floating) {
+        .ui.secondary.pointing.menu .item > .label@{notFloating} {
             margin-top: -@labelVerticalPadding;
             margin-bottom: -@labelVerticalPadding;
         }
@@ -1489,8 +1500,8 @@ Floated Menu / Item
 }
 
 & when (@variationMenuCentered) {
-    .ui.center.aligned.menu:not(.fluid),
-    .ui.centered.menu:not(.fluid) {
+    .ui.center.aligned.menu@{notFluid},
+    .ui.centered.menu@{notFluid} {
         display: inline-flex;
         transform: translateX(-50%);
         margin-left: 50%;
@@ -1596,7 +1607,7 @@ Floated Menu / Item
             display: inline-block;
         }
     }
-    .ui.compact.menu:not(.secondary) .item:last-child {
+    .ui.compact.menu@{notSecondary} .item:last-child {
         border-radius: 0 @borderRadius @borderRadius 0;
     }
     .ui.compact.menu .item:last-child::before {
@@ -1643,8 +1654,8 @@ Floated Menu / Item
         text-align: center;
         justify-content: center;
     }
-    .ui.attached[class*="equal width"].menu:not(.tabular),
-    .ui.attached.item.menu:not(.tabular) {
+    .ui.attached[class*="equal width"].menu@{notTabular},
+    .ui.attached.item.menu@{notTabular} {
         margin: 0 @attachedHorizontalOffset !important;
     }
 
@@ -1904,7 +1915,7 @@ Floated Menu / Item
     }
 
     /* Tabular Attached */
-    .ui.attached.menu:not(.tabular):not(.text) {
+    .ui.attached.menu@{notTabular}@{notText} {
         border: @attachedBorder;
     }
     & when (@variationMenuInverted) {
@@ -1936,7 +1947,7 @@ Floated Menu / Item
         & .item:first-child::before {
             display: none;
         }
-        &:not(.secondary):not(.text):not(.tabular):not(.borderless) .item {
+        &@{notSecondary}@{notText}@{notTabular}@{notBorderless} .item {
             &:last-of-type,
             &:last-child {
                 border-right: @dividerSize solid @dividerBackground;
@@ -1944,7 +1955,7 @@ Floated Menu / Item
         }
     }
     & when (@variationMenuWrapped) {
-        .ui.wrapped.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) .item {
+        .ui.wrapped.menu@{notSecondary}@{notText}@{notTabular}@{notBorderless} .item {
             &:first-child {
                 border-bottom-left-radius: 0;
             }