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

package/src/definitions/elements/emoji.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notDisabled: if(@variationEmojiDisabled, e(":not(.disabled)"));
+
 /*******************************
              Emoji
 *******************************/
@@ -63,7 +65,7 @@ em[data-emoji]::before {
              Link
     -------------------- */
 
-    em[data-emoji].link:not(.disabled) {
+    em[data-emoji].link@{notDisabled} {
         cursor: pointer;
     }
 }

package/src/definitions/elements/header.less

@@ -17,6 +17,9 @@
 
 @import (multiple) "../../theme.config";
 
+@notCenteredAligned: if(@variationHeaderAligned, e(":not(.centered):not(.aligned)"));
+@notIcon: if(@variationHeaderIcon, e(":not(.icon)"));
+
 /*******************************
             Header
 *******************************/
@@ -70,8 +73,8 @@
 }
 
 /* With Text Node */
-.ui.header:not(.icon) > .icons:only-child,
-.ui.header:not(.icon) > i.icon:only-child {
+.ui.header@{notIcon} > .icons:only-child,
+.ui.header@{notIcon} > i.icon:only-child {
     display: inline-block;
     padding: 0;
     margin-right: @iconMargin;
@@ -111,8 +114,8 @@
 }
 
 /* After Icon */
-.ui.header:not(.icon):not(.centered):not(.aligned) > .icons + .content,
-.ui.header:not(.icon):not(.centered):not(.aligned) > i.icon + .content {
+.ui.header@{notIcon}@{notCenteredAligned} > .icons + .content,
+.ui.header@{notIcon}@{notCenteredAligned} > i.icon + .content {
     padding-left: @iconMargin;
     display: table-cell;
     vertical-align: @contentIconAlignment;

package/src/definitions/elements/icon.less

@@ -17,6 +17,13 @@
 
 @import (multiple) "../../theme.config";
 
+@notDisabled: if(@variationIconDisabled, e(":not(.disabled)"));
+@notCorner: if(@variationIconCorner, e(":not(.corner)"));
+@notRotated: if(@variationIconRotated, e(":not(.rotated)"));
+@notFlipped: if(@variationIconFlipped, e(":not(.flipped)"));
+@notBordered: if(@variationIconBordered, e(":not(.bordered)"));
+@notCircular: if(@variationIconCircular, e(":not(.circular)"));
+
 /*******************************
              Icon
 *******************************/
@@ -78,8 +85,8 @@ i.icon:hover,
 i.icons:hover,
 i.icon:active,
 i.icons:active,
-i.emphasized.icon:not(.disabled),
-i.emphasized.icons:not(.disabled) {
+i.emphasized.icon@{notDisabled},
+i.emphasized.icons@{notDisabled} {
     opacity: 1;
 }
 
@@ -113,8 +120,8 @@ i.emphasized.icons:not(.disabled) {
              Link
     -------------------- */
 
-    i.link.icon:not(.disabled),
-    i.link.icons:not(.disabled) {
+    i.link.icon@{notDisabled},
+    i.link.icons@{notDisabled} {
         cursor: pointer;
         opacity: @linkOpacity;
         transition: opacity @defaultDuration @defaultEasing;
@@ -163,11 +170,11 @@ i.emphasized.icons:not(.disabled) {
     }
 
     & when (@variationIconGroups) {
-        .icons i.flipped.icon:not(.corner):not(:first-child),
-        .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.flipped.icon@{notCorner}:not(:first-child),
+        .icons i.horizontally.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(-1, 1);
         }
-        .icons i.vertically.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.vertically.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(1, -1);
         }
     }
@@ -194,16 +201,16 @@ i.emphasized.icons:not(.disabled) {
     }
 
     & when (@variationIconGroups) {
-        .icons i.rotated.rotated.icon:not(.corner):not(:first-child),
-        .icons i.right.rotated.icon:not(.corner):not(:first-child),
-        .icons i.clockwise.rotated.icon:not(.corner):not(:first-child) {
+        .icons i.rotated.rotated.icon@{notCorner}:not(:first-child),
+        .icons i.right.rotated.icon@{notCorner}:not(:first-child),
+        .icons i.clockwise.rotated.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) rotate(90deg);
         }
-        .icons i.left.rotated.icon:not(.corner):not(:first-child),
-        .icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) {
+        .icons i.left.rotated.icon@{notCorner}:not(:first-child),
+        .icons i.counterclockwise.rotated.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) rotate(-90deg);
         }
-        .icons i.halfway.rotated.icon:not(.corner):not(:first-child) {
+        .icons i.halfway.rotated.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) rotate(180deg);
         }
     }
@@ -245,28 +252,28 @@ i.emphasized.icons:not(.disabled) {
     }
 
     & when (@variationIconGroups) {
-        .icons i.rotated.flipped.icon:not(.corner):not(:first-child),
-        .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child),
-        .icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.rotated.flipped.icon@{notCorner}:not(:first-child),
+        .icons i.right.rotated.flipped.icon@{notCorner}:not(:first-child),
+        .icons i.clockwise.rotated.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg);
         }
