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

package/src/definitions/modules/dimmer.less

@@ -17,6 +17,9 @@
 
 @import (multiple) "../../theme.config";
 
+@notInverted: if(@variationDimmerInverted, e(":not(.inverted)"));
+@notPage: if(@variationDimmerPage, e(":not(.page)"));
+
 /*******************************
             Dimmer
 *******************************/
@@ -56,26 +59,26 @@
 }
 
 /* Loose Coupling */
-.ui.segment > .ui.dimmer:not(.page) {
+.ui.segment > .ui.dimmer@{notPage} {
     border-radius: inherit;
 }
 
 /* Scrollbars */
 & when (@useCustomScrollbars) {
-    .ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
+    .ui.dimmer@{notInverted}::-webkit-scrollbar-track {
         background: @trackInvertedBackground;
     }
-    .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
+    .ui.dimmer@{notInverted}::-webkit-scrollbar-thumb {
         background: @thumbInvertedBackground;
     }
-    .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
+    .ui.dimmer@{notInverted}::-webkit-scrollbar-thumb:window-inactive {
         background: @thumbInvertedInactiveBackground;
     }
-    .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
+    .ui.dimmer@{notInverted}::-webkit-scrollbar-thumb:hover {
         background: @thumbInvertedHoverBackground;
     }
     & when (@supportIE) {
-        .ui.dimmer:not(.inverted) {
+        .ui.dimmer@{notInverted} {
             /* IE11 */
             scrollbar-face-color: @thumbInvertedBackgroundHex;
             scrollbar-shadow-color: @thumbInvertedBackgroundHex;
@@ -84,7 +87,7 @@
         }
     }
     @supports (-moz-appearance: none) {
-        .ui.dimmer:not(.inverted) {
+        .ui.dimmer@{notInverted} {
             /* firefox: first color thumb, second track */
             scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
         }

package/src/definitions/modules/dropdown.less

@@ -17,6 +17,23 @@
 
 @import (multiple) "../../theme.config";
 
+@notPointing: if(@variationDropdownPointing, e(":not(.pointing)"));
+@notFloating: if(@variationDropdownFloating, e(":not(.floating)"));
+@notLabeled: if(@variationDropdownLabel, e(":not(.labeled)"));
+@notSearch: if(@variationDropdownSearch, e(":not(.search)"));
+@notUnlimited: if(@variationDropdownUnlimited, e(":not(.unlimited)"));
+@notMultiple: if(@variationDropdownMultiple, e(":not(.multiple)"));
+@notSelection: if(@variationDropdownSelection, e(":not(.selection)"));
+@notButton: if(@variationDropdownButton, e(":not(.button)"));
+@notSimple: if(@variationDropdownSimple, e(":not(.simple)"));
+@notUpward: if(@variationDropdownUpward, e(":not(.upward)"));
+
+@notTransparent: if(@variationInputTransparent, e(":not(.transparent)"));
+@notVertical: if(@variationMenuVertical, e(":not(.vertical)"));
+@notImage: if(@variationLabelImage, e(":not(.image)"));
+@notCentered: if(@variationImageCentered, e(":not(.centered)"));
+@notAvatar: if(@variationImageAvatar, e(":not(.avatar)"));
+
 /*******************************
             Dropdown
 *******************************/
@@ -69,7 +86,7 @@
   Hidden Input
 --------------- */
 
-.ui.dropdown > input:not(.search):first-child,
+.ui.dropdown > input@{notSearch}:first-child,
 .ui.dropdown > select {
     display: none !important;
 }
@@ -78,7 +95,7 @@
  Dropdown Icon
 --------------- */
 
-.ui.dropdown:not(.labeled) > .dropdown.icon {
+.ui.dropdown@{notLabeled} > .dropdown.icon {
     position: relative;
     width: auto;
     min-width: @dropdownIconMinWidth;
@@ -190,12 +207,12 @@
 .ui.dropdown .menu > .header + .input {
     margin-top: 0;
 }
-.ui.dropdown .menu > .input:not(.transparent) input {
+.ui.dropdown .menu > .input@{notTransparent} input {
     padding: @menuInputPadding;
 }
-.ui.dropdown .menu > .input:not(.transparent) .button,
-.ui.dropdown .menu > .input:not(.transparent) i.icon,
-.ui.dropdown .menu > .input:not(.transparent) .label {
+.ui.dropdown .menu > .input@{notTransparent} .button,
+.ui.dropdown .menu > .input@{notTransparent} i.icon,
+.ui.dropdown .menu > .input@{notTransparent} .label {
     padding-top: @menuInputVerticalPadding;
     padding-bottom: @menuInputVerticalPadding;
 }
@@ -358,10 +375,10 @@
     .ui.dropdown.button .menu {
         min-width: 100%;
     }
-    .ui.dropdown.button:not(.pointing):not(.floating).active {
+    .ui.dropdown.button@{notPointing}@{notFloating}.active {
         border-radius: @borderRadius @borderRadius 0 0;
     }
-    .ui.dropdown.button:not(.pointing):not(.floating) > .menu {
+    .ui.dropdown.button@{notPointing}@{notFloating} > .menu {
         border-radius: 0 0 @borderRadius @borderRadius;
     }
 }
@@ -435,7 +452,7 @@ select.ui.dropdown {
     }
 
     /* Selection Menu */
-    .ui.selection.dropdown:not(.unlimited) .menu {
+    .ui.selection.dropdown@{notUnlimited} .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
@@ -449,7 +466,7 @@ select.ui.dropdown {
         box-shadow: @selectionMenuBoxShadow;
         transition: @selectionMenuTransition;
     }
-    .ui.selection.dropdown:not(.pointing):not(.floating) .menu {
+    .ui.selection.dropdown@{notPointing}@{notFloating} .menu {
         border-top-width: 0;
         border-radius: @selectionMenuBorderRadius;
     }
@@ -475,7 +492,7 @@ select.ui.dropdown {
                 max-height: @selectionMobileMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown:not(.unlimited) .menu {
+        .ui.selection.dropdown@{notUnlimited} .menu {
             max-height: @selectionMobileMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -496,7 +513,7 @@ select.ui.dropdown {
                 max-height: @selectionTabletMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown:not(.unlimited) .menu {
+        .ui.selection.dropdown@{notUnlimited} .menu {
             max-height: @selectionTabletMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -517,7 +534,7 @@ select.ui.dropdown {
                 max-height: @selectionComputerMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown:not(.unlimited) .menu {
+        .ui.selection.dropdown@{notUnlimited} .menu {
             max-height: @selectionComputerMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -538,7 +555,7 @@ select.ui.dropdown {
                 max-height: @selectionWidescreenMaxMenuHeight * 0.5;
             }
         }
-        .ui.selection.dropdown:not(.unlimited) .menu {
+        .ui.selection.dropdown@{notUnlimited} .menu {
             max-height: @selectionWidescreenMaxMenuHeight;
         }
         & when (@variationDropdownLong) {
@@ -631,7 +648,7 @@ select.ui.dropdown {
     }
 
     /* Connecting Border */
-    .ui.active.selection.dropdown:not(.pointing):not(.floating) {
+    .ui.active.selection.dropdown@{notPointing}@{notFloating} {
         border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
         border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
     }
@@ -759,29 +776,29 @@ select.ui.dropdown {
     }
 
     /* Search Menu */
-    .ui.search.dropdown:not(.unlimited) .menu {
+    .ui.search.dropdown@{notUnlimited} .menu {
         overflow-x: hidden;
         overflow-y: auto;
         overscroll-behavior: @overscrollBehavior;
         backface-visibility: hidden;
     }
     @media only screen and (max-width: @largestMobileScreen) {
-        .ui.search.dropdown:not(.unlimited) .menu {
+        .ui.search.dropdown@{notUnlimited} .menu {
             max-height: @searchMobileMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @tabletBreakpoint) {
-        .ui.search.dropdown:not(.unlimited) .menu {
+        .ui.search.dropdown@{notUnlimited} .menu {
             max-height: @searchTabletMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @computerBreakpoint) {
-        .ui.search.dropdown:not(.unlimited) .menu {
+        .ui.search.dropdown@{notUnlimited} .menu {
             max-height: @searchComputerMaxMenuHeight;
         }
     }
     @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-        .ui.search.dropdown:not(.unlimited) .menu {
+        .ui.search.dropdown@{notUnlimited} .menu {
             max-height: @searchWidescreenMaxMenuHeight;
         }
     }
@@ -812,21 +829,21 @@ select.ui.dropdown {
     }
 
     .ui.clearable.dropdown .text:not(.default),
-    .ui.clearable.dropdown:not(.search) > .ui.label:last-of-type {
+    .ui.clearable.dropdown@{notSearch} > .ui.label:last-of-type {
         margin-right: @clearableTextMargin;
     }
 
     .ui.dropdown select.noselection ~ .remove.icon,
     .ui.dropdown input[value=""] ~ .remove.icon,
-    .ui.dropdown input:not([value]):not(.search) ~ .remove.icon,
+    .ui.dropdown input:not([value])@{notSearch} ~ .remove.icon,
     .ui.dropdown.loading > .remove.icon {
         display: none;
     }
 
-    .ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon {
+    .ui.dropdown@{notSelection} > .remove.icon ~ .dropdown.icon {
         margin-left: @clearableIconMargin;
     }
-    .ui.dropdown:not(.selection):not(.multiple) > .remove.icon {
+    .ui.dropdown@{notSelection}@{notMultiple} > .remove.icon {
         margin-top: -@clearableIconMarginTop;
     }
 }
@@ -879,24 +896,24 @@ select.ui.dropdown {
     .ui.multiple.dropdown > .label ~ .text {
         display: none;
     }
-    .ui.multiple.dropdown > .label:not(.image) > img:not(.centered) {
+    .ui.multiple.dropdown > .label@{notImage} > img@{notCentered} {
         margin-right: @itemElementDistance;
     }
-    .ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) {
+    .ui.multiple.dropdown > .label@{notImage} > img.ui@{notAvatar} {
         margin-bottom: @itemElementBottomDistance;
     }
     .ui.multiple.dropdown > .image.label img {
         margin: @imageLabelImageMargin;
         height: @imageLabelHeight;
     }
-    .ui.multiple.dropdown:not(.selection):not(.labeled) {
+    .ui.multiple.dropdown@{notSelection}@{notLabeled} {
         & > .dropdown.icon {
             right: @dropdownIconMultipleRight;
         }
         & > .remove.icon {
             margin-right: @dropdownIconMultipleRight;
         }
-        &:not(.search) > .remove.icon ~ .text.default,
+        &@{notSearch} > .remove.icon ~ .text.default,
         > .text.default:first-child {
             overflow: inherit;
         }
@@ -947,8 +964,8 @@ select.ui.dropdown {
         .ui.multiple.search.dropdown > span.sizer {
             display: none;
         }
-        .ui.multiple.search.dropdown:not(.selection) > .remove.icon + input.search,
-        .ui.multiple.search.dropdown:not(.selection) > input.search:first-child {
+        .ui.multiple.search.dropdown@{notSelection} > .remove.icon + input.search,
+        .ui.multiple.search.dropdown@{notSelection} > input.search:first-child {
             min-width: @multipleSearchMinWidth;
         }
     }
@@ -1010,12 +1027,12 @@ select.ui.dropdown {
      Default Text
 ---------------------- */
 
-.ui.dropdown:not(.button) > .default.text,
-.ui.default.dropdown:not(.button) > .text {
+.ui.dropdown@{notButton} > .default.text,
+.ui.default.dropdown@{notButton} > .text {
     color: @defaultTextColor;
 }
-.ui.dropdown:not(.button) > input:focus ~ .default.text,
-.ui.default.dropdown:not(.button) > input:focus ~ .text {
+.ui.dropdown@{notButton} > input:focus ~ .default.text,
+.ui.default.dropdown@{notButton} > input:focus ~ .text {
     color: @defaultTextFocusColor;
 }
 
@@ -1286,17 +1303,17 @@ select.ui.dropdown {
 
     & when (@variationDropdownButton) {
         /* Button */
-        .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
+        .ui.upward.dropdown.button@{notPointing}@{notFloating}.active {
             border-radius: 0 0 @borderRadius @borderRadius;
         }
-        .ui.upward.dropdown.button:not(.pointing):not(.floating) > .menu {
+        .ui.upward.dropdown.button@{notPointing}@{notFloating} > .menu {
             border-radius: @borderRadius @borderRadius 0 0;
         }
     }
 
     & when (@variationDropdownSelection) {
         /* Selection */
-        .ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) .menu {
+        .ui.ui.upward.selection.dropdown@{notPointing}@{notFloating} .menu {
             border-top-width: @menuBorderWidth;
             border-bottom-width: 0;
             box-shadow: @upwardSelectionMenuBoxShadow;
@@ -1307,14 +1324,14 @@ select.ui.dropdown {
         }
 
         /* Active Upward */
-        .ui.active.upward.selection.dropdown:not(.pointing):not(.floating) {
+        .ui.active.upward.selection.dropdown@{notPointing}@{notFloating} {
             border-radius: @upwardSelectionVisibleBorderRadius !important;
         }
 
         /* Visible Upward */
         .ui.upward.selection.dropdown.visible {
             box-shadow: @upwardSelectionVisibleBoxShadow;
-            &:not(.pointing):not(.floating) {
+            &@{notPointing}@{notFloating} {
                 border-radius: @upwardSelectionVisibleBorderRadius !important;
             }
         }
@@ -1323,7 +1340,7 @@ select.ui.dropdown {
         .ui.upward.active.selection.dropdown:hover {
             box-shadow: @upwardSelectionActiveHoverBoxShadow;
         }
-        .ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu {
+        .ui.upward.active.selection.dropdown:hover@{notPointing}@{notFloating} .menu {
             box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
         }
     }
@@ -1511,7 +1528,7 @@ select.ui.dropdown {
         .ui.simple.selection.dropdown .upward.menu {
             margin-bottom: @simpleUpwardSelectionMenuMargin;
         }
-        .ui.menu:not(.vertical) .ui.simple.dropdown.item .upward.menu {
+        .ui.menu@{notVertical} .ui.simple.dropdown.item .upward.menu {
             margin-bottom: @simpleUpwardItemMenuMargin;
         }
     }
@@ -1605,10 +1622,10 @@ select.ui.dropdown {
         box-shadow: @floatingMenuBoxShadow !important;
         border-radius: @floatingMenuBorderRadius !important;
     }
-    .ui:not(.upward).floating.dropdown > .menu {
+    .ui@{notUpward}.floating.dropdown > .menu {
         margin-top: @floatingMenuDistance;
     }
-    .ui.upward.floating.dropdown:not(.simple) > .menu {
+    .ui.upward.floating.dropdown@{notSimple} > .menu {
         margin-bottom: @floatingMenuDistance;
     }
 }
@@ -1639,11 +1656,11 @@ select.ui.dropdown {
     }
 
     @supports selector(:has(.f)) {
-        .ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+        .ui.pointing.dropdown@{notUpward} .menu:has(:first-child:hover)::after,
         .ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
             background: @hoveredItemBackground;
         }
-        .ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+        .ui.pointing.dropdown@{notUpward} .menu:has(.selected.item:first-child)::after,
         .ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
             background: @selectedBackground;
         }
@@ -1965,12 +1982,12 @@ select.ui.dropdown {
         }
     }
 
-    .ui.inverted.dropdown:not(.button) > .default.text,
-    .ui.inverted.default.dropdown:not(.button) > .text {
+    .ui.inverted.dropdown@{notButton} > .default.text,
+    .ui.inverted.default.dropdown@{notButton} > .text {
         color: @invertedDefaultTextColor;
     }
-    .ui.inverted.dropdown:not(.button) > input:focus ~ .default.text,
-    .ui.inverted.default.dropdown:not(.button) > input:focus ~ .text {
+    .ui.inverted.dropdown@{notButton} > input:focus ~ .default.text,
+    .ui.inverted.default.dropdown@{notButton} > input:focus ~ .text {
         color: @invertedDefaultTextFocusColor;
     }
 
@@ -2075,11 +2092,11 @@ select.ui.dropdown {
             }
         }
         @supports selector(:has(.f)) {
-            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
+            .ui.inverted.pointing.dropdown@{notUpward} .menu:has(:first-child:hover)::after,
             .ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
                 background: @invertedHoveredItemBackground;
             }
-            .ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
+            .ui.inverted.pointing.dropdown@{notUpward} .menu:has(.selected.item:first-child)::after,
             .ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
                 background: @invertedSelectedBackground;
             }

package/src/definitions/modules/flyout.less

@@ -17,6 +17,10 @@
 
 @import (multiple) "../../theme.config";
 
+@notFullscreen: if(@variationFlyoutFullscreen, e(":not(.fullscreen)"));
+
+@notFluid: if(@variationButtonFluid, e(":not(.fluid)"));
+
 /*******************************
              Flyout
 *******************************/
@@ -46,30 +50,31 @@
 .ui.flyout > * {
     backface-visibility: hidden;
 }
+& when (@variationFlyoutClose) {
+    /* --------------
+       Close
+    --------------- */
 
-/* --------------
-   Close
---------------- */
-.ui.flyout > .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;
-    margin: @closeMargin;
-    text-align: right;
-}
-
-.ui.flyout > .close:focus,
-.ui.flyout > .close:hover {
-    opacity: 1;
-    outline: none;
+    .ui.flyout > .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;
+        margin: @closeMargin;
+        text-align: right;
+    }
+    .ui.flyout > .close:focus,
+    .ui.flyout > .close:hover {
+        opacity: 1;
+        outline: none;
+    }
 }
 
 /* --------------
@@ -134,7 +139,7 @@
         border-top: @actionBorder;
         text-align: @actionAlign;
     }
-    .ui.flyout .actions > .button:not(.fluid) {
+    .ui.flyout .actions > .button@{notFluid} {
         margin-left: @buttonDistance;
     }
     & when (@variationFlyoutBasic) {
@@ -145,7 +150,7 @@
     & when (@variationFlyoutLeftActions) {
         .ui.flyout > .left.actions {
             text-align: left;
-            & > .button:not(.fluid) {
+            & > .button@{notFluid} {
                 margin-left: @buttonLeftDistance;
                 margin-right: @buttonLeftDistance;
             }
@@ -156,7 +161,7 @@
     .ui.flyout > .centered,
     .ui.flyout > .center.aligned {
         text-align: center;
-        &.actions > .button:not(.fluid) when (@variationFlyoutActions) {
+        &.actions > .button@{notFluid} when (@variationFlyoutActions) {
             margin-left: @buttonCenteredDistance;
             margin-right: @buttonCenteredDistance;
         }
@@ -402,9 +407,10 @@ body.pushable > .pusher {
     .ui.flyout.inverted {
         background: @invertedBackground;
     }
-
-    .ui.flyout.inverted > .close {
-        color: @invertedCloseColor;
+    & when (@variationFlyoutClose) {
+        .ui.flyout.inverted > .close {
+            color: @invertedCloseColor;
+        }
     }
 
     .ui.flyout.inverted > .header,
@@ -525,67 +531,67 @@ body.pushable > .pusher {
     & when (@variationFlyoutColumnWidth) {
         /* Sizing Combinations */
 
-        .ui[class*="one wide"].flyout:not(.fullscreen) {
+        .ui[class*="one wide"].flyout@{notFullscreen} {
             width: @oneWide;
         }
 
-        .ui[class*="two wide"].flyout:not(.fullscreen) {
+        .ui[class*="two wide"].flyout@{notFullscreen} {
             width: @twoWide;
         }
 
-        .ui[class*="three wide"].flyout:not(.fullscreen) {
+        .ui[class*="three wide"].flyout@{notFullscreen} {
             width: @threeWide;
         }
 
-        .ui[class*="four wide"].flyout:not(.fullscreen) {
+        .ui[class*="four wide"].flyout@{notFullscreen} {
             width: @fourWide;
         }
 
-        .ui[class*="five wide"].flyout:not(.fullscreen) {
+        .ui[class*="five wide"].flyout@{notFullscreen} {
             width: @fiveWide;
         }
 
-        .ui[class*="six wide"].flyout:not(.fullscreen) {
+        .ui[class*="six wide"].flyout@{notFullscreen} {
             width: @sixWide;
         }
 
-        .ui[class*="seven wide"].flyout:not(.fullscreen) {
+        .ui[class*="seven wide"].flyout@{notFullscreen} {
             width: @sevenWide;
         }
 
-        .ui[class*="eight wide"].flyout:not(.fullscreen) {
+        .ui[class*="eight wide"].flyout@{notFullscreen} {
             width: @eightWide;
         }
 
-        .ui[class*="nine wide"].flyout:not(.fullscreen) {
+        .ui[class*="nine wide"].flyout@{notFullscreen} {
             width: @nineWide;
         }
 
-        .ui[class*="ten wide"].flyout:not(.fullscreen) {
+        .ui[class*="ten wide"].flyout@{notFullscreen} {
             width: @tenWide;
         }
 
-        .ui[class*="eleven wide"].flyout:not(.fullscreen) {
+        .ui[class*="eleven wide"].flyout@{notFullscreen} {
             width: @elevenWide;
         }
 
-        .ui[class*="twelve wide"].flyout:not(.fullscreen) {
+        .ui[class*="twelve wide"].flyout@{notFullscreen} {
             width: @twelveWide;
         }
 
-        .ui[class*="thirteen wide"].flyout:not(.fullscreen) {
+        .ui[class*="thirteen wide"].flyout@{notFullscreen} {
             width: @thirteenWide;
         }
 
-        .ui[class*="fourteen wide"].flyout:not(.fullscreen) {
+        .ui[class*="fourteen wide"].flyout@{notFullscreen} {
             width: @fourteenWide;
         }
 
-        .ui[class*="fifteen wide"].flyout:not(.fullscreen) {
+        .ui[class*="fifteen wide"].flyout@{notFullscreen} {
             width: @fifteenWide;
         }
 
-        .ui[class*="sixteen wide"].flyout:not(.fullscreen) {
+        .ui[class*="sixteen wide"].flyout@{notFullscreen} {
             width: @sixteenWide;
         }
     }