fomantic-ui 2.9.0-beta.25 → 2.9.0-beta.250

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 {
@@ -284,8 +300,8 @@
   .ui.icon.input > i.icon:not(.link) {
     pointer-events: none;
   }
-  .ui.ui.ui.ui.icon.input > textarea,
-  .ui.ui.ui.ui.icon.input > input {
+  .ui.ui.ui.ui.icon.input:not(.corner) > textarea,
+  .ui.ui.ui.ui.icon.input:not(.corner) > input {
     padding-right: @iconMargin;
   }
 
@@ -316,9 +332,12 @@
     right: auto;
     left: @circularIconHorizontalOffset;
   }
-  .ui.ui.ui.ui[class*="left icon"].input > textarea,
-  .ui.ui.ui.ui[class*="left icon"].input > input {
+  .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > textarea,
+  .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input {
     padding-left: @iconMargin;
+  }
+  .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea,
+  .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input {
     padding-right: @horizontalPadding;
   }
 
@@ -385,31 +404,94 @@
   }
 
   /* Spacing with corner label */
-  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea,
-  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input {
-    padding-right: @labeledMargin !important;
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > textarea,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > input {
+    padding-right: @labeledMargin;
   }
+  .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .ui.dropdown,
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea,
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
-    padding-right: @labeledIconInputMargin !important;
+    padding-right: @labeledIconInputMargin;
   }
   .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon {
     margin-right: @labeledIconMargin;
   }
 
   /* Left Labeled */
-  .ui[class*="left corner labeled"].labeled.input > textarea,
-  .ui[class*="left corner labeled"].labeled.input > input {
-    padding-left: @labeledMargin !important;
+  .ui[class*="left icon"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > textarea,
+  .ui[class*="left corner labeled"].input > input {
+    padding-left: @labeledMargin;
   }
   & when (@variationInputIcon) {
-    .ui[class*="left corner labeled"].icon.input > textarea,
-    .ui[class*="left corner labeled"].icon.input > input {
-      padding-left: @labeledIconInputMargin !important;
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > .ui.dropdown,
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > textarea,
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input {
+      padding-right: @labeledIconInputMargin;
+    }
+    .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown,
+    .ui[class*="left corner labeled"][class*="left icon"].input > textarea,
+    .ui[class*="left corner labeled"][class*="left icon"].input > input {
+      padding-left: @labeledAndIconMargin;
     }
     .ui[class*="left corner labeled"].icon.input > i.icon {
       margin-left: @labeledIconMargin;
     }
+    .ui[class*="left corner labeled"].icon:not([class*="left icon"]).input > input {
+      padding-right: @labeledMargin;
+    }
+    .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > input {
+      padding-right: @labeledMargin * 2;
+    }
+  }
+
+  .ui[class*="left icon"].input > .ui.dropdown,
+  .ui[class*="left corner labeled"].input > .ui.dropdown {
+    & > .search {
+      padding-left: @labeledMargin;
+    }
+    & > .menu {
+      padding-left: @labeledIconMargin;
+      & > .item {
+        padding-left: @labeledMargin;
+        margin-left: -@labeledIconMargin;
+      }
+    }
+  }
+  .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown {
+    & > .search {
+      padding-left: @labeledAndIconMargin;
+    }
+    & > .menu > .item {
+      padding-left: @labeledAndIconMargin;
+    }
+  }
+  .ui.icon.input:not([class*="left icon"]) > .ui.dropdown,
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown {
+    & > .search {
+      padding-right: @labeledMargin + @labeledIconInputMargin;
+    }
+    & > .remove.icon,
+      > .dropdown.icon  {
+      padding-right: @labeledMargin;
+    }
+  }
+  .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown {
+    & > .search {
+      padding-right: @labeledAndIconMargin + @labeledIconInputMargin;
+    }
+    & > .remove.icon,
+    > .dropdown.icon  {
+      padding-right: @labeledAndIconMargin;
+    }
+  }
+  .ui.icon.input > .ui.visible.dropdown ~ i.icon,
+  .ui.icon.input > .ui.active.dropdown ~ i.icon,
+  .ui[class*="corner labeled"].input > .ui.visible.dropdown ~ .ui.corner.label,
+  .ui[class*="corner labeled"].input > .ui.active.dropdown ~ .ui.corner.label {
+    z-index: @labeledDropdownZIndex;
   }
 }
 & when (@variationInputIcon) {
@@ -432,10 +514,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,
@@ -547,6 +629,159 @@
   }
 }
 
+
+& when (@variationInputFile) {
+  /*--------------------
+          File
+  ---------------------*/
+
+  /* width hack for chrome/edge */
+  .ui.file.input {
+    width: 100%;
+    & input[type="file"] {
+      width: 0;
+    }
+  }
+
+  .ui.form .field > input[type="file"],
+  .ui.file.input:not(.action) input[type="file"] {
+    padding: 0;
+  }
+
+  .ui.action.file.input input[type="file"]::-webkit-file-upload-button {
+    display: none;
+  }
+  .ui.form .field input[type="file"]::-webkit-file-upload-button,
+  .ui.file.input input[type="file"]::-webkit-file-upload-button {
+    border: none;
+    cursor: pointer;
+    padding: @padding;
+    margin-right: @fileButtonMargin;
+    background: @fileButtonBackground;
+    font-weight: @fileButtonFontWeight;
+    color: @fileButtonTextColor;
+    &:hover {
+      background: @fileButtonBackgroundHover;
+      color: @fileButtonTextColor;
+    }
+  }
+  .ui.action.file.input input[type="file"]::-ms-browse {
+    display: none;
+  }
+  .ui.form .field input[type="file"]::-ms-browse,
+  .ui.file.input input[type="file"]::-ms-browse {
+    border: none;
+    cursor: pointer;
+    padding: @padding;
+    margin: 0;
+    background: @fileButtonBackground;
+    font-weight: @fileButtonFontWeight;
+    color: @fileButtonTextColor;
+    &:hover {
+      background: @fileButtonBackgroundHover;
+      color: @fileButtonTextColor;
+    }
+  }
+  /* IE needs additional styling for input field :S */
+  @media all and (-ms-high-contrast:none) {
+    .ui.file.input > input[type="file"],
+    input[type="file"].ui.file.input {
+      padding: 0 !important;
+    }
+  }
+
+  .ui.action.file.input input[type="file"]::file-selector-button {
+    display: none;
+  }
+  .ui.form .field input[type="file"]::file-selector-button,
+  .ui.file.input input[type="file"]::file-selector-button {
+    border: none;
+    cursor: pointer;
+    padding: @padding;
+    margin-right: @fileButtonMargin;
+    background: @fileButtonBackground;
+    font-weight: @fileButtonFontWeight;
+    color: @fileButtonTextColor;
+    &:hover {
+      background: @fileButtonBackgroundHover;
+      color: @fileButtonTextColor;
+    }
+  }
+
+  .ui.form .field input[type="file"]:required:invalid,
+  .ui.file.input input[type="file"]:required:invalid {
+    color: @negativeTextColor;
+    background: @negativeBackgroundColor ;
+    border-color: @negativeBorderColor;
+  }
+
+  input[type="file"].ui.invisible.file.input,
+  .ui.invisible.file.input input[type="file"] {
+    left: -99999px;
+    position: absolute;
+  }
+
+  input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary),
+  .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) {
+    background: @fileButtonBackgroundHover;
+    color: @hoveredTextColor;
+    &.inverted {
+      background: @fileButtonInvertedBackgroundHover;
+    }
+  }
+
+  /* this is related to existing buttons, so the button color variable is used here! */
+  & when not (@variationButtonColors = false) {
+    each(@variationButtonColors, {
+      @color: @value;
+      @h: @colors[@@color][hover];
+      @lh: @colors[@@color][lightHover];
+
+      input[type="file"].ui.file.input:focus + label.ui.@{color}.button:not(.basic):not(.tertiary),
+      .ui.file.input input[type="file"]:focus + label.ui.@{color}.button:not(.basic):not(.tertiary) {
+        background-color: @h;
+        color: @white;
+        &.inverted when (@variationButtonInverted) {
+          background-color: @lh;
+        }
+      }
+    })
+  }
+
+  & when not (@variationInputColors = false) {
+    each(@variationInputColors, {
+      @color: @value;
+      @c: @colors[@@color][color];
+      @h: @colors[@@color][hover];
+
+      input[type="file"].ui.@{color}.file.input::-webkit-file-upload-button,
+      .ui.@{color}.file.input input[type="file"]::-webkit-file-upload-button {
+        background: @c;
+        color: @white;
+        &:hover {
+          background: @h;
+        }
+      }
+      input[type="file"].ui.@{color}.file.input::-ms-browse,
+      .ui.@{color}.file.input input[type="file"]::-ms-browse {
+        background: @c;
+        color: @white;
+        &:hover {
+          background: @h;
+        }
+      }
+      input[type="file"].ui.@{color}.file.input::file-selector-button,
+      .ui.@{color}.file.input input[type="file"]::file-selector-button {
+        background: @c;
+        color: @white;
+        &:hover {
+          background: @h;
+        }
+      }
+    })
+  }
+}
+
 /*--------------------
         Size
 ---------------------*/

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