-        .icons i.left.rotated.flipped.icon:not(.corner):not(:first-child),
-        .icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.left.rotated.flipped.icon@{notCorner}:not(:first-child),
+        .icons i.counterclockwise.rotated.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg);
         }
-        .icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.halfway.rotated.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg);
         }
-        .icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
-        .icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
-        .icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.rotated.vertically.flipped.icon@{notCorner}:not(:first-child),
+        .icons i.right.rotated.vertically.flipped.icon@{notCorner}:not(:first-child),
+        .icons i.clockwise.rotated.vertically.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg);
         }
-        .icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
-        .icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.left.rotated.vertically.flipped.icon@{notCorner}:not(:first-child),
+        .icons i.counterclockwise.rotated.vertically.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg);
         }
-        .icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+        .icons i.halfway.rotated.vertically.flipped.icon@{notCorner}:not(:first-child) {
             transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg);
         }
     }
@@ -383,7 +390,7 @@ i.icons {
         top: 50%;
         left: 50%;
         margin: 0;
-        &:not(.corner):not(.rotated):not(.flipped) {
+        &@{notCorner}@{notRotated}@{notFlipped} {
             transform: translateX(-50%) translateY(-50%);
         }
     }
@@ -394,7 +401,7 @@ i.icons {
         height: auto;
         vertical-align: top;
     }
-    i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) {
+    i.icons@{notBordered}@{notCircular} .icon:first-child@{notRotated}@{notFlipped} {
         transform: none;
     }
 
@@ -407,7 +414,7 @@ i.icons {
             bottom: @cornerOffset;
             font-size: @cornerIconSize;
             text-shadow: @cornerIconShadow;
-            &:not(.rotated):not(.flipped) {
+            &@{notRotated}@{notFlipped} {
                 transform: none;
             }
         }

package/src/definitions/elements/input.less

@@ -17,6 +17,14 @@
 
 @import (multiple) "../../theme.config";
 
+@notCorner: if(@variationInputCorner, e(":not(.corner)"));
+@notAction: if(@variationInputAction, e(":not(.action)"));
+@notDisabled: if(@variationInputDisabled, e(":not(.disabled)"));
+
+@notBasic: if(@variationButtonBasic, e(":not(.basic)"));
+@notTertiary: if(@variationButtonTertiary, e(":not(.tertiary)"));
+@notLink: if(@variationIconLink, e(":not(.link)"));
+
 /*******************************
            Standard
 *******************************/
@@ -83,12 +91,12 @@
     --------------------- */
 
     .ui.disabled.input,
-    .ui.input:not(.disabled) input[disabled] {
+    .ui.input@{notDisabled} input[disabled] {
         opacity: @disabledOpacity;
     }
 
     .ui.disabled.input > input,
-    .ui.input:not(.disabled) input[disabled] {
+    .ui.input@{notDisabled} input[disabled] {
         pointer-events: @disabledPointerEvents;
     }
 }
@@ -275,11 +283,11 @@
         border-radius: 0 @borderRadius @borderRadius 0;
         transition: @iconTransition;
     }
-    .ui.icon.input > i.icon:not(.link) {
+    .ui.icon.input > i.icon@{notLink} {
         pointer-events: none;
     }
-    .ui.ui.ui.ui.icon.input:not(.corner) > textarea,
-    .ui.ui.ui.ui.icon.input:not(.corner) > input {
+    .ui.ui.ui.ui.icon.input@{notCorner} > textarea,
+    .ui.ui.ui.ui.icon.input@{notCorner} > input {
         padding-right: @iconMargin;
     }
 
@@ -314,8 +322,8 @@
     .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input {
         padding-left: @iconMargin;
     }
-    .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea,
-    .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input {
+    .ui.ui.ui.ui[class*="left icon"]@{notCorner}.input > textarea,
+    .ui.ui.ui.ui[class*="left icon"]@{notCorner}.input > input {
         padding-right: @horizontalPadding;
     }
 
@@ -338,7 +346,7 @@
         margin: 0;
         font-size: @relativeMedium;
     }
-    .ui.labeled.input > .label:not(.corner) {
+    .ui.labeled.input > .label@{notCorner} {
         padding-top: @verticalPadding;
         padding-bottom: @verticalPadding;
     }
@@ -639,7 +647,7 @@
     }
 
     .ui.form .field > input[type="file"],
-    .ui.file.input:not(.action) input[type="file"] {
+    .ui.file.input@{notAction} input[type="file"] {
         padding: 0;
     }
 
@@ -720,8 +728,8 @@
         position: absolute;
     }
 
-    input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary),
-    .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) {
+    input[type="file"].ui.file.input:focus + label.ui.button@{notBasic}@{notTertiary},
+    .ui.file.input input[type="file"]:focus + label.ui.button@{notBasic}@{notTertiary} {
         background: @fileButtonBackgroundHover;
         color: @hoveredTextColor;
         &.inverted {
@@ -736,8 +744,8 @@
             @h: @colors[@@color][hover];
             @lh: @colors[@@color][lightHover];
 
-            input[type="file"].ui.file.input:focus + label.ui.@{color}.button:not(.basic):not(.tertiary),
-            .ui.file.input input[type="file"]:focus + label.ui.@{color}.button:not(.basic):not(.tertiary) {
+            input[type="file"].ui.file.input:focus + label.ui.@{color}.button@{notBasic}@{notTertiary},
+            .ui.file.input input[type="file"]:focus + label.ui.@{color}.button@{notBasic}@{notTertiary} {
                 background-color: @h;
                 color: @white;
                 &.inverted when (@variationButtonInverted) {

package/src/definitions/elements/label.less

@@ -17,6 +17,12 @@
 
 @import (multiple) "../../theme.config";
 
+@notTag: if(@variationLabelTag, e(":not(.tag)"));
+@notImage: if(@variationLabelImage, e(":not(.image)"));
+@notRibbon: if(@variationLabelRibbon, e(":not(.ribbon)"));
+
+@notBasic: if(@variationSegmentBasic, e(":not(.basic)"));
+
 /*******************************
             Label
 *******************************/
@@ -164,19 +170,19 @@ a.ui.label {
     margin-bottom: @attachedSegmentPadding !important;
 }
 
-.ui.segment:not(.basic) > .ui.top.attached.label {
+.ui.segment@{notBasic} > .ui.top.attached.label {
     margin-top: @attachedOffset;
 }
-.ui.segment:not(.basic) > .ui.bottom.attached.label {
+.ui.segment@{notBasic} > .ui.bottom.attached.label {
     margin-bottom: @attachedOffset;
 }
-.ui.segment:not(.basic) > .ui.attached.label:not(.right) {
+.ui.segment@{notBasic} > .ui.attached.label:not(.right) {
     margin-left: @attachedOffset;
 }
-.ui.segment:not(.basic) > .ui.right.attached.label {
+.ui.segment@{notBasic} > .ui.right.attached.label {
     margin-right: @attachedOffset;
 }
-.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) {
+.ui.segment@{notBasic} > .ui.attached.label:not(.left):not(.right) {
     width: @attachedWidthOffset;
 }
 
@@ -196,7 +202,7 @@ a.ui.label {
         padding: @imageLabelPadding;
         border-radius: @imageLabelBorderRadius;
         box-shadow: @imageLabelBoxShadow;
-        &.attached:not(.basic) when (@variationLabelAttached) {
+        &.attached@{notBasic} when (@variationLabelAttached) {
             padding: @imageLabelPadding;
         }
     }
@@ -642,8 +648,8 @@ a.ui.active.label:hover::before {
         padding-bottom: @basicVerticalPadding;
         padding-right: @basicHorizontalPadding;
     }
-    .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
-    .ui.basic.label:not(.tag):not(.image):not(.ribbon) {
+    .ui.basic.labels@{notTag}@{notImage}@{notRibbon} .label,
+    .ui.basic.label@{notTag}@{notImage}@{notRibbon} {
         padding-left: @basicHorizontalPadding;
     }
     & when (@variationLabelImage) {

package/src/definitions/elements/list.less

@@ -17,6 +17,13 @@
 
 @import (multiple) "../../theme.config";
 
+@notSelection: if(@variationListSelection, e(":not(.selection)"));
+@notIcon: if(@variationListIcon, e(":not(.icon)"));
+@notHorizontal: if(@variationListHorizontal, e(":not(.horizontal)"));
+@notCelled: if(@variationListCelled, e(":not(.celled)"));
+
+@notLoading: if(@variationIconLoading, e(":not(.loading)"));
+
 /*******************************
             List
 *******************************/
@@ -87,7 +94,7 @@ ol.ui.list li:last-child,
 /* Child List */
 ul.ui.list ul,
 ol.ui.list ol,
-.ui.list .list:not(.icon) {
+.ui.list .list@{notIcon} {
     clear: both;
     margin: 0;
     padding: @childListPadding;
@@ -110,7 +117,7 @@ ol.ui.list ol li,
         margin: 0;
         padding-top: @iconOffset;
         transition: @iconTransition;
-        &:not(.loading) {
+        &@{notLoading} {
             padding-right: @iconDistance;
             vertical-align: @iconContentVerticalAlign;
         }
@@ -312,11 +319,11 @@ ol.ui.list ol li,
         margin-right: @horizontalSpacing;
         font-size: 1rem;
     }
-    .ui.horizontal.list:not(.celled) > .item:last-child {
+    .ui.horizontal.list@{notCelled} > .item:last-child {
         margin-right: 0;
         padding-right: 0;
     }
-    .ui.horizontal.list .list:not(.icon) {
+    .ui.horizontal.list .list@{notIcon} {
         padding-left: 0;
         padding-bottom: 0;
     }
@@ -585,7 +592,7 @@ ol.ui.list ol li,
     .ui.animated.list > .item {
         transition: @animatedListTransition;
     }
-    .ui.animated.list:not(.horizontal) > .item:hover {
+    .ui.animated.list@{notHorizontal} > .item:hover {
         padding-left: @animatedListIndent;
     }
 }
@@ -594,8 +601,8 @@ ol.ui.list ol li,
     /* -------------------
            Fitted
     -------------------- */
-    .ui.fitted.list:not(.selection) .list > .item,
-    .ui.fitted.list:not(.selection) > .item {
+    .ui.fitted.list@{notSelection} .list > .item,
+    .ui.fitted.list@{notSelection} > .item {
         padding-left: 0;
         padding-right: 0;
     }
@@ -643,7 +650,7 @@ ol.ui.list ol li,
     }
 
     ul.ui.list ul,
-    .ui.bulleted.list .list:not(.icon) {
+    .ui.bulleted.list .list@{notIcon} {
         padding-left: @bulletChildDistance;
     }
 
@@ -679,7 +686,7 @@ ol.ui.list ol li,
 
     ol.ui.list,
     .ui.ordered.list,
-    .ui.ordered.list .list:not(.icon),
+    .ui.ordered.list .list@{notIcon},
     ol.ui.list ol {
         counter-reset: @orderedCountName;
         margin-left: @orderedCountDistance;
@@ -727,7 +734,7 @@ ol.ui.list ol li,
 
     /* Child Lists */
     ol.ui.list ol,
-    .ui.ordered.list .list:not(.icon) {
+    .ui.ordered.list .list@{notIcon} {
         margin-left: @orderedChildCountDistance;
     }
     ol.ui.list ol li::before,
@@ -779,18 +786,18 @@ ol.ui.list ol li,
     }
 
     /* Sub Menu */
-    .ui.divided.list:not(.horizontal) .list > .item:first-child {
+    .ui.divided.list@{notHorizontal} .list > .item:first-child {
         border-top-width: @dividedBorderWidth;
     }
 
     & when (@variationListBulleted) {
         /* Divided bulleted */
-        .ui.divided.bulleted.list:not(.horizontal),
-        .ui.divided.bulleted.list .list:not(.icon) {
+        .ui.divided.bulleted.list@{notHorizontal},
+        .ui.divided.bulleted.list .list@{notIcon} {
             margin-left: 0;
             padding-left: 0;
         }
-        .ui.divided.bulleted.list > .item:not(.horizontal) {
+        .ui.divided.bulleted.list > .item@{notHorizontal} {
             padding-left: @bulletDistance;
         }
     }
@@ -804,7 +811,7 @@ ol.ui.list ol li,
         .ui.divided.ordered.list > .item {
             padding-left: @orderedCountDistance;
         }
-        .ui.divided.ordered.list .item .list:not(.icon) {
+        .ui.divided.ordered.list .item .list@{notIcon} {
             margin-left: 0;
             margin-right: 0;
             padding-bottom: @itemVerticalPadding;
@@ -896,7 +903,7 @@ ol.ui.list ol li,
         .ui.celled.bulleted.list > .item {
             padding-left: (@bulletDistance);
         }
-        .ui.celled.bulleted.list .item .list:not(.icon) {
+        .ui.celled.bulleted.list .item .list@{notIcon} {
             margin-left: -(@bulletDistance);
             margin-right: -(@bulletDistance);
             padding-bottom: @itemVerticalPadding;
@@ -912,7 +919,7 @@ ol.ui.list ol li,
         .ui.celled.ordered.list > .item {
             padding-left: @orderedCountDistance;
         }
-        .ui.celled.ordered.list .item .list:not(.icon) {
+        .ui.celled.ordered.list .item .list@{notIcon} {
             margin-left: 0;
             margin-right: 0;
             padding-bottom: @itemVerticalPadding;
@@ -961,10 +968,10 @@ ol.ui.list ol li,
            Relaxed
     -------------------- */
 
-    .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
+    .ui.relaxed.list@{notHorizontal} > .item:not(:first-child) {
         padding-top: @relaxedItemVerticalPadding;
     }
-    .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
+    .ui.relaxed.list@{notHorizontal} > .item:not(:last-child) {
         padding-bottom: @relaxedItemVerticalPadding;
     }
 
@@ -980,10 +987,10 @@ ol.ui.list ol li,
     }
     & when (@variationListVeryRelaxed) {
         /* Very Relaxed */
-        .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
+        .ui[class*="very relaxed"].list@{notHorizontal} > .item:not(:first-child) {
             padding-top: @veryRelaxedItemVerticalPadding;
         }
-        .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
+        .ui[class*="very relaxed"].list@{notHorizontal} > .item:not(:last-child) {
             padding-bottom: @veryRelaxedItemVerticalPadding;
         }
 

package/src/definitions/elements/loader.less

@@ -17,6 +17,9 @@
 
 @import (multiple) "../../theme.config";
 
+@notElastic: if(@variationLoaderElastic, e(":not(.elastic)"));
+@notDouble: if(@variationLoaderDouble, e(":not(.double)"));
+
 /*******************************
             Loader
 *******************************/
@@ -97,7 +100,7 @@
 .ui.dimmer > .ui.loader {
     color: @invertedLoaderTextColor;
 }
-.ui.dimmer > .ui.loader:not(.elastic)::before {
+.ui.dimmer > .ui.loader@{notElastic}::before {
     border-color: @invertedLoaderFillColor;
 }
 
@@ -105,7 +108,7 @@
 .ui.inverted.dimmer > .ui.loader {
     color: @loaderTextColor;
 }
-.ui.inverted.dimmer > .ui.loader:not(.elastic)::before {
+.ui.inverted.dimmer > .ui.loader@{notElastic}::before {
     border-color: @loaderFillColor;
 }
 
@@ -246,8 +249,10 @@
 .ui.elastic.basic.loading.button::after {
     color: @loaderLineColor;
 }
-.ui.ui.ui.ui.double.loading.button::after {
-    border-bottom-color: currentColor;
+& when (@variationLoaderDouble) {
+    .ui.ui.ui.ui.double.loading.button::after {
+        border-bottom-color: currentColor;
+    }
 }
 
 & when (@variationLoaderInline) {
@@ -285,10 +290,10 @@
     border-left-color: transparent;
     border-right-color: transparent;
 }
-.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after,
-.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after,
-.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after,
-.ui.ui.ui.ui.ui.ui.loader:not(.double)::after {
+.ui.ui.ui.ui.ui.ui.ui.loading@{notDouble}::after,
+.ui.ui.ui.ui.ui.ui.ui.loading@{notDouble} .input > i.icon::after,
+.ui.ui.ui.ui.ui.ui.ui.loading@{notDouble} > i.icon::after,
+.ui.ui.ui.ui.ui.ui.loader@{notDouble}::after {
     border-bottom-color: transparent;
 }
 .ui.ui.ui.ui.ui.ui.loading.card::after,
@@ -298,10 +303,10 @@
     border-left-color: @loaderFillColor;
     border-right-color: @loaderFillColor;
 }
-.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after,
-.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after,
-.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after,
-.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after {
+.ui.ui.ui.ui.ui.ui.loading.card@{notDouble}::after,
+.ui.ui.ui.ui.ui.ui.loading.segments@{notDouble}::after,
+.ui.ui.ui.ui.ui.ui.loading.segment@{notDouble}::after,
+.ui.ui.ui.ui.ui.ui.loading.form@{notDouble}::after {
     border-bottom-color: @loaderFillColor;
 }
 

package/src/definitions/elements/segment.less

@@ -17,6 +17,11 @@
 
 @import (multiple) "../../theme.config";
 
+@notHorizontal: if(@variationSegmentHorizontal, e(":not(.horizontal)"));
+@notCompact: if(@variationSegmentCompact, e(":not(.compact)"));
+@notInverted: if(@variationSegmentInverted, e(":not(.inverted)"));
+@notBasic: if(@variationSegmentBasic, e(":not(.basic)"));
+
 /*******************************
             Segment
 *******************************/
@@ -413,7 +418,7 @@
         border-top: @groupedSegmentDivider;
     }
 
-    .ui.segments:not(.horizontal) > .segment:first-child {
+    .ui.segments@{notHorizontal} > .segment:first-child {
         top: @attachedTopOffset;
         bottom: 0;
         border-top: none;
@@ -423,7 +428,7 @@
     }
 
     /* Bottom */
-    .ui.segments:not(.horizontal) > .segment:last-child {
+    .ui.segments@{notHorizontal} > .segment:last-child {
         top: @attachedBottomOffset;
         bottom: 0;
         margin-top: 0;
@@ -433,7 +438,7 @@
     }
 
     /* Only */
-    .ui.segments:not(.horizontal) > .segment:only-child {
+    .ui.segments@{notHorizontal} > .segment:only-child {
         border-radius: @borderRadius;
     }
 
@@ -445,7 +450,7 @@
     .ui.segments > .segments:first-child {
         border-top: none;
     }
-    .ui.segments > .segment + .segments:not(.horizontal) {
+    .ui.segments > .segment + .segments@{notHorizontal} {
         margin-top: 0;
     }
 
@@ -477,7 +482,7 @@
         }
 
         /* Horizontal Segment */
-        .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
+        .ui.horizontal.segments@{notCompact} > .segment@{notCompact} {
             flex: 1 1 auto;
             & when (@supportIE) {
                 // https://github.com/Semantic-Org/Semantic-UI/issues/2550
@@ -616,7 +621,7 @@
         @color: @value;
         @c: @colors[@@color][color];
         & when not (@color=primary) and not (@color=secondary) {
-            .ui.ui.ui.ui.ui.@{color}.segment:not(.inverted) {
+            .ui.ui.ui.ui.ui.@{color}.segment@{notInverted} {
                 border-top: @coloredBorderSize solid @c;
             }
             & when (@variationSegmentInverted) {
@@ -755,7 +760,7 @@
         width: @attachedWidth;
         max-width: @attachedWidth;
         box-shadow: @attachedBoxShadow;
-        &:not(.basic) {
+        &@{notBasic} {
             border: @attachedBorder;
         }
     }