fomantic-ui 2.9.0-beta.84 → 2.9.0-beta.88

package/src/definitions/elements/input.less

@@ -170,12 +170,12 @@
 }
 
 
-& when (@variationInputStates) {
+& when not (@variationInputStates = false) {
   /*--------------------
           States
   ---------------------*/
-  each(@formStates, {
-    @state: replace(@key, '@', '');
+  each(@variationInputStates, {
+    @state: @value;
 
     .ui.input.@{state} > input {
       background-color: @formStates[@@state][background];
@@ -448,10 +448,10 @@
   }
 }
 
-& when (@variationInputLabeled)  or (@variationInputAction) {
+& when ((@variationInputLabeled) or (@variationInputAction)) and not (@variationInputStates = false) {
   /* Labeled and action input states */
-  each(@formStates, {
-    @state: replace(@key, '@', '');
+  each(@variationInputStates, {
+    @state: @value;
     @borderColor: @formStates[@@state][borderColor];
 
     .ui.form .field.@{state} > .ui.action.input > .ui.button,

package/src/definitions/elements/label.less

@@ -714,118 +714,119 @@ a.ui.active.label:hover:before {
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors,{
-  @color                      : replace(@key,'@','');
-  @isDark                     : @colors[@@color][isDark];
-  @_labelColor                : @colors[@@color][color];
-  @_labelInvertedColor        : @colors[@@color][light];
-  @_labelTextColor            : @colors[@@color][text];
-  @_labelHover                : @colors[@@color][hover];
-  @_labelInvertedHover        : @colors[@@color][lightHover];
-  @_labelHoverTextColor       : @colors[@@color][hoverText];
-  @_labelRibbonShadow         : @colors[@@color][ribbon];
-  @_labelInvertedRibbonShadow : @colors[@@color][invertedRibbon];
-
-  .ui.@{color}.labels .label,
-  .ui.ui.ui.@{color}.label {
-    background-color: @_labelColor;
-    border-color: @_labelColor;
-    color: @_labelTextColor;
-  }
-  /* Link */
-  .ui.@{color}.labels a.label:hover,
-  a.ui.ui.ui.@{color}.label:hover{
-    background-color: @_labelHover;
-    border-color: @_labelHover;
-    color: @_labelHoverTextColor;
-  }
-  & when (@variationLabelRibbon) {
-    /* Ribbon */
-    .ui.ui.ui.@{color}.ribbon.label {
-      border-color: @_labelRibbonShadow;
-    }
-  }
-  & when (@variationLabelBasic) {
-    /* Basic */
-    .ui.basic.labels .@{color}.label,
-    .ui.ui.ui.basic.@{color}.label {
-      background: @basicBackground;
+& when not (@variationLabelColors = false) {
+  each(@variationLabelColors, {
+    @color: @value;
+    @isDark: @colors[@@color][isDark];
+    @_labelColor: @colors[@@color][color];
+    @_labelInvertedColor: @colors[@@color][light];
+    @_labelTextColor: @colors[@@color][text];
+    @_labelHover: @colors[@@color][hover];
+    @_labelInvertedHover: @colors[@@color][lightHover];
+    @_labelHoverTextColor: @colors[@@color][hoverText];
+    @_labelRibbonShadow: @colors[@@color][ribbon];
+    @_labelInvertedRibbonShadow: @colors[@@color][invertedRibbon];
+
+    .ui.@{color}.labels .label,
+    .ui.ui.ui.@{color}.label {
+      background-color: @_labelColor;
       border-color: @_labelColor;
-      color: @_labelColor;
+      color: @_labelTextColor;
     }
-    .ui.basic.labels a.@{color}.label:hover,
-    a.ui.ui.ui.basic.@{color}.label:hover {
-      background: @basicBackground;
+    /* Link */
+    .ui.@{color}.labels a.label:hover,
+    a.ui.ui.ui.@{color}.label:hover {
+      background-color: @_labelHover;
       border-color: @_labelHover;
-      color: @_labelHover;
-    }
-  }
-  & when (@variationLabelInverted) {
-    /* Inverted */
-    .ui.inverted.labels .@{color}.label,
-    .ui.ui.ui.inverted.@{color}.label {
-      background-color: @_labelInvertedColor;
-      border-color: @_labelInvertedColor;
-      color: @black;
-    }
-    /* Inverted Link */
-    .ui.inverted.labels a.@{color}.label:hover,
-    a.ui.ui.ui.inverted.@{color}.label:hover{
-      background-color: @_labelInvertedHover;
-      border-color: @_labelInvertedHover;
-      & when not (@isDark) {
-        color: @black;
-      }
-      & when (@isDark) {
-        color: @_labelTextColor;
-      }
+      color: @_labelHoverTextColor;
     }
     & when (@variationLabelRibbon) {
-      /* Inverted Ribbon */
-      .ui.ui.ui.inverted.@{color}.ribbon.label {
-        border-color: @_labelInvertedRibbonShadow;
+      /* Ribbon */
+      .ui.ui.ui.@{color}.ribbon.label {
+        border-color: @_labelRibbonShadow;
       }
     }
     & when (@variationLabelBasic) {
-      /* Inverted Basic */
-      .ui.inverted.basic.labels .@{color}.label,
-      .ui.ui.ui.inverted.basic.@{color}.label {
-        background-color: @invertedBackground;
+      /* Basic */
+      .ui.basic.labels .@{color}.label,
+      .ui.ui.ui.basic.@{color}.label {
+        background: @basicBackground;
+        border-color: @_labelColor;
+        color: @_labelColor;
+      }
+      .ui.basic.labels a.@{color}.label:hover,
+      a.ui.ui.ui.basic.@{color}.label:hover {
+        background: @basicBackground;
+        border-color: @_labelHover;
+        color: @_labelHover;
+      }
+    }
+    & when (@variationLabelInverted) {
+      /* Inverted */
+      .ui.inverted.labels .@{color}.label,
+      .ui.ui.ui.inverted.@{color}.label {
+        background-color: @_labelInvertedColor;
         border-color: @_labelInvertedColor;
+        color: @black;
+      }
+      /* Inverted Link */
+      .ui.inverted.labels a.@{color}.label:hover,
+      a.ui.ui.ui.inverted.@{color}.label:hover {
+        background-color: @_labelInvertedHover;
+        border-color: @_labelInvertedHover;
         & when not (@isDark) {
-          color: @_labelInvertedColor;
+          color: @black;
         }
         & when (@isDark) {
-          color: @invertedTextColor;
+          color: @_labelTextColor;
         }
       }
-      .ui.inverted.basic.labels a.@{color}.label:hover,
-      a.ui.ui.ui.inverted.basic.@{color}.label:hover {
-        border-color: @_labelInvertedHover;
-        background-color: @invertedBackground;
-        & when not (@isDark) {
-          color: @_labelInvertedHover;
+      & when (@variationLabelRibbon) {
+        /* Inverted Ribbon */
+        .ui.ui.ui.inverted.@{color}.ribbon.label {
+          border-color: @_labelInvertedRibbonShadow;
         }
       }
-      & when (@variationLabelTag) {
-        /* Inverted Basic Tags */
-        .ui.inverted.basic.tag.labels .@{color}.label,
-        .ui.ui.ui.inverted.@{color}.basic.tag.label {
-          border: @invertedBorderSize solid @_labelInvertedColor;
+      & when (@variationLabelBasic) {
+        /* Inverted Basic */
+        .ui.inverted.basic.labels .@{color}.label,
+        .ui.ui.ui.inverted.basic.@{color}.label {
+          background-color: @invertedBackground;
+          border-color: @_labelInvertedColor;
+          & when not (@isDark) {
+            color: @_labelInvertedColor;
+          }
+          & when (@isDark) {
+            color: @invertedTextColor;
+          }
         }
-        .ui.inverted.basic.tag.labels .@{color}.label:before,
-        .ui.ui.ui.inverted.@{color}.basic.tag.label:before {
-          border-color: inherit;
-          border-width: @invertedBorderSize 0 0 @invertedBorderSize;
-          border-style: inherit;
+        .ui.inverted.basic.labels a.@{color}.label:hover,
+        a.ui.ui.ui.inverted.basic.@{color}.label:hover {
+          border-color: @_labelInvertedHover;
           background-color: @invertedBackground;
-          right: e(%("calc(100%% + %d)", @invertedBorderSize));
+          & when not (@isDark) {
+            color: @_labelInvertedHover;
+          }
+        }
+        & when (@variationLabelTag) {
+          /* Inverted Basic Tags */
+          .ui.inverted.basic.tag.labels .@{color}.label,
+          .ui.ui.ui.inverted.@{color}.basic.tag.label {
+            border: @invertedBorderSize solid @_labelInvertedColor;
+          }
+          .ui.inverted.basic.tag.labels .@{color}.label:before,
+          .ui.ui.ui.inverted.@{color}.basic.tag.label:before {
+            border-color: inherit;
+            border-width: @invertedBorderSize 0 0 @invertedBorderSize;
+            border-style: inherit;
+            background-color: @invertedBackground;
+            right: e(%("calc(100%% + %d)", @invertedBorderSize));
+          }
         }
       }
     }
-  }
-})
+  })
+}
 
 /*-------------------
      Horizontal

package/src/definitions/elements/loader.less

@@ -203,35 +203,36 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  .ui.@{color}.elastic.loader.loader:before,
-  .ui.@{color}.basic.elastic.loading.button:before,
-  .ui.@{color}.basic.elastic.loading.button:after,
-  .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
-  .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
-  .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
-  .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
-  .ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
-  .ui.@{color}.loading.loading.loading.loading > i.icon:after,
-  .ui.@{color}.loader.loader.loader:after {
-    color: @c;
-  }
-  .ui.inverted.@{color}.elastic.loader:before,
-  .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
-  .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
-  .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
-  .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
-  .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
-  .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
-  .ui.inverted.@{color}.loader.loader.loader:after {
-    color: @l;
-  }
-})
+& when not (@variationLoaderColors = false) {
+  each(@variationLoaderColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    .ui.@{color}.elastic.loader.loader:before,
+    .ui.@{color}.basic.elastic.loading.button:before,
+    .ui.@{color}.basic.elastic.loading.button:after,
+    .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
+    .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
+    .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
+    .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
+    .ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
+    .ui.@{color}.loading.loading.loading.loading > i.icon:after,
+    .ui.@{color}.loader.loader.loader:after {
+      color: @c;
+    }
+    .ui.inverted.@{color}.elastic.loader:before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
+    .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
+    .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
+    .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
+    .ui.inverted.@{color}.loader.loader.loader:after {
+      color: @l;
+    }
+  })
+}
 
 .ui.elastic.loader.loader:before,
 .ui.elastic.loading.loading.loading:before,

package/src/definitions/elements/segment.less

@@ -592,22 +592,23 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors,{
-  @color: replace(@key,'@','');
-  @c: @colors[@@color][color];
-  & when not (@color=primary) and not (@color=secondary) {
-    .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
-      border-top: @coloredBorderSize solid @c;
-    }
-    & when (@variationSegmentInverted) {
-      .ui.inverted.@{color}.segment.segment.segment.segment.segment {
-        background-color: @c;
-        color: @white;
+& when not (@variationSegmentColors = false) {
+  each(@variationSegmentColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    & when not (@color=primary) and not (@color=secondary) {
+      .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
+        border-top: @coloredBorderSize solid @c;
+      }
+      & when (@variationSegmentInverted) {
+        .ui.inverted.@{color}.segment.segment.segment.segment.segment {
+          background-color: @c;
+          color: @white;
+        }
       }
     }
-  }
-})
+  })
+}
 
 & when (@variationSegmentAligned) {
   /*-------------------

package/src/definitions/elements/text.less

@@ -26,24 +26,26 @@ span.ui.text {
   line-height: @lineHeight;
 }
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
+& when not (@variationTextColors = false) {
+  each(@variationTextColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
 
-  span.ui.@{color}.text {
-    color: @c;
-  }
-  & when (@variationTextInverted) {
-    span.ui.inverted.@{color}.text {
-      color: @l;
+    span.ui.@{color}.text {
+      color: @c;
     }
-  }
-})
+    & when (@variationTextInverted) {
+      span.ui.inverted.@{color}.text {
+        color: @l;
+      }
+    }
+  })
+}
 
-& when (@variationTextStates) {
-  each(@textStates, {
-    @state: replace(@key, '@', '');
+& when not (@variationTextStates = false) {
+  each(@variationTextStates, {
+    @state: @value;
     @c: @textStates[@@state][color];
 
     span.ui.@{state}.text {

package/src/definitions/modules/checkbox.less

@@ -677,43 +677,44 @@
 /*--------------------
         Size
 ---------------------*/
+& when not (@variationCheckboxSizes = false) {
+  each(@variationCheckboxSizes, {
+    @raw: @{value}Raw;
+    @size: @{value}CheckboxSize;
+    @circleScale: @{value}CheckboxCircleScale;
+    @circleLeft: @{value}CheckboxCircleLeft;
 
-each(@variationCheckboxSizes, {
-  @raw: @{value}Raw;
-  @size: @{value}CheckboxSize;
-  @circleScale: @{value}CheckboxCircleScale;
-  @circleLeft: @{value}CheckboxCircleLeft;
-
-  .ui.@{value}.checkbox {
-    font-size: @@size;
-  }
-
-  & when (@@raw > 1) {
-    .ui.@{value}.form .checkbox,
     .ui.@{value}.checkbox {
-      &:not(.slider):not(.toggle):not(.radio) {
-        &
-        label:after,
-        label:before {
-          transform: scale(@@raw);
-          transform-origin:left;
-        }
-      }
-      &.radio when (@variationCheckboxRadio) {
-        &
-        label:before {
-          transform: scale(@@raw);
-          transform-origin:left;
+      font-size: @@size;
+    }
+
+    & when (@@raw > 1) {
+      .ui.@{value}.form .checkbox,
+      .ui.@{value}.checkbox {
+        &:not(.slider):not(.toggle):not(.radio) {
+          &
+          label:after,
+          label:before {
+            transform: scale(@@raw);
+            transform-origin: left;
+          }
         }
-        &
-        label:after {
-          transform:scale(@@circleScale);
-          transform-origin:left;
-          left: @@circleLeft;
+        &.radio when (@variationCheckboxRadio) {
+          &
+          label:before {
+            transform: scale(@@raw);
+            transform-origin: left;
+          }
+          &
+          label:after {
+            transform: scale(@@circleScale);
+            transform-origin: left;
+            left: @@circleLeft;
+          }
         }
       }
     }
-  }
-})
+  })
+}
 
 .loadUIOverrides();

package/src/definitions/modules/dropdown.less

@@ -1079,12 +1079,12 @@ select.ui.dropdown {
   display: none !important;
 }
 
-& when (@variationDropdownStates) {
+& when not (@variationDropdownStates = false) {
   /*--------------------
           States
   ----------------------*/
-  each(@formStates, {
-    @state: replace(@key, '@', '');
+  each(@variationDropdownStates, {
+    @state: @value;
     @c: @formStates[@@state][dropdownLabelColor];
     @bdc: @formStates[@@state][borderColor];
 

package/src/definitions/modules/nag.less

@@ -169,28 +169,29 @@ a.ui.nag {
 /*--------------
      Colors
 -------------- */
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @isVeryDark: @colors[@@color][isVeryDark];
-
-  .ui.@{color}.nag {
-    background-color: @c;
-    & when (@isVeryDark) {
-      color: @invertedTextColor;
+& when not (@variationNagColors = false) {
+  each(@variationNagColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @isVeryDark: @colors[@@color][isVeryDark];
+
+    .ui.@{color}.nag {
+      background-color: @c;
+      & when (@isVeryDark) {
+        color: @invertedTextColor;
+      }
     }
-  }
-  & when (@variationNagInverted) {
-    .ui.inverted.@{color}.nag {
-      background-color: @l;
-      & .title when (@isVeryDark) {
-        color: @titleColor;
+    & when (@variationNagInverted) {
+      .ui.inverted.@{color}.nag {
+        background-color: @l;
+        & .title when (@isVeryDark) {
+          color: @titleColor;
+        }
       }
     }
-  }
-})
+  })
+}
 
 & when (@variationNagGroups) {
 /*******************************

package/src/definitions/modules/progress.less

@@ -446,25 +446,26 @@
 /*--------------
      Colors
 ---------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  .ui.indeterminate.@{color}.progress .bar::before,
-  .ui.@{color}.progress .bar,
-  .ui.progress .@{color}.bar {
-    background-color: @c;
-  }
-  & when (@variationProgressInverted) {
-    .ui.inverted.indeterminate.@{color}.progress .bar::before,
-    .ui.@{color}.inverted.progress .bar,
-    .ui.inverted.progress .@{color}.bar {
-      background-color: @l;
+& when not (@variationProgressColors = false) {
+  each(@variationProgressColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    .ui.indeterminate.@{color}.progress .bar::before,
+    .ui.@{color}.progress .bar,
+    .ui.progress .@{color}.bar {
+      background-color: @c;
     }
-  }
-})
+    & when (@variationProgressInverted) {
+      .ui.inverted.indeterminate.@{color}.progress .bar::before,
+      .ui.@{color}.inverted.progress .bar,
+      .ui.inverted.progress .@{color}.bar {
+        background-color: @l;
+      }
+    }
+  })
+}
 
 /*--------------
      Sizes

package/src/definitions/modules/rating.less

@@ -95,41 +95,42 @@
 /*--------------
      Colors
 -------------- */
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @h: @colors[@@color][hover];
-  @lh: @colors[@@color][lightHover];
-
-  .ui.@{color}.rating .active.icon {
-    color: @l;
-    text-shadow: 0px -@shadowWidth 0px @c,
-                 -@shadowWidth 0px 0px @c,
-                 0px @shadowWidth 0px @c,
-                 @shadowWidth 0px 0px @c;
-  }
-  .ui.@{color}.rating .icon.selected,
-  .ui.@{color}.rating .icon.selected.active,
-  .ui.@{color}.rating .icon.selected.partial.active {
-    background: inherit;
-    color: @lh;
-    text-shadow: 0px -@shadowWidth 0px @h,
-                 -@shadowWidth 0px 0px @h,
-                 0px @shadowWidth 0px @h,
-                 @shadowWidth 0px 0px @h;
-
-    -webkit-text-stroke: unset;
-    background-clip: unset;
-  }
-  & when (@variationRatingPartial) {
-    .ui.@{color}.rating .icon.partial.active {
-      background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
-      -webkit-text-stroke: @c 0.78px;
+& when not (@variationRatingColors = false) {
+  each(@variationRatingColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @h: @colors[@@color][hover];
+    @lh: @colors[@@color][lightHover];
+
+    .ui.@{color}.rating .active.icon {
+      color: @l;
+      text-shadow: 0px -@shadowWidth 0px @c,
+      -@shadowWidth 0px 0px @c,
+      0px @shadowWidth 0px @c,
+      @shadowWidth 0px 0px @c;
     }
-  }
-})
+    .ui.@{color}.rating .icon.selected,
+    .ui.@{color}.rating .icon.selected.active,
+    .ui.@{color}.rating .icon.selected.partial.active {
+      background: inherit;
+      color: @lh;
+      text-shadow: 0px -@shadowWidth 0px @h,
+      -@shadowWidth 0px 0px @h,
+      0px @shadowWidth 0px @h,
+      @shadowWidth 0px 0px @h;
+
+      -webkit-text-stroke: unset;
+      background-clip: unset;
+    }
+    & when (@variationRatingPartial) {
+      .ui.@{color}.rating .icon.partial.active {
+        background: linear-gradient(to right, @l 0% var(--full), @inactiveColor var(--full) 100%);
+        -webkit-text-stroke: @c 0.78px;
+      }
+    }
+  })
+}
 
 
 /*******************************