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

package/src/definitions/modules/toast.less

@@ -17,6 +17,17 @@
 
 @import (multiple) "../../theme.config";
 
+@notActions: if(@variationToastActions, e(":not(.actions)"));
+@notAttached: if(@variationToastAttached, e(":not(.attached)"));
+@notVertical: if(@variationToastVertical, e(":not(.vertical)"));
+@notCenter: if(@variationToastCenter, e(":not(.center)"));
+@notCentered: if(@variationToastCentered, e(":not(.centered)"));
+@notBasic: if(@variationToastBasic, e(":not(.basic)"));
+@notClose: if(@variationToastClose, e(":not(.close)"));
+@notUnclickable: if(@variationToastUnclickable, e(":not(.unclickable)"));
+
+@notFluid: if(@variationButtonFluid, e(":not(.fluid)"));
+
 /*******************************
         Toast container
 *******************************/
@@ -56,7 +67,7 @@
             & > * {
                 width: 100%;
                 border-radius: 0;
-                & > .vertical:not(.actions) when (@variationToastVertical) {
+                & > .vertical@{notActions} when (@variationToastVertical) {
                     flex: 1;
                 }
             }
@@ -130,7 +141,7 @@
         &:hover {
             opacity: @toastOpacityOnHover;
         }
-        &:not(.unclickable):hover {
+        &@{notUnclickable}:hover {
             cursor: @toastCursorOnHover;
         }
         & when (@variationToastFloating) {
@@ -195,18 +206,18 @@
             }
             &.icon when (@variationToastIcon) {
                 align-items: inherit;
-                & > :not(.icon):not(.actions) {
+                & > :not(.icon)@{notActions} {
                     padding-left: @toastIconMessageContentPadding;
                 }
-                & > i.icon:not(.close) when (@variationToastIcon) {
+                & > i.icon@{notClose} when (@variationToastIcon) {
                     display: inline-block;
                     position: absolute;
                     width: @toastIconMessageWidth;
                     top: 50%;
                     transform: translateY(-50%);
                 }
-                &:not(.vertical) {
-                    &.actions > i.icon:not(.close) when (@variationToastActions) and (@variationToastIcon) {
+                &@{notVertical} {
+                    &.actions > i.icon@{notClose} when (@variationToastActions) and (@variationToastIcon) {
                         top: e(%("calc(50%% - %d)", @toastIconCenteredAdjustment));
                         transform: none;
                     }
@@ -230,7 +241,7 @@
                 margin-top: -@toastCloseTopDistance;
                 margin-right: -@toastCloseTopDistance;
             }
-            &:not(.vertical) > .close.icon when (@variationToastClose) {
+            &@{notVertical} > .close.icon when (@variationToastClose) {
                 position: absolute;
                 top: @toastCloseTopDistance;
                 &:not(.left) {
@@ -243,7 +254,7 @@
         }
         & .ui.card when (@variationToastCard) {
             margin: 0;
-            &.attached:not(.vertical) when (@variationToastAttached) {
+            &.attached@{notVertical} when (@variationToastAttached) {
                 &.bottom {
                     border-top-left-radius: 0;
                     border-top-right-radius: 0;
@@ -296,7 +307,7 @@
         &:hover .pausable.progressing {
             animation-play-state: paused;
         }
-        & .ui.toast:not(.vertical) {
+        & .ui.toast@{notVertical} {
             display: block;
         }
         & :not(.comment) {
@@ -306,10 +317,10 @@
             & .actions when (@variationToastActions) {
                 padding: @toastActionPadding @toastActionPadding @toastActionPaddingBottom @toastActionPadding;
                 text-align: right;
-                &.attached:not(.vertical) when (@variationToastAttached) {
+                &.attached@{notVertical} when (@variationToastAttached) {
                     margin-right: @toastLeftRightMargin;
                 }
-                &:not(.basic):not(.attached) {
+                &@{notBasic}@{notAttached} {
                     background: @toastActionBackground;
                     border-top: @toastActionBorder;
                 }
@@ -333,13 +344,13 @@
             &.attached > .button when (@variationToastAttached) {
                 align-items: center;
             }
-            &:not(.attached) {
+            &@{notAttached} {
                 border-top: 0;
                 margin-top: -@toastActionPaddingBottom;
                 margin-bottom: -@toastActionPaddingBottom;
                 margin-left: @toastActionMarginLeft;
                 justify-content: space-around;
-                &:not(.basic) {
+                &@{notBasic} {
                     border-left: @toastActionBorder;
                 }
                 & > .button:not(:last-child) {
@@ -417,7 +428,7 @@
     }
 }
 
-.ui.attached:not(.vertical) when (@variationToastAttached) {
+.ui.attached@{notVertical} when (@variationToastAttached) {
     &:not(.top) {
         &.actions when (@variationToastActions) {
             border-bottom-left-radius: @toastBorderRadius;
@@ -480,19 +491,19 @@
         background-color: @toastNeutralColor;
         color: @toastNeutralTextColor;
     }
-    & > i.icon:not(.close) when (@variationToastIcon) {
+    & > i.icon@{notClose} when (@variationToastIcon) {
         font-size: @toastIconFontSize;
     }
-    &:not(.vertical) {
-        &:not(.centered):not(.center) {
-            & > i.icon:not(.close) when (@variationToastIcon) {
+    &@{notVertical} {
+        &@{notCentered}@{notCenter} {
+            & > i.icon@{notClose} when (@variationToastIcon) {
                 position: absolute;
             }
             & > .ui.image when (@variationToastImage) {
                 position: absolute;
             }
         }
-        & > i.icon:not(.close) when (@variationToastIcon) {
+        & > i.icon@{notClose} when (@variationToastIcon) {
             & + .content {
                 padding-left: @toastIconContentPadding;
             }
@@ -518,7 +529,7 @@
                 min-height: @toastSmallImageHeight;
             }
         }
-        &:not(.centered):not(.center) when (@variationToastImage) or (@variationToastIcon) {
+        &@{notCentered}@{notCenter} when (@variationToastImage) or (@variationToastIcon) {
             & > .centered.image,
             > .centered.icon {
                 transform: translateY(-50%);
@@ -544,7 +555,7 @@
         }
         & when (@variationToastImage) or (@variationToastIcon) {
             & > .ui.image + .content,
-            > i.icon:not(.close) + .content {
+            > i.icon@{notClose} + .content {
                 padding-left: @toastImageContentPadding;
             }
         }
@@ -619,7 +630,7 @@
 
         & > .content,
         & > .ui.image,
-        & > i.icon:not(.close) {
+        & > i.icon@{notClose} {
             align-self: center;
         }
     }
@@ -633,7 +644,7 @@
     .ui.toast-container .toast-box .center.aligned.actions {
         text-align: center;
 
-        &:not(.attached) > .button:not(.fluid) {
+        &@{notAttached} > .button@{notFluid} {
             margin-left: @toastActionCenteredMargin;
             margin-right: @toastActionCenteredMargin;
         }
@@ -679,7 +690,7 @@
             width: auto;
             max-width: 100%;
         }
-        & > *:not(.vertical) {
+        & > *@{notVertical} {
             min-width: @mobileWidth;
         }
         & when (@variationToastCard) {

package/src/definitions/views/card.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notRaised: if(@variationCardRaised, e(":not(.raised)"));
+
 /*******************************
             Standard
 *******************************/
@@ -358,9 +360,9 @@
     /* --------------
        Basic
     --------------- */
-    .ui.cards:not(.raised) > .basic.card:not(.raised),
-    .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised),
-    .ui.ui.ui.basic.card:not(.raised) {
+    .ui.cards@{notRaised} > .basic.card@{notRaised},
+    .ui.ui.ui.basic.cards@{notRaised} > .card@{notRaised},
+    .ui.ui.ui.basic.card@{notRaised} {
         box-shadow: none;
         & > .buttons,
         > .button {
@@ -369,8 +371,8 @@
         }
     }
     & when (@variationCardLink) {
-        .ui.ui.ui.ui.ui.basic.card:not(.raised):hover,
-        .ui.ui.ui.ui.ui.basic.cards:not(.raised) .card:not(.raised):hover {
+        .ui.ui.ui.ui.ui.basic.card@{notRaised}:hover,
+        .ui.ui.ui.ui.ui.basic.cards@{notRaised} .card@{notRaised}:hover {
             box-shadow: none;
         }
     }

package/src/definitions/views/feed.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notConnected: if(@variationFeedConnected, e(":not(.connected)"));
+
 /*******************************
          Activity Feed
 *******************************/
@@ -47,7 +49,7 @@
         border-top: @eventDivider;
     }
 }
-.ui.feed:not(.connected) > .event:first-child {
+.ui.feed@{notConnected} > .event:first-child {
     padding-top: 0;
 }
 .ui.feed > .event:last-child {

package/src/definitions/views/item.less

@@ -17,6 +17,8 @@
 
 @import (multiple) "../../theme.config";
 
+@notUnstackable: if(@variationItemUnstackable, e(":not(.unstackable)"));
+
 /*******************************
             Standard
 *******************************/
@@ -370,22 +372,22 @@
 
 /* Mobile Only */
 @media only screen and (max-width: @largestMobileScreen) {
-    .ui.items:not(.unstackable) > .item {
+    .ui.items@{notUnstackable} > .item {
         flex-direction: column;
         margin: @mobileItemSpacing 0;
     }
-    .ui.items:not(.unstackable) > .item > .image {
+    .ui.items@{notUnstackable} > .item > .image {
         display: block;
         margin-left: auto;
         margin-right: auto;
     }
-    .ui.items:not(.unstackable) > .item > .image,
-    .ui.items:not(.unstackable) > .item > .image > img {
+    .ui.items@{notUnstackable} > .item > .image,
+    .ui.items@{notUnstackable} > .item > .image > img {
         max-width: 100% !important;
         width: @mobileImageWidth !important;
         max-height: @mobileImageMaxHeight !important;
     }
-    .ui.items:not(.unstackable) > .item > .image + .content {
+    .ui.items@{notUnstackable} > .item > .image + .content {
         display: block;
         padding: @mobileContentImageDistance 0 0;
     }

package/src/themes/default/globals/variation.variables

@@ -186,6 +186,7 @@
 @variationLoaderIndeterminate: true;
 @variationLoaderText: true;
 @variationLoaderInline: true;
+@variationLoaderDouble: true;
 @variationLoaderElastic: true;
 @variationLoaderSizes: @variationAllSizes;
 @variationLoaderColors: @variationAllColors;
@@ -257,6 +258,7 @@
 @variationStepEqualWidth: true;
 @variationStepSizes: @variationAllSizes;
 @variationStepCircular: true;
+@variationStepUnstackable: true;
 @variationStepColors: @variationAllColors;
 
 /* Text */
@@ -286,6 +288,7 @@
 @variationFormGrouped: true;
 @variationFormEqualWidth: true;
 @variationFormWide: true;
+@variationFormUnstackable: true;
 @variationFormSizes: @variationAllSizes;
 
 /* Grid */
@@ -298,6 +301,7 @@
 @variationGridPadded: true;
 @variationGridFloated: true;
 @variationGridDivided: true;
+@variationGridHorizontal: true;
 @variationGridVertical: true;
 @variationGridAligned: true;
 @variationGridAttached: true;
@@ -393,6 +397,9 @@
 @variationTableOverflowingVeryShort: true;
 @variationTableOverflowingLong: true;
 @variationTableOverflowingVeryLong: true;
+@variationTableRowSpanned: true;
+@variationTableFullWidth: true;
+@variationTableUnstackable: true;
 @variationTableSizes: @variationAllSizes;
 @variationTableColors: @variationAllColors;
 
@@ -529,6 +536,7 @@
 @variationCheckboxReadonly: true;
 @variationCheckboxInverted: true;
 @variationCheckboxInvisible: true;
+@variationCheckboxCompact: true;
 @variationCheckboxRadio: true;
 @variationCheckboxSlider: true;
 @variationCheckboxToggle: true;
@@ -575,6 +583,7 @@
 @variationDropdownPointing: true;
 @variationDropdownColumnar: true;
 @variationDropdownScrollhint: true;
+@variationDropdownUnlimited: true;
 @variationDropdownHighlightMatches: false;
 @variationDropdownSizes: @variationAllSizes;
 
@@ -598,6 +607,7 @@
 @variationFlyoutRight: true;
 @variationFlyoutOverlay: true;
 @variationFlyoutScrolling: true;
+@variationFlyoutClose: true;
 
 /* Modal */
 @variationModalInverted: true;
@@ -608,6 +618,7 @@
 @variationModalResizable: true;
 @variationModalScrolling: true;
 @variationModalLegacy: true;
+@variationModalClose: true;
 @variationModalCloseInside: true;
 @variationModalCentered: true;
 @variationModalActions: true;
@@ -749,7 +760,8 @@
 @variationToastVertical: true;
 @variationToastAttached: true;
 @variationToastCompact: true;
-@variationToastCentered: true;
+@variationToastBasic: true;
+@variationToastUnclickable: true;
 @variationToastColors: @variationAllColors;
 
 /* Transition */