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

package/src/definitions/collections/table.less

@@ -17,6 +17,15 @@
 
 @import (multiple) "../../theme.config";
 
+@notUnstackable: if(@variationTableUnstackable, e(":not(.unstackable)"));
+@notRowSpanned: if(@variationTableRowSpanned, e(":not(.rowspanned)"));
+@notFullWidth: if(@variationTableFullWidth, e(":not(.full-width)"));
+@notMarked: if(@variationTableMarked, e(":not(.marked)"));
+@notSortable: if(@variationTableSortable, e(":not(.sortable)"));
+@notStriped: if(@variationTableStriped, e(":not(.striped)"));
+@notInverted: if(@variationTableInverted, e(":not(.inverted)"));
+@notBasic: if(@variationTableBasic, e(":not(.basic)"));
+
 /*******************************
              Table
 *******************************/
@@ -58,10 +67,12 @@
     transition: @transition;
 }
 
-/* Rowspan helper class */
-.ui.table th.rowspanned,
-.ui.table td.rowspanned {
-    display: none;
+& when (@variationTableRowSpanned) {
+    /* Rowspan helper class */
+    .ui.table th.rowspanned,
+    .ui.table td.rowspanned {
+        display: none;
+    }
 }
 
 /* Headers */
@@ -173,67 +184,67 @@
 
 /* Responsive */
 @media only screen and (max-width: @largestMobileScreen) {
-    .ui.table:not(.unstackable) {
+    .ui.table@{notUnstackable} {
         width: 100%;
         padding: 0;
     }
-    .ui.table:not(.unstackable) > thead,
-    .ui.table:not(.unstackable) > thead > tr,
-    .ui.table:not(.unstackable) > tfoot,
-    .ui.table:not(.unstackable) > tfoot > tr,
-    .ui.table:not(.unstackable) > tbody,
-    .ui.table:not(.unstackable) > tr,
-    .ui.table:not(.unstackable) > tbody > tr,
-    .ui.table:not(.unstackable) > tr > th:not(.rowspanned),
-    .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned),
-    .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned),
-    .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned),
-    .ui.table:not(.unstackable) > tr > td:not(.rowspanned),
-    .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned),
-    .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) {
+    .ui.table@{notUnstackable} > thead,
+    .ui.table@{notUnstackable} > thead > tr,
+    .ui.table@{notUnstackable} > tfoot,
+    .ui.table@{notUnstackable} > tfoot > tr,
+    .ui.table@{notUnstackable} > tbody,
+    .ui.table@{notUnstackable} > tr,
+    .ui.table@{notUnstackable} > tbody > tr,
+    .ui.table@{notUnstackable} > tr > th@{notRowSpanned},
+    .ui.table@{notUnstackable} > thead > tr > th@{notRowSpanned},
+    .ui.table@{notUnstackable} > tbody > tr > th@{notRowSpanned},
+    .ui.table@{notUnstackable} > tfoot > tr > th@{notRowSpanned},
+    .ui.table@{notUnstackable} > tr > td@{notRowSpanned},
+    .ui.table@{notUnstackable} > tbody > tr > td@{notRowSpanned},
+    .ui.table@{notUnstackable} > tfoot > tr > td@{notRowSpanned} {
         display: block !important;
         width: auto !important;
     }
 
-    .ui.table:not(.unstackable) > thead {
+    .ui.table@{notUnstackable} > thead {
         display: @responsiveHeaderDisplay;
     }
-    .ui.table:not(.unstackable) > tfoot {
+    .ui.table@{notUnstackable} > tfoot {
         display: @responsiveFooterDisplay;
     }
-    .ui.ui.ui.ui.table:not(.unstackable) > tr,
-    .ui.ui.ui.ui.table:not(.unstackable) > thead > tr,
-    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr,
-    .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr {
+    .ui.ui.ui.ui.table@{notUnstackable} > tr,
+    .ui.ui.ui.ui.table@{notUnstackable} > thead > tr,
+    .ui.ui.ui.ui.table@{notUnstackable} > tbody > tr,
+    .ui.ui.ui.ui.table@{notUnstackable} > tfoot > tr {
         padding-top: @responsiveRowVerticalPadding;
         padding-bottom: @responsiveRowVerticalPadding;
         box-shadow: @responsiveRowBoxShadow;
     }
 
-    .ui.ui.ui.ui.table:not(.unstackable) > tr > th,
-    .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th,
-    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th,
-    .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th,
-    .ui.ui.ui.ui.table:not(.unstackable) > tr > td,
-    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td,
-    .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td {
+    .ui.ui.ui.ui.table@{notUnstackable} > tr > th,
+    .ui.ui.ui.ui.table@{notUnstackable} > thead > tr > th,
+    .ui.ui.ui.ui.table@{notUnstackable} > tbody > tr > th,
+    .ui.ui.ui.ui.table@{notUnstackable} > tfoot > tr > th,
+    .ui.ui.ui.ui.table@{notUnstackable} > tr > td,
+    .ui.ui.ui.ui.table@{notUnstackable} > tbody > tr > td,
+    .ui.ui.ui.ui.table@{notUnstackable} > tfoot > tr > td {
         background: none;
         border: none;
         padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
         box-shadow: @responsiveCellBoxShadow;
     }
-    .ui.table:not(.unstackable) > tr > th:first-child,
-    .ui.table:not(.unstackable) > thead > tr > th:first-child,
-    .ui.table:not(.unstackable) > tbody > tr > th:first-child,
-    .ui.table:not(.unstackable) > tfoot > tr > th:first-child,
-    .ui.table:not(.unstackable) > tr > td:first-child,
-    .ui.table:not(.unstackable) > tbody > tr > td:first-child,
-    .ui.table:not(.unstackable) > tfoot > tr > td:first-child {
+    .ui.table@{notUnstackable} > tr > th:first-child,
+    .ui.table@{notUnstackable} > thead > tr > th:first-child,
+    .ui.table@{notUnstackable} > tbody > tr > th:first-child,
+    .ui.table@{notUnstackable} > tfoot > tr > th:first-child,
+    .ui.table@{notUnstackable} > tr > td:first-child,
+    .ui.table@{notUnstackable} > tbody > tr > td:first-child,
+    .ui.table@{notUnstackable} > tfoot > tr > td:first-child {
         font-weight: @responsiveCellHeaderFontWeight;
     }
 
     /* Definition Table */
-    .ui.definition.table:not(.unstackable) > thead > tr > th:first-child {
+    .ui.definition.table@{notUnstackable} > thead > tr > th:first-child {
         box-shadow: none !important;
     }
     & when (@variationTableMarked) and not (@variationTableColors = false) {
@@ -241,7 +252,7 @@
             @color: @value;
             @c: @colors[@@color][color];
             @l: @colors[@@color][light];
-            .ui.ui.ui.ui.table:not(.unstackable) tr[class*="@{color} marked"] {
+            .ui.ui.ui.ui.table@{notUnstackable} tr[class*="@{color} marked"] {
                 &.left {
                     box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @c inset;
                 }
@@ -250,7 +261,7 @@
                 }
             }
             & when (@variationTableInverted) {
-                .ui.ui.ui.ui.inverted.table:not(.unstackable) tr[class*="@{color} marked"] {
+                .ui.ui.ui.ui.inverted.table@{notUnstackable} tr[class*="@{color} marked"] {
                     &.left {
                         box-shadow: @responsiveRowBoxShadow, @coloredBorderSize 0 0 0 @l inset;
                     }
@@ -716,7 +727,7 @@
        Definition
     --------------- */
 
-    .ui.definition.table > thead:not(.full-width) > tr > th:first-child {
+    .ui.definition.table > thead@{notFullWidth} > tr > th:first-child {
         pointer-events: none;
         background: @definitionHeaderBackground;
         font-weight: @definitionHeaderFontWeight;
@@ -727,11 +738,11 @@
         -moz-transform: scale(1);
     }
 
-    .ui.definition.table > thead:not(.full-width) > tr > th:first-child:not(:empty) {
+    .ui.definition.table > thead@{notFullWidth} > tr > th:first-child:not(:empty) {
         pointer-events: auto;
     }
 
-    .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child {
+    .ui.definition.table > tfoot@{notFullWidth} > tr > th:first-child {
         pointer-events: none;
         background: @definitionFooterBackground;
         font-weight: @definitionFooterFontWeight;
@@ -759,11 +770,11 @@
     }
 
     /* Fix 2nd Column */
-    .ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) {
+    .ui.definition.table > thead@{notFullWidth} > tr > th:nth-child(2) {
         border-left: @borderWidth solid @borderColor;
     }
-    .ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2),
-    .ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) {
+    .ui.definition.table > tfoot@{notFullWidth} > tr > th:nth-child(2),
+    .ui.definition.table > tfoot@{notFullWidth} > tr > td:nth-child(2) {
         border-left: @borderWidth solid @borderColor;
     }
     .ui.definition.table > tr > td:nth-child(2),
@@ -907,13 +918,13 @@
         .ui[class*="tablet stackable"].table > tbody,
         .ui[class*="tablet stackable"].table > tbody > tr,
         .ui[class*="tablet stackable"].table > tr,
-        .ui[class*="tablet stackable"].table > thead > tr > th:not(.rowspanned),
-        .ui[class*="tablet stackable"].table > tbody > tr > th:not(.rowspanned),
-        .ui[class*="tablet stackable"].table > tfoot > tr > th:not(.rowspanned),
-        .ui[class*="tablet stackable"].table > tr > th:not(.rowspanned),
-        .ui[class*="tablet stackable"].table > tbody > tr > td:not(.rowspanned),
-        .ui[class*="tablet stackable"].table > tfoot > tr > td:not(.rowspanned),
-        .ui[class*="tablet stackable"].table > tr > td:not(.rowspanned) {
+        .ui[class*="tablet stackable"].table > thead > tr > th@{notRowSpanned},
+        .ui[class*="tablet stackable"].table > tbody > tr > th@{notRowSpanned},
+        .ui[class*="tablet stackable"].table > tfoot > tr > th@{notRowSpanned},
+        .ui[class*="tablet stackable"].table > tr > th@{notRowSpanned},
+        .ui[class*="tablet stackable"].table > tbody > tr > td@{notRowSpanned},
+        .ui[class*="tablet stackable"].table > tfoot > tr > td@{notRowSpanned},
+        .ui[class*="tablet stackable"].table > tr > td@{notRowSpanned} {
             display: block !important;
             width: 100% !important;
         }
@@ -1269,9 +1280,9 @@
         .ui.ui.ui.ui.table tr[class*="@{color} colored"],
         .ui.ui.table th[class*="@{color} colored"],
         .ui.ui.table td[class*="@{color} colored"],
-        .ui.ui.ui.ui.table tr.@{color}:not(.marked),
-        .ui.ui.table th.@{color}:not(.marked),
-        .ui.ui.table td.@{color}:not(.marked) {
+        .ui.ui.ui.ui.table tr.@{color}@{notMarked},
+        .ui.ui.table th.@{color}@{notMarked},
+        .ui.ui.table td.@{color}@{notMarked} {
             & when (@stateMarkerWidth > 0) {
                 box-shadow: @stateMarkerWidth 0 0 @r inset;
             }
@@ -1291,9 +1302,9 @@
         .ui.table > thead > tr[class*="@{color} colored"] > th,
         .ui.table > tfoot > tr[class*="@{color} colored"] > th,
         .ui.table > tfoot > tr[class*="@{color} colored"] > td,
-        .ui.table > thead > tr.@{color}:not(.marked) > th,
-        .ui.table > tfoot > tr.@{color}:not(.marked) > th,
-        .ui.table > tfoot > tr.@{color}:not(.marked) > td {
+        .ui.table > thead > tr.@{color}@{notMarked} > th,
+        .ui.table > tfoot > tr.@{color}@{notMarked} > th,
+        .ui.table > tfoot > tr.@{color}@{notMarked} > td {
             background: inherit;
             & when (@isVeryDark) {
                 color: @white;
@@ -1307,18 +1318,18 @@
             .ui.ui.ui.ui.inverted.table tr[class*="@{color} colored"],
             .ui.ui.inverted.table th[class*="@{color} colored"],
             .ui.ui.inverted.table td[class*="@{color} colored"],
-            .ui.ui.ui.ui.inverted.table tr.@{color}:not(.marked),
-            .ui.ui.inverted.table th.@{color}:not(.marked),
-            .ui.ui.inverted.table td.@{color}:not(.marked) {
+            .ui.ui.ui.ui.inverted.table tr.@{color}@{notMarked},
+            .ui.ui.inverted.table th.@{color}@{notMarked},
+            .ui.ui.inverted.table td.@{color}@{notMarked} {
                 background: @c;
                 color: @white;
             }
             .ui.inverted.table > thead > tr[class*="@{color} colored"] > th,
             .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > th,
             .ui.inverted.table > tfoot > tr[class*="@{color} colored"] > td,
-            .ui.inverted.table > thead > tr.@{color}:not(.marked) > th,
-            .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > th,
-            .ui.inverted.table > tfoot > tr.@{color}:not(.marked) > td {
+            .ui.inverted.table > thead > tr.@{color}@{notMarked} > th,
+            .ui.inverted.table > tfoot > tr.@{color}@{notMarked} > th,
+            .ui.inverted.table > tfoot > tr.@{color}@{notMarked} > td {
                 background: inherit;
                 color: @white;
             }
@@ -1327,9 +1338,9 @@
             .ui.ui.selectable.table tr[class*="@{color} colored"]:hover,
             .ui.table tr td.selectable[class*="@{color} colored"]:hover,
             .ui.selectable.table tr:hover td[class*="@{color} colored"],
-            .ui.ui.selectable.table tr.@{color}:not(.marked):hover,
-            .ui.table tr td.selectable.@{color}:not(.marked):hover,
-            .ui.selectable.table tr:hover td.@{color}:not(.marked) {
+            .ui.ui.selectable.table tr.@{color}@{notMarked}:hover,
+            .ui.table tr td.selectable.@{color}@{notMarked}:hover,
+            .ui.selectable.table tr:hover td.@{color}@{notMarked} {
                 & when (@isDark) {
                     background: @lh;
                 }
@@ -1347,9 +1358,9 @@
                 .ui.ui.inverted.selectable.table tr[class*="@{color} colored"]:hover,
                 .ui.inverted.table tr td.selectable[class*="@{color} colored"]:hover,
                 .ui.inverted.selectable.table tr:hover td[class*="@{color} colored"],
-                .ui.ui.inverted.selectable.table tr.@{color}:not(.marked):hover,
-                .ui.inverted.table tr td.selectable.@{color}:not(.marked):hover,
-                .ui.inverted.selectable.table tr:hover td.@{color}:not(.marked) {
+                .ui.ui.inverted.selectable.table tr.@{color}@{notMarked}:hover,
+                .ui.inverted.table tr td.selectable.@{color}@{notMarked}:hover,
+                .ui.inverted.selectable.table tr:hover td.@{color}@{notMarked} {
                     & when (@isDark) {
                         background: @bh;
                     }
@@ -1564,7 +1575,7 @@
     .ui.sortable.table > thead > tr > th:hover {
         color: @sortableHoverColor;
     }
-    .ui.sortable.table:not(.basic) > thead > tr > th:hover {
+    .ui.sortable.table@{notBasic} > thead > tr > th:hover {
         background: @sortableHoverBackground;
     }
 
@@ -1572,7 +1583,7 @@
     .ui.sortable.table thead th.sorted {
         color: @sortableActiveColor;
     }
-    .ui.sortable.table:not(.basic) thead th.sorted {
+    .ui.sortable.table@{notBasic} thead th.sorted {
         background: @sortableActiveBackground;
     }
     .ui.sortable.table thead th.sorted::after {
@@ -1583,7 +1594,7 @@
     .ui.sortable.table thead th.sorted:hover {
         color: @sortableActiveHoverColor;
     }
-    .ui.sortable.table:not(.basic) thead th.sorted:hover {
+    .ui.sortable.table@{notBasic} thead th.sorted:hover {
         background: @sortableActiveHoverBackground;
     }
     & when (@variationTableInverted) {
@@ -1591,16 +1602,16 @@
         .ui.inverted.sortable.table thead th.sorted {
             color: @sortableInvertedActiveColor;
         }
-        .ui.inverted.sortable.table:not(.basic) thead th.sorted {
+        .ui.inverted.sortable.table@{notBasic} thead th.sorted {
             background: @sortableInvertedActiveBackground;
         }
         .ui.inverted.sortable.table > thead > tr > th:hover {
             color: @sortableInvertedHoverColor;
         }
-        .ui.inverted.sortable.table:not(.basic) > thead > tr > th:hover {
+        .ui.inverted.sortable.table@{notBasic} > thead > tr > th:hover {
             background: @sortableInvertedHoverBackground;
         }
-        .ui.inverted.sortable.table:not(.basic) > thead > tr > th {
+        .ui.inverted.sortable.table@{notBasic} > thead > tr > th {
             border-left-color: @sortableInvertedBorderColor;
             border-right-color: @sortableInvertedBorderColor;
         }
@@ -1653,8 +1664,8 @@
     }
     & when (@variationTableDefinition) {
         /* Definition */
-        .ui.inverted.definition.table > tfoot:not(.full-width) > tr > th:first-child,
-        .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child {
+        .ui.inverted.definition.table > tfoot@{notFullWidth} > tr > th:first-child,
+        .ui.inverted.definition.table > thead@{notFullWidth} > tr > th:first-child {
             background: @definitionPageBackground;
         }
         .ui.inverted.definition.table > tbody > tr > td:first-child,
@@ -1715,33 +1726,33 @@
         .ui[class*="very basic"].table {
             border: none;
         }
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td {
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tr > th,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > thead > tr > th,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tbody > tr > th,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tfoot > tr > th,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tr > td,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tbody > tr > td {
             padding: @basicTableCellPadding;
         }
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child {
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tr > th:first-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > thead > tr > th:first-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tbody > tr > th:first-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tfoot > tr > th:first-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tr > td:first-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tbody > tr > td:first-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tfoot > tr > td:first-child {
             padding-left: 0;
         }
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child,
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:last-child {
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tr > th:last-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > thead > tr > th:last-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tbody > tr > th:last-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tfoot > tr > th:last-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tr > td:last-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tbody > tr > td:last-child,
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > tfoot > tr > td:last-child {
             padding-right: 0;
         }
-        .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th {
+        .ui[class*="very basic"].table@{notSortable}@{notStriped} > thead > tr:first-child > th {
             padding-top: 0;
         }
     }
@@ -1857,7 +1868,7 @@
          Stuck
     --------------- */
 
-    .ui.stuck.table:not(.inverted) {
+    .ui.stuck.table@{notInverted} {
         background: @stuckBackground;
         & > thead > tr {
             background: @stuckHeaderBackground;

package/src/definitions/elements/button.less

@@ -17,6 +17,18 @@
 
 @import (multiple) "../../theme.config";
 
+@notIcon: if(@variationButtonIcon, e(":not(.icon)"));
+@notAnimated: if(@variationButtonAnimated, e(":not(.animated)"));
+@notLabeled: if(@variationButtonLabeled, e(":not(.labeled)"));
+@notCompact: if(@variationButtonCompact, e(":not(.compact)"));
+@notSpaced: if(@variationButtonSpaced, e(":not(.spaced)"));
+@notCircular: if(@variationButtonCircular, e(":not(.circular)"));
+@notVertical: if(@variationButtonVertical, e(":not(.vertical)"));
+@notInverted: if(@variationButtonInverted, e(":not(.inverted)"));
+@notBasic: if(@variationButtonBasic, e(":not(.basic)"));
+@notAttached: if(@variationButtonAttached, e(":not(.attached)"));
+@notWrapping: if(@variationButtonWrapping, e(":not(.wrapping)"));
+
 /*******************************
             Button
 *******************************/
@@ -166,10 +178,10 @@
         }
     }
     & when (@variationButtonBasic) {
-        .ui.basic.loading.button:not(.inverted)::before {
+        .ui.basic.loading.button@{notInverted}::before {
             border-color: @loaderFillColor;
         }
-        .ui.basic.loading.button:not(.inverted)::after {
+        .ui.basic.loading.button@{notInverted}::after {
             border-color: @loaderLineColor;
         }
     }
@@ -179,7 +191,7 @@
           Disabled
     -------------------- */
 
-    .ui.buttons .disabled.button:not(.basic),
+    .ui.buttons .disabled.button@{notBasic},
     .ui.disabled.button,
     .ui.button:disabled,
     .ui.disabled.button:hover,
@@ -377,7 +389,7 @@
         Labeled Button
     -------------------- */
 
-    .ui.labeled.button:not(.icon) {
+    .ui.labeled.button@{notIcon} {
         display: inline-flex;
         flex-direction: row;
         background: none;
@@ -621,15 +633,15 @@
     color: @iconColor;
 }
 
-.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
-.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
+.ui.button@{notIcon} > .icon:not(.button):not(.dropdown),
+.ui.button@{notIcon} > .icons:not(.button):not(.dropdown) {
     margin: @iconMargin;
     vertical-align: @iconVerticalAlign;
 }
-.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
+.ui.button@{notIcon} > .icons:not(.button):not(.dropdown) > .icon {
     vertical-align: @iconVerticalAlign;
 }
-.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
+.ui.button@{notIcon} > .right.icon:not(.button):not(.dropdown) {
     margin: @rightIconMargin;
 }
 
@@ -737,7 +749,7 @@
     --------------- */
 
     .ui.icon.buttons .button,
-    .ui.icon.button:not(.animated):not(.compact):not(.labeled) {
+    .ui.icon.button@{notAnimated}@{notCompact}@{notLabeled} {
         padding: @verticalPadding @verticalPadding (@verticalPadding + @shadowOffset);
     }
     .ui.animated.icon.button > .content > .icon,
@@ -873,7 +885,7 @@
 
     & when (@variationButtonGroups) {
         /* Basic Group */
-        .ui.basic.buttons:not(.inverted) .button:not(.basic) {
+        .ui.basic.buttons@{notInverted} .button@{notBasic} {
             border-right: @basicGroupBorder;
             box-shadow: none;
         }
@@ -885,7 +897,7 @@
                 border-top: @basicGroupBorder;
             }
 
-            .ui.basic.vertical.buttons:not(.spaced):not(.circular) .button:first-child {
+            .ui.basic.vertical.buttons@{notSpaced}@{notCircular} .button:first-child {
                 border-top: none;
             }
         }
@@ -1107,7 +1119,7 @@
         vertical-align: baseline;
     }
 
-    .ui.circular.buttons:not(.vertical):not(.spaced) .button {
+    .ui.circular.buttons@{notVertical}@{notSpaced} .button {
         margin-right: @circularGroupMargin;
     }
 
@@ -1827,7 +1839,7 @@
                 box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset;
                 color: @@_backgroundColorDown;
             }
-            .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) {
+            .ui.buttons@{notVertical} > .basic.@{consequence}.button:not(:first-child) {
                 margin-left: -@basicColoredBorderSize;
             }
         }
@@ -1847,7 +1859,7 @@
         margin: @verticalMargin @horizontalMargin 0 0;
     }
 
-    .ui.buttons:not(.basic):not(.inverted) {
+    .ui.buttons@{notBasic}@{notInverted} {
         box-shadow: @groupBoxShadow;
     }
 
@@ -1867,7 +1879,7 @@
         margin: @groupButtonOffset;
     }
 
-    .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
+    .ui.buttons@{notBasic}@{notInverted} > .button@{notBasic}@{notInverted} {
         box-shadow: @groupButtonBoxShadow;
     }
 
@@ -1895,7 +1907,7 @@
             width: 100%;
             margin: @verticalGroupOffset;
             border-radius: 0;
-            &:not(.basic) {
+            &@{notBasic} {
                 box-shadow: @verticalBoxShadow;
             }
         }
@@ -1943,7 +1955,7 @@
         }
     }
     & when (@variationButtonWrapped) {
-        .ui.wrapped.buttons:not(.spaced) {
+        .ui.wrapped.buttons@{notSpaced} {
             border-top-right-radius: 0;
             & .button {
                 &:first-child {
@@ -1991,7 +2003,7 @@
                 }
             }
             & when (@variationButtonWrapping) {
-                .ui.spaced.basic.wrapping.buttons .button:not(.basic) {
+                .ui.spaced.basic.wrapping.buttons .button@{notBasic} {
                     border-top: @basicGroupBorder;
                     border-right: @basicGroupBorder;
                     &:first-child {
@@ -2009,22 +2021,22 @@
     }
 
     & when (@variationButtonBasic) {
-        .ui.basic.buttons:not(.vertical).inverted .button,
-        .ui.basic.buttons:not(.vertical) .basic.button {
+        .ui.basic.buttons@{notVertical}.inverted .button,
+        .ui.basic.buttons@{notVertical} .basic.button {
             margin-left: -@basicColoredBorderSize;
             border-right: none;
         }
-        .ui.basic.buttons:not(.vertical):not(.spaced):not(.inverted) .basic.button {
+        .ui.basic.buttons@{notVertical}@{notSpaced}@{notInverted} .basic.button {
             margin-top: -@basicColoredBorderSize;
             border-bottom: none;
         }
         & when (@variationButtonAttached) or (@variationButtonInverted) {
-            .ui.inverted.basic.buttons:not(.spaced) .button,
-            .ui.attached.basic.buttons:not(.wrapping):not(.inverted) .basic.button {
+            .ui.inverted.basic.buttons@{notSpaced} .button,
+            .ui.attached.basic.buttons@{notWrapping}@{notInverted} .basic.button {
                 margin-bottom: @attachedOffset;
             }
         }
-        .ui.basic.buttons:not(.vertical):not(.attached):not(.spaced):not(.wrapping):not(.inverted) .basic.button {
+        .ui.basic.buttons@{notVertical}@{notAttached}@{notSpaced}@{notWrapping}@{notInverted} .basic.button {
             margin-bottom: -@basicColoredBorderSize;
         }
     }

package/src/definitions/elements/container.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notFluid: if(@variationContainerFluid, e(":not(.fluid)"));
+
 /*******************************
             Container
 *******************************/
@@ -29,7 +31,7 @@
 
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
-    .ui.ui.ui.container:not(.fluid) {
+    .ui.ui.ui.container@{notFluid} {
         width: @mobileWidth;
         margin-left: @mobileGutter;
         margin-right: @mobileGutter;
@@ -53,7 +55,7 @@
 
 /* Tablet */
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-    .ui.ui.ui.container:not(.fluid) {
+    .ui.ui.ui.container@{notFluid} {
         width: @tabletWidth;
         margin-left: @tabletGutter;
         margin-right: @tabletGutter;
@@ -77,7 +79,7 @@
 
 /* Small Monitor */
 @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-    .ui.ui.ui.container:not(.fluid) {
+    .ui.ui.ui.container@{notFluid} {
         width: @computerWidth;
         margin-left: @computerGutter;
         margin-right: @computerGutter;
@@ -101,7 +103,7 @@
 
 /* Large Monitor */
 @media only screen and (min-width: @largeMonitorBreakpoint) {
-    .ui.ui.ui.container:not(.fluid) {
+    .ui.ui.ui.container@{notFluid} {
         width: @largeMonitorWidth;
         margin-left: @largeMonitorGutter;
         margin-right: @largeMonitorGutter;

package/src/definitions/elements/divider.less

@@ -17,6 +17,9 @@
 
 @import (multiple) "../../theme.config";
 
+@notHorizontal: if(@variationDividerHorizontal, e(":not(.horizontal)"));
+@notVertical: if(@variationDividerVertical, e(":not(.vertical)"));
+
 /*******************************
             Divider
 *******************************/
@@ -37,7 +40,7 @@
       Basic
 --------------- */
 
-.ui.divider:not(.vertical):not(.horizontal) {
+.ui.divider@{notVertical}@{notHorizontal} {
     border-top: @shadowWidth @borderStyle @shadowColor;
     border-bottom: @highlightWidth @borderStyle @highlightColor;
 }