fomantic-ui 2.9.4-beta.10 → 2.9.4-beta.101

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) .button:first-child {
+            .ui.basic.vertical.buttons@{notSpaced}@{notCircular} .button:first-child {
                 border-top: none;
             }
         }
@@ -1095,15 +1107,39 @@
     /* --------------
         Circular
     --------------- */
-
-    .ui.circular.button {
+    .ui.ui.circular.buttons .button,
+    .ui.ui.ui.ui.circular.button {
         border-radius: @circularBorderRadius;
+        min-width: @circularMinWidth;
     }
 
+    .ui.circular.buttons .button > .icon,
     .ui.circular.button > .icon {
         width: @circularIconWidth;
         vertical-align: baseline;
     }
+
+    .ui.circular.buttons@{notVertical}@{notSpaced} .button {
+        margin-right: @circularGroupMargin;
+    }
+
+    & when (@variationButtonVertical) {
+        .ui.vertical.circular.buttons .button {
+            margin-bottom: @circularVerticalGroupMargin;
+        }
+    }
+
+    & when (@variationButtonBasic) {
+        .ui.circular.basic.buttons {
+            border: none;
+            & .button {
+                border: @basicGroupBorder;
+                &.basic {
+                    border: none;
+                }
+            }
+        }
+    }
 }
 
 & when (@variationButtonOr) {
@@ -1803,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;
             }
         }
@@ -1823,7 +1859,7 @@
         margin: @verticalMargin @horizontalMargin 0 0;
     }
 
-    .ui.buttons:not(.basic):not(.inverted) {
+    .ui.buttons@{notBasic}@{notInverted} {
         box-shadow: @groupBoxShadow;
     }
 
@@ -1843,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;
     }
 
@@ -1871,7 +1907,7 @@
             width: 100%;
             margin: @verticalGroupOffset;
             border-radius: 0;
-            &:not(.basic) {
+            &@{notBasic} {
                 box-shadow: @verticalBoxShadow;
             }
         }
@@ -1919,7 +1955,7 @@
         }
     }
     & when (@variationButtonWrapped) {
-        .ui.wrapped.buttons:not(.spaced) {
+        .ui.wrapped.buttons@{notSpaced} {
             border-top-right-radius: 0;
             & .button {
                 &:first-child {
@@ -1967,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 {
@@ -1985,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;
 }

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;
 }
 
@@ -184,6 +190,7 @@ a.ui.label {
              Types
 *******************************/
 & when (@variationLabelImage) {
+    .ui.image.labels .label,
     .ui.image.label {
         width: auto;
         margin-top: 0;
@@ -195,10 +202,14 @@ a.ui.label {
         padding: @imageLabelPadding;
         border-radius: @imageLabelBorderRadius;
         box-shadow: @imageLabelBoxShadow;
-        &.attached:not(.basic) when (@variationLabelAttached) {
+        &.attached@{notBasic} when (@variationLabelAttached) {
             padding: @imageLabelPadding;
         }
     }
+    .ui.labels .image.label,
+    .ui.image.labels .label {
+        margin-bottom: @groupVerticalMargin;
+    }
 
     .ui.image.label img {
         display: inline-block;
@@ -637,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) {