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

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