fomantic-ui 2.9.0-beta.12 → 2.9.0-beta.120

package/src/definitions/elements/container.less

@@ -42,8 +42,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @mobileRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @mobileVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @mobileVeryRelaxedGridWidth;
+        }
       }
     }
   }
@@ -64,8 +66,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @tabletRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @tabletVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @tabletVeryRelaxedGridWidth;
+        }
       }
     }
   }
@@ -86,8 +90,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @computerRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @computerVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @computerVeryRelaxedGridWidth;
+        }
       }
     }
   }
@@ -108,8 +114,10 @@
       .ui.ui.ui.relaxed.grid.container {
         width: @largeMonitorRelaxedGridWidth;
       }
-      .ui.ui.ui.very.relaxed.grid.container {
-        width: @largeMonitorVeryRelaxedGridWidth;
+      & when (@variationContainerVeryRelaxed) {
+        .ui.ui.ui.very.relaxed.grid.container {
+          width: @largeMonitorVeryRelaxedGridWidth;
+        }
       }
     }
   }

package/src/definitions/elements/emoji.less

@@ -47,8 +47,10 @@ em[data-emoji]:before {
              States
 *******************************/
 
-em[data-emoji].disabled {
-  opacity: @disabledOpacity;
+& when (@variationEmojiDisabled) {
+  em[data-emoji].disabled {
+    opacity: @disabledOpacity;
+  }
 }
 
 
@@ -56,17 +58,21 @@ em[data-emoji].disabled {
            Variations
 *******************************/
 
-em[data-emoji].loading:before {
-  animation: loader @loadingDuration linear infinite;
+& when (@variationEmojiLoading) {
+  em[data-emoji].loading:before {
+    animation: loader @loadingDuration linear infinite;
+  }
 }
 
 
-/*-------------------
-         Link
---------------------*/
+& when (@variationEmojiLink) {
+  /*-------------------
+           Link
+  --------------------*/
 
-em[data-emoji].link:not(.disabled) {
-  cursor: pointer;
+  em[data-emoji].link:not(.disabled) {
+    cursor: pointer;
+  }
 }
 
 .loadUIOverrides();

package/src/definitions/elements/flag.less

@@ -24,29 +24,19 @@
 *******************************/
 
 i.flag:not(.icon) {
-  display: inline-block;
-
-  width: @width;
-  height: @height;
-
-  line-height: @height;
-  vertical-align: @verticalAlign;
-  margin: 0 @margin 0 0;
-
-  text-decoration: inherit;
-
   speak: none;
-  -webkit-font-smoothing: antialiased;
   backface-visibility: hidden;
 }
 
-/* Sprite */
 i.flag:not(.icon):before {
+  content: '\00A0\00A0\00A0\00A0\00A0\00A0\00A0';
   display: inline-block;
-  content: '';
-  background: url(@spritePath) no-repeat -108px -1976px;
-  width: @width;
-  height: @height;
+  line-height: @flagLineHeight;
+  background-repeat: no-repeat;
+  background-position: center center;
+  & when not (@flagFileType = 'svg') {
+    background-size: contain;
+  }
 }
 
 .loadUIOverrides();

package/src/definitions/elements/header.less

@@ -254,10 +254,12 @@
       margin-bottom: 0;
     }
   }
-  .ui.icon.header.aligned {
-    margin-left: auto;
-    margin-right: auto;
-    display: block;
+  & when (@variationHeaderAligned) {
+    .ui.icon.header.aligned {
+      margin-left: auto;
+      margin-right: auto;
+      display: block;
+    }
   }
 }
 
@@ -306,37 +308,38 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @h: @colors[@@color][hover];
-  @lh: @colors[@@color][lightHover];
-
-  .ui.@{color}.header {
-    color: @c;
-  }
-  a.ui.@{color}.header:hover {
-    color: @h;
-  }
-  & when (@variationHeaderDividing) {
-    .ui.@{color}.dividing.header {
-      border-bottom: @dividedColoredBorderWidth solid @c;
+& when not (@variationHeaderColors = false) {
+  each(@variationHeaderColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+    @h: @colors[@@color][hover];
+    @lh: @colors[@@color][lightHover];
+
+    .ui.@{color}.header {
+      color: @c;
     }
-  }
-  & when (@variationHeaderInverted) {
-    .ui.inverted.@{color}.header.header.header {
-      color: @l;
+    a.ui.@{color}.header:hover {
+      color: @h;
     }
-    a.ui.inverted.@{color}.header.header.header:hover {
-      color: @lh;
+    & when (@variationHeaderDividing) {
+      .ui.@{color}.dividing.header {
+        border-bottom: @dividedColoredBorderWidth solid @c;
+      }
     }
-    .ui.inverted.@{color}.dividing.header {
-      border-bottom: @dividedColoredBorderWidth solid @l;
+    & when (@variationHeaderInverted) {
+      .ui.inverted.@{color}.header.header.header {
+        color: @l;
+      }
+      a.ui.inverted.@{color}.header.header.header:hover {
+        color: @lh;
+      }
+      .ui.inverted.@{color}.dividing.header {
+        border-bottom: @dividedColoredBorderWidth solid @l;
+      }
     }
-  }
-})
+  })
+}
 
 & when (@variationHeaderAligned) {
   /*-------------------
@@ -403,8 +406,10 @@ each(@colors, {
     padding-bottom: @dividedBorderPadding;
     border-bottom: @dividedBorder;
   }
-  .ui.dividing.header .sub.header {
-    padding-bottom: @dividedSubHeaderPadding;
+  & when (@variationHeaderSub) {
+    .ui.dividing.header .sub.header {
+      padding-bottom: @dividedSubHeaderPadding;
+    }
   }
   .ui.dividing.header i.icon {
     margin-bottom: @dividedIconPadding;
@@ -454,8 +459,10 @@ each(@colors, {
     border: @attachedBorder;
     border-radius: 0;
   }
-  .ui.attached.block.header {
-    background: @blockBackground;
+  & when (@variationHeaderBlock) {
+    .ui.attached.block.header {
+      background: @blockBackground;
+    }
   }
   .ui.attached:not(.top).header {
     border-top: none;

package/src/definitions/elements/icon.less

@@ -22,16 +22,17 @@
 /*******************************
              Icon
 *******************************/
-
-@font-face {
-  font-family: 'Icons';
-  src: @fallbackSRC;
-  src: @src;
-  font-style: normal;
-  font-weight: @normal;
-  font-variant: normal;
-  text-decoration: inherit;
-  text-transform: none;
+& when (@importIcons) {
+  @font-face {
+    font-family: 'Icons';
+    src: @fallbackSRC;
+    src: @src;
+    font-style: normal;
+    font-weight: @normal;
+    font-variant: normal;
+    text-decoration: inherit;
+    text-transform: none;
+  }
 }
 
 i.icon {
@@ -104,6 +105,7 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
           Fitted
   --------------------*/
 
+  i.fitted.icons,
   i.fitted.icon {
     width: auto;
     margin: 0 !important;
@@ -319,30 +321,31 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  i.@{color}.icon.icon.icon.icon.icon {
-    color: @c;
-  }
-  & when (@variationIconInverted) {
-    i.inverted.@{color}.icon.icon.icon.icon.icon {
-      color: @l;
+& when not (@variationIconColors = false) {
+  each(@variationIconColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    i.@{color}.icon.icon.icon.icon.icon {
+      color: @c;
     }
-    & when (@variationIconBordered) or (@variationIconCircular) {
-      i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
-      i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
-      i.inverted.bordered.@{color}.icons,
-      i.inverted.circular.@{color}.icons {
-        background-color: @c;
-        color: @white;
+    & when (@variationIconInverted) {
+      i.inverted.@{color}.icon.icon.icon.icon.icon {
+        color: @l;
+      }
+      & when (@variationIconBordered) or (@variationIconCircular) {
+        i.inverted.bordered.@{color}.icon.icon.icon.icon.icon,
+        i.inverted.circular.@{color}.icon.icon.icon.icon.icon,
+        i.inverted.bordered.@{color}.icons,
+        i.inverted.circular.@{color}.icons {
+          background-color: @c;
+          color: @white;
+        }
       }
     }
-  }
-})
+  })
+}
 
 
 /*-------------------
@@ -375,6 +378,10 @@ i.icons {
     display: inline-block;
     position: relative;
     line-height: 1;
+    min-width: @width;
+    min-height: @height;
+    margin: 0 @distanceFromText 0 0;
+    text-align: center;
   }
 
   i.icons .icon {

package/src/definitions/elements/input.less

@@ -44,7 +44,6 @@
   line-height: @lineHeight;
 
   font-family: @inputFont;
-  padding: @padding;
 
   background: @background;
   border: @border;
@@ -53,6 +52,9 @@
   transition: @transition;
 
   box-shadow: @boxShadow;
+  &:not([type="color"]) {
+    padding: @padding;
+  }
 }
 
 
@@ -168,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];
@@ -181,6 +183,20 @@
       color: @formStates[@@state][color];
       box-shadow: @formStates[@@state][boxShadow];
     }
+    & when (@state=error) {
+      .ui.input > input:not(:placeholder-shown):invalid {
+        background-color: @formStates[@@state][background];
+        border-color: @formStates[@@state][borderColor];
+        color: @formStates[@@state][color];
+        box-shadow: @formStates[@@state][boxShadow];
+      }
+      .ui.input > input:not(:-ms-input-placeholder):invalid {
+        background-color: @formStates[@@state][background];
+        border-color: @formStates[@@state][borderColor];
+        color: @formStates[@@state][color];
+        box-shadow: @formStates[@@state][boxShadow];
+      }
+    }
 
     /* Placeholder */
     .ui.input.@{state} > input::-webkit-input-placeholder {
@@ -432,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