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

package/src/definitions/modules/modal.less

@@ -17,6 +17,13 @@
 
 @import (multiple) "../../theme.config";
 
+@notFullscreen: if(@variationModalFullscreen, e(":not(.fullscreen)"));
+@notInside: if(@variationModalCloseInside, e(":not(.inside)"));
+@notAligned: if(@variationModalAligned, e(":not(.aligned)"));
+@notClose: if(@variationModalClose, e(":not(.close)"));
+
+@notFluid: if(@variationButtonFluid, e(":not(.fluid)"));
+
 /*******************************
              Modal
 *******************************/
@@ -37,9 +44,9 @@
     outline: none;
 }
 
-.ui.modal > :first-child:not(.close):not(.dimmer),
+.ui.modal > :first-child@{notClose}:not(.dimmer),
 .ui.modal > i.icon:first-child + *,
-.ui.modal > .dimmer:first-child + *:not(.close),
+.ui.modal > .dimmer:first-child + *@{notClose},
 .ui.modal > .dimmer:first-child + i.icon + * {
     border-top-left-radius: @borderRadius;
     border-top-right-radius: @borderRadius;
@@ -58,27 +65,29 @@
             Content
 *******************************/
 
-/* --------------
-     Close
---------------- */
+& when (@variationModalClose) {
+    /* --------------
+         Close
+    --------------- */
 
-.ui.modal > .close {
-    cursor: pointer;
-    position: absolute;
-    top: @closeTop;
-    right: @closeRight;
-    z-index: 1;
-    opacity: @closeOpacity;
-    font-size: @closeSize;
-    color: @closeColor;
-    width: @closeHitbox;
-    height: @closeHitbox;
-    padding: @closePadding;
-}
-.ui.modal > .close:focus,
-.ui.modal > .close:hover {
-    opacity: 1;
-    outline: none;
+    .ui.modal > .close {
+        cursor: pointer;
+        position: absolute;
+        top: @closeTop;
+        right: @closeRight;
+        z-index: 1;
+        opacity: @closeOpacity;
+        font-size: @closeSize;
+        color: @closeColor;
+        width: @closeHitbox;
+        height: @closeHitbox;
+        padding: @closePadding;
+    }
+    .ui.modal > .close:focus,
+    .ui.modal > .close:hover {
+        opacity: 1;
+        outline: none;
+    }
 }
 
 /* --------------
@@ -172,7 +181,7 @@
         border-top: @actionBorder;
         text-align: @actionAlign;
     }
-    .ui.modal .actions > .button:not(.fluid) {
+    .ui.modal .actions > .button@{notFluid} {
         margin-left: @buttonDistance;
     }
     .ui.ui.modal > .basic.actions,
@@ -182,7 +191,7 @@
     & when (@variationModalLeftActions) {
         .ui.modal > .left.actions {
             text-align: left;
-            & > .button:not(.fluid) {
+            & > .button@{notFluid} {
                 margin-left: @buttonLeftDistance;
                 margin-right: @buttonLeftDistance;
             }
@@ -194,7 +203,7 @@
     .ui.modal > .centered,
     .ui.modal > .center.aligned {
         text-align: center;
-        &.actions > .button:not(.fluid) when (@variationModalActions) {
+        &.actions > .button@{notFluid} when (@variationModalActions) {
             margin-left: @buttonCenteredDistance;
             margin-right: @buttonCenteredDistance;
         }
@@ -207,55 +216,62 @@
 
 /* Modal Width */
 @media only screen and (max-width: @largestMobileScreen) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @mobileWidth;
         margin: @mobileMargin;
     }
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @tabletWidth;
         margin: @tabletMargin;
     }
 }
 @media only screen and (min-width: @computerBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @computerWidth;
         margin: @computerMargin;
-        & > .active.dimmer + .close:not(.inside) {
+        & > .active.dimmer + .close@{notInside} when (@variationModalClose) {
             pointer-events: none;
             opacity: @closeOpacityDimmed;
         }
     }
-    .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
-        text-shadow: @closeShadow;
-    }
-    .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
-        text-shadow: @invertedCloseShadow;
+    & when (@variationModalClose) {
+        .ui.dimmer > .ui.modal@{notFullscreen} > .close@{notInside} {
+            text-shadow: @closeShadow;
+        }
+        & when (@variationDimmerInverted) {
+            .ui.inverted.dimmer > .ui.modal@{notFullscreen} > .close@{notInside} {
+                text-shadow: @invertedCloseShadow;
+            }
+        }
     }
 }
 @media only screen and (min-width: @largeMonitorBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @largeMonitorWidth;
         margin: @largeMonitorMargin;
     }
 }
 @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-    .ui.modal:not(.fullscreen) {
+    .ui.modal@{notFullscreen} {
         width: @widescreenMonitorWidth;
         margin: @widescreenMonitorMargin;
     }
 }
 
