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

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;
             }

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;