fomantic-ui 2.8.8-beta.99 → 2.9.0-beta.100

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

@@ -113,8 +113,8 @@
 }
 
 /* After Icon */
-.ui.header:not(.centered):not(.aligned) > .icons + .content,
-.ui.header:not(.centered):not(.aligned) > i.icon + .content {
+.ui.header:not(.icon):not(.centered):not(.aligned) > .icons + .content,
+.ui.header:not(.icon):not(.centered):not(.aligned) > i.icon + .content {
   padding-left: @iconMargin;
   display: table-cell;
   vertical-align: @contentIconAlignment;
@@ -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 {
@@ -68,9 +69,11 @@ i.icon:before {
       Loading
   ---------------*/
 
-  i.icon.loading {
+  i.loading.icon {
     height: 1em;
     line-height: 1;
+  }
+  i.loading.icon, i.loading.icons {
     animation: loader @loadingDuration linear infinite;
   }
 }
@@ -102,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;
@@ -137,6 +141,9 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
 
     width: @circularSize !important;
     height: @circularSize !important;
+    &.colored when (@variationIconColored){
+      box-shadow: @coloredBoxShadow;
+    }
   }
   & when (@variationIconInverted) {
     i.circular.inverted.icon {
@@ -158,6 +165,16 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
   i.vertically.flipped.icon {
     transform: scale(1, -1);
   }
+
+  & when(@variationIconGroups) {
+    .icons i.flipped.icon:not(.corner):not(:first-child),
+    .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(-1, 1);
+    }
+    .icons i.vertically.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(1, -1);
+    }
+  }
 }
 
 & when (@variationIconRotated) {
@@ -179,6 +196,21 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
   i.halfway.rotated.icon {
     transform: rotate(180deg);
   }
+
+  & when(@variationIconGroups) {
+    .icons i.rotated.rotated.icon:not(.corner):not(:first-child),
+    .icons i.right.rotated.icon:not(.corner):not(:first-child),
+    .icons i.clockwise.rotated.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) rotate(90deg);
+    }
+    .icons i.left.rotated.icon:not(.corner):not(:first-child),
+    .icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) rotate(-90deg);
+    }
+    .icons i.halfway.rotated.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) rotate(180deg);
+    }
+  }
 }
 
 & when (@variationIconFlipped) and (@variationIconRotated) {
@@ -215,6 +247,33 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
   i.halfway.rotated.vertically.flipped.icon {
     transform: scale(1, -1) rotate(180deg);
   }
+
+  & when(@variationIconGroups) {
+    .icons i.rotated.flipped.icon:not(.corner):not(:first-child),
+    .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child),
+    .icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg);
+    }
+    .icons i.left.rotated.flipped.icon:not(.corner):not(:first-child),
+    .icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg);
+    }
+    .icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg);
+    }
+    .icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
+    .icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
+    .icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg);
+    }
+    .icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
+    .icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg);
+    }
+    .icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+      transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg);
+    }
+  }
 }
 
 & when (@variationIconBordered) {
@@ -230,6 +289,9 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) {
     height: @borderedSize;
     padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
     box-shadow: @borderedShadow;
+    &.colored when (@variationIconColored){
+      box-shadow: @coloredBoxShadow;
+    }
   }
   & when (@variationIconInverted) {
     i.bordered.inverted.icon {
@@ -259,28 +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;
     }
-    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;
+        }
+      }
     }
-  }
-})
+  })
+}
 
 
 /*-------------------
@@ -313,14 +378,20 @@ 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 {
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translateX(-50%) translateY(-50%);
     margin: 0;
+    &:not(.corner):not(.rotated):not(.flipped) {
+      transform: translateX(-50%) translateY(-50%);
+    }
   }
 
   i.icons .icon:first-child {
@@ -328,6 +399,8 @@ i.icons {
     width: auto;
     height: auto;
     vertical-align: top;
+  }
+  i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) {
     transform: none;
   }
 
@@ -336,35 +409,37 @@ i.icons {
     i.icons .corner.icon {
       top: auto;
       left: auto;
-      right: 0;
-      bottom: 0;
-      transform: none;
+      right: @cornerOffset;
+      bottom: @cornerOffset;
       font-size: @cornerIconSize;
       text-shadow: @cornerIconShadow;
+      &:not(.rotated):not(.flipped) {
+        transform: none;
+      }
     }
     i.icons .icon.corner[class*="top right"] {
-      top: 0;
+      top: @cornerOffset;
       left: auto;
-      right: 0;
+      right: @cornerOffset;
       bottom: auto;
     }
     i.icons .icon.corner[class*="top left"] {
-      top: 0;
-      left: 0;
+      top: @cornerOffset;
+      left: @cornerOffset;
       right: auto;
       bottom: auto;
     }
     i.icons .icon.corner[class*="bottom left"] {
       top: auto;
-      left: 0;
+      left: @cornerOffset;
       right: auto;
-      bottom: 0;
+      bottom: @cornerOffset;
     }
     i.icons .icon.corner[class*="bottom right"] {
       top: auto;
       left: auto;
-      right: 0;
-      bottom: 0;
+      right: @cornerOffset;
+      bottom: @cornerOffset;
     }
     & when (@variationIconInverted) {
       i.icons .inverted.corner.icon {
@@ -385,6 +460,9 @@ i.icons {
     height: @borderedSize;
     box-shadow: @borderedShadow;
     vertical-align: middle;
+    &.colored when (@variationIconColored){
+      box-shadow: @coloredBoxShadow;
+    }
   }
   i.circular.icons {
     border-radius: 500em;

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,