-/* Tablet and Mobile */
-@media only screen and (max-width: @largestTabletScreen) {
-    .ui.modal > .close + .header {
-        padding-right: @closeHitbox;
-    }
-    .ui.modal > .close {
-        top: @innerCloseTop;
-        right: @innerCloseRight;
-        color: @innerCloseColor;
+& when (@variationModalClose) {
+    /* Tablet and Mobile */
+    @media only screen and (max-width: @largestTabletScreen) {
+        .ui.modal > .close + .header {
+            padding-right: @closeHitbox;
+        }
+
+        .ui.modal > .close {
+            top: @innerCloseTop;
+            right: @innerCloseRight;
+            color: @innerCloseColor;
+        }
     }
 }
 
@@ -264,8 +280,10 @@
     .ui.modal > .header {
         padding: @mobileHeaderPadding;
     }
-    .ui.modal > .close + .header {
-        padding-right: @closeHitbox;
+    & when (@variationModalClose) {
+        .ui.modal > .close + .header {
+            padding-right: @closeHitbox;
+        }
     }
     .ui.overlay.fullscreen.modal > .content.content.content {
         min-height: @overlayFullscreenScrollingContentMaxHeightMobile;
@@ -277,9 +295,11 @@
         display: block;
         padding: @mobileContentPadding !important;
     }
-    .ui.modal > .close {
-        top: @mobileCloseTop !important;
-        right: @mobileCloseRight !important;
+    & when (@variationModalClose) {
+        .ui.modal > .close {
+            top: @mobileCloseTop !important;
+            right: @mobileCloseRight !important;
+        }
     }
 
     /* rtl:ignore */
@@ -351,10 +371,12 @@
         color: @basicModalHeaderColor;
         border-bottom: none;
     }
-    .ui.basic.modal > .close {
-        top: @basicModalCloseTop;
-        right: @basicModalCloseRight;
-        color: @basicInnerCloseColor;
+    & when (@variationModalClose) {
+        .ui.basic.modal > .close {
+            top: @basicModalCloseTop;
+            right: @basicModalCloseRight;
+            color: @basicInnerCloseColor;
+        }
     }
     .ui.inverted.dimmer > .basic.modal {
         color: @basicInvertedModalColor;
@@ -370,14 +392,14 @@
     .ui.legacy.legacy.page.dimmer > .ui.modal {
         left: 50% !important;
     }
-    .ui.legacy.legacy.modal:not(.aligned),
-    .ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
+    .ui.legacy.legacy.modal@{notAligned},
+    .ui.legacy.legacy.page.dimmer > .ui.modal@{notAligned} {
         top: 50%;
     }
-    .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
-    .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
-    .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
-    .ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
+    .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal@{notAligned},
+    .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal@{notAligned},
+    .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal@{notAligned},
+    .ui.top.aligned.dimmer > .ui.legacy.legacy.modal@{notAligned} {
         top: auto;
     }
     & when (@variationModalOverlay) {
@@ -450,7 +472,7 @@
     .modals.dimmer .ui.scrolling.modal.fullscreen {
         top: 0;
     }
-    .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
+    .modals.dimmer .ui.scrolling.modal@{notFullscreen} {
         margin: @scrollingMargin auto;
         top: @scrollingTop;
     }
@@ -470,7 +492,7 @@
     .scrolling.undetached.dimmable.dimmed > .dimmer {
         overflow: hidden;
     }
-    .scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
+    .scrolling.undetached.dimmable .ui.scrolling.modal@{notFullscreen} {
         position: absolute;
         left: 50%;
     }
@@ -517,19 +539,21 @@
             border-radius: 0;
         }
     }
-    .ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
-    .ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
-        padding-right: @closeHitbox;
-    }
-    .ui.modal > .close.inside,
-    .ui.fullscreen.modal > .close {
-        top: @innerCloseTop;
-        right: @innerCloseRight;
-        color: @innerCloseColor;
-    }
-    & when (@variationModalBasic) {
-        .ui.basic.fullscreen.modal > .close {
-            color: @basicInnerCloseColor;
+    & when (@variationModalClose) {
+        .ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
+        .ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
+            padding-right: @closeHitbox;
+        }
+        .ui.modal > .close.inside,
+        .ui.fullscreen.modal > .close {
+            top: @innerCloseTop;
+            right: @innerCloseRight;
+            color: @innerCloseColor;
+        }
+        & when (@variationModalBasic) {
+            .ui.basic.fullscreen.modal > .close {
+                color: @basicInnerCloseColor;
+            }
         }
     }
 }
@@ -611,14 +635,17 @@
             color: @invertedActionColor;
         }
     }
+    & when (@variationModalClose) {
+        & when (@variationDimmerInverted) {
+            .ui.inverted.dimmer > .modal > .close {
+                color: @invertedDimmerCloseColor;
+            }
+        }
 
-    .ui.inverted.dimmer > .modal > .close {
-        color: @invertedDimmerCloseColor;
-    }
-
-    @media only screen and (max-width: @largestTabletScreen) {
-        .ui.dimmer .inverted.modal > .close {
-            color: @invertedCloseColor;
+        @media only screen and (max-width: @largestTabletScreen) {
+            .ui.dimmer .inverted.modal > .close {
+                color: @invertedCloseColor;
+            }
         }
     }
     & when (@variationModalFullscreen) or (@variationModalCloseInside) {

package/src/definitions/modules/nag.less

@@ -17,6 +17,10 @@
 
 @import (multiple) "../../theme.config";
 
+@notBottom: if(@variationNagBottom, e(":not(.bottom)"));
+@notFixed: if(@variationNagFixed, e(":not(.fixed)"));
+@notOverlay: if(@variationNagOverlay, e(":not(.overlay)"));
+
 /*******************************
              Nag
 *******************************/
@@ -63,7 +67,7 @@ a.ui.nag {
     transition: @closeTransition;
 }
 
-.ui.nag:not(.overlay):not(.fixed) {
+.ui.nag@{notOverlay}@{notFixed} {
     border-radius: @borderRadius;
 }
 
@@ -192,7 +196,7 @@ a.ui.nag {
     .ui.ui.nags .nag {
         border-radius: @groupedBorderRadius;
     }
-    .ui.nags:not(.bottom) .nag:last-child {
+    .ui.nags@{notBottom} .nag:last-child {
         border-radius: @topBorderRadius;
     }
     & when(@variationNagBottom) {
@@ -200,10 +204,10 @@ a.ui.nag {
             border-radius: @bottomBorderRadius;
         }
     }
-    .ui.nags:not(.fixed):not(.overlay) .nag:first-child {
+    .ui.nags@{notFixed}@{notOverlay} .nag:first-child {
         border-radius: @bottomBorderRadius;
     }
-    .ui.nags:not(.fixed):not(.overlay) .nag:only-child {
+    .ui.nags@{notFixed}@{notOverlay} .nag:only-child {
         border-radius: @borderRadius;
     }
 }

package/src/definitions/modules/popup.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notPadded: if(@variationGridPadded, e(":not(.padded)"));
+
 /*******************************
             Popup
 *******************************/
@@ -696,7 +698,7 @@
 *******************************/
 
 /* Immediate Nested Grid */
-.ui.ui.ui.popup > .ui.grid:not(.padded) {
+.ui.ui.ui.popup > .ui.grid@{notPadded} {
     width: @nestedGridWidth;
     margin: @nestedGridMargin;
 }

package/src/definitions/modules/progress.less

@@ -17,6 +17,12 @@
 
 @import (multiple) "../../theme.config";
 
+@notIndeterminate: if(@variationProgressIndeterminate, e(":not(.indeterminate)"));
+@notSliding: if(@variationProgressSliding, e(":not(.sliding)"));
+@notFilling: if(@variationProgressFilling, e(":not(.filling)"));
+@notSwinging: if(@variationProgressSwinging, e(":not(.swinging)"));
+@notBasic: if(@variationProgressBasic, e(":not(.basic)"));
+
 /*******************************
             Progress
 *******************************/
@@ -66,8 +72,8 @@
         min-width: @barMinWidth;
     }
 }
-.ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar:not(:empty),
-.ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar:not(:empty) {
+.ui.ui.ui.progress:not([data-percent])@{notIndeterminate} .bar:not(:empty),
+.ui.ui.ui.progress[data-percent="0"]@{notIndeterminate} .bar:not(:empty) {
     background: transparent;
 }
 .ui.progress[data-percent="0"] .bar .progress {
@@ -396,7 +402,7 @@
         Inverted
     --------------- */
 
-    .ui.inverted.progress:not(.basic) {
+    .ui.inverted.progress@{notBasic} {
         background: @invertedBackground;
         border: @invertedBorder;
     }
@@ -573,7 +579,7 @@
             animation-name: progress-filling;
         }
     }
-    .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
+    .ui.indeterminate.progress@{notSliding}@{notFilling}@{notSwinging} .bar::before {
         background: @indeterminatePulseColor;
     }
     & when (@variationProgressSliding) or (@variationProgressSwinging) or (@variationProgressFilling) {

package/src/definitions/modules/slider.less

@@ -17,16 +17,23 @@
 
 @import (multiple) "../../theme.config";
 
-.ui.slider:not(.vertical):not(.checkbox) {
+@notVertical: if(@variationSliderVertical, e(":not(.vertical)"));
+@notDisabled: if(@variationSliderDisabled, e(":not(.disabled)"));
+@notBottom: if(@variationSliderBottomAligned, e(":not(.bottom)"));
+@notRight: if(@variationSliderRightAligned, e(":not(.right)"));
+
+@notCheckbox: if(@variationCheckboxSlider, e(":not(.checkbox)"));
+
+.ui.slider@{notVertical}@{notCheckbox} {
     width: 100%;
     padding: @padding;
 }
 
-.ui.slider:not(.checkbox) {
+.ui.slider@{notCheckbox} {
     position: relative;
 }
 
-.ui.slider:not(.checkbox):focus {
+.ui.slider@{notCheckbox}:focus {
     outline: 0;
 }
 
@@ -35,7 +42,7 @@
     z-index: 2;
 }
 
-.ui.slider:not(.vertical) .inner {
+.ui.slider@{notVertical} .inner {
     height: @height;
 }
 
@@ -49,7 +56,7 @@
     background-color: @trackColor;
 }
 
-.ui.slider:not(.vertical) .inner .track {
+.ui.slider@{notVertical} .inner .track {
     width: 100%;
     height: @trackHeight;
     top: @trackPositionTop;
@@ -62,7 +69,7 @@
     background-color: @trackFillColor;
 }
 
-.ui.slider:not(.vertical) .inner .track-fill {
+.ui.slider@{notVertical} .inner .track-fill {
     height: @trackFillHeight;
     top: @trackPositionTop;
     left: 0;
@@ -80,12 +87,12 @@
     transition: @thumbTransition;
 }
 
-.ui.slider:not(.disabled) .inner .thumb:hover {
+.ui.slider@{notDisabled} .inner .thumb:hover {
     cursor: @thumbHoverPointer;
     background: @thumbHoverBackground;
 }
 
-.ui.slider:not(.disabled):focus .inner .thumb {
+.ui.slider@{notDisabled}:focus .inner .thumb {
     background: @thumbHoverBackground;
 }
 
@@ -98,7 +105,7 @@
          Disabled
     --------------- */
 
-    .ui.disabled.slider:not(.checkbox) {
+    .ui.disabled.slider@{notCheckbox} {
         opacity: @disabledOpactiy;
     }
 
@@ -121,7 +128,7 @@
         right: 0;
     }
 
-    .ui.reversed.slider:not(.vertical) .inner .thumb {
+    .ui.reversed.slider@{notVertical} .inner .thumb {
         left: auto;
         right: 0;
     }
@@ -198,7 +205,7 @@
         right: 0;
     }
 
-    .ui.labeled.slider:not(.vertical) > .labels {
+    .ui.labeled.slider@{notVertical} > .labels {
         transform: translateY(-50%);
     }
 
@@ -251,13 +258,13 @@
         }
     }
     & when (@variationSliderUiLabel) {
-        .ui.labeled.slider:not(.vertical):not(.bottom) .labels .ui.label {
+        .ui.labeled.slider@{notVertical}@{notBottom} .labels .ui.label {
             margin-top: -@uiLabelMargin;
         }
-        .ui.labeled.ticked.slider:not(.vertical):not(.bottom) .labels .ui.label::after {
+        .ui.labeled.ticked.slider@{notVertical}@{notBottom} .labels .ui.label::after {
             margin-top: @uiLabelMargin;
         }
-        .ui.labeled.ticked.slider:not(.vertical) > .labels .ui.label::after {
+        .ui.labeled.ticked.slider@{notVertical} > .labels .ui.label::after {
             height: @uiLabelTickHeight;
         }
     }
@@ -288,7 +295,7 @@
             width: (@labelHeight / 2);
             height: @labelWidth;
         }
-        .ui.labeled.vertical.slider:not(.right) > .labels .halftick.label::after {
+        .ui.labeled.vertical.slider@{notRight} > .labels .halftick.label::after {
             margin-left: @verticalTickDistance;
         }
 
@@ -299,7 +306,7 @@
             }
         }
         & when (@variationSliderUiLabel) {
-            .ui.labeled.ticked.vertical.slider:not(.right) > .labels .ui.label::after {
+            .ui.labeled.ticked.vertical.slider@{notRight} > .labels .ui.label::after {
                 margin-left: @verticalUiLabelMargin;
             }
         }
@@ -343,8 +350,8 @@
     transition: @hoverOpacityTransition;
 }
 
-.ui.hover.slider:not(.disabled):hover .inner .thumb,
-.ui.hover.slider:not(.disabled):focus .inner .thumb {
+.ui.hover.slider@{notDisabled}:hover .inner .thumb,
+.ui.hover.slider@{notDisabled}:focus .inner .thumb {
     opacity: @hoverVarHoverOpacity;
 }
 
@@ -481,20 +488,20 @@
             height: @@h;
             width: @@h;
         }
-        .ui.slider.@{value}:not(.vertical) .inner {
+        .ui.slider.@{value}@{notVertical} .inner {
             height: @@h;
         }
-        .ui.slider.@{value}:not(.vertical) .inner .track,
-        .ui.slider.@{value}:not(.vertical) .inner .track-fill {
+        .ui.slider.@{value}@{notVertical} .inner .track,
+        .ui.slider.@{value}@{notVertical} .inner .track-fill {
             height: @@th;
             top: @@tp;
         }
         & when (@variationSliderLabeled) {
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels,
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
+            .ui.@{value}.labeled.slider@{notVertical} > .labels,
+            .ui.@{value}.labeled.slider@{notVertical} > .labels .label::after {
                 height: @@lh;
             }
-            .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
+            .ui.@{value}.labeled.slider@{notVertical} > .labels .halftick.label::after {
                 height: (@@lh / 2);
             }
         }