fomantic-ui 2.9.0-beta.32 → 2.9.0-beta.321

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 {
@@ -55,7 +56,7 @@ i.icon {
   backface-visibility: hidden;
 }
 
-i.icon:before {
+i.icon::before {
   background: none !important;
 }
 
@@ -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,15 @@
   transition: @transition;
 
   box-shadow: @boxShadow;
+  &:not([type="color"]) {
+    padding: @padding;
+  }
+  &::-webkit-calendar-picker-indicator {
+    padding: 0;
+    opacity: @iconOpacity;
+    transition: @iconTransition;
+    cursor: pointer;
+  }
 }
 
 
@@ -69,7 +77,7 @@
   color: @placeholderColor;
   opacity: 1;
 }
-.ui.input > input:-ms-input-placeholder {
+.ui.input > input:-ms-input-placeholder when (@supportIE){
   color: @placeholderColor;
 }
 
@@ -110,7 +118,7 @@
          Loading
   ---------------------*/
 
-  .ui.loading.loading.input > i.icon:before {
+  .ui.loading.loading.input > i.icon::before {
     position: absolute;
     content: '';
     top: 50%;
@@ -123,7 +131,7 @@
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @loaderFillColor;
   }
-  .ui.loading.loading.input > i.icon:after {
+  .ui.loading.loading.input > i.icon::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -162,18 +170,20 @@
 .ui.input > input:focus::-moz-placeholder {
   color: @placeholderFocusColor;
 }
-.ui.input.focus > input:-ms-input-placeholder,
-.ui.input > input:focus:-ms-input-placeholder {
-  color: @placeholderFocusColor;
+& when (@supportIE) {
+  .ui.input.focus > input:-ms-input-placeholder,
+  .ui.input > input:focus:-ms-input-placeholder {
+    color: @placeholderFocusColor;
+  }
 }
 
 
-& 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 +191,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 when (@supportIE){
+        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 {
@@ -189,7 +213,7 @@
     .ui.input.@{state} > input::-moz-placeholder {
       color: @formStates[@@state][inputPlaceholderColor];
     }
-    .ui.input.@{state} > input:-ms-input-placeholder {
+    .ui.input.@{state} > input:-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderColor] !important;
     }
 
@@ -200,7 +224,7 @@
     .ui.input.@{state} > input:focus::-moz-placeholder {
       color: @formStates[@@state][inputPlaceholderFocusColor];
     }
-    .ui.input.@{state} > input:focus:-ms-input-placeholder {
+    .ui.input.@{state} > input:focus:-ms-input-placeholder when (@supportIE){
       color: @formStates[@@state][inputPlaceholderFocusColor] !important;
     }
   })
@@ -255,7 +279,7 @@
     .ui.transparent.inverted.input > input::-moz-placeholder {
       color: @transparentInvertedPlaceholderColor;
     }
-    .ui.transparent.inverted.input > input:-ms-input-placeholder {
+    .ui.transparent.inverted.input > input:-ms-input-placeholder when (@supportIE) {
       color: @transparentInvertedPlaceholderColor;
     }
   }
@@ -284,13 +308,13 @@
   .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;
   }
 
-  .ui.icon.input > i.icon:before,
-  .ui.icon.input > i.icon:after {
+  .ui.icon.input > i.icon::before,
+  .ui.icon.input > i.icon::after {
     left: 0;
     position: absolute;
     text-align: center;
@@ -316,16 +340,20 @@
     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;
   }
 
   /* Focus */
+  .ui.input > input:focus::-webkit-calendar-picker-indicator,
   .ui.icon.input > textarea:focus ~ i.icon,
   .ui.icon.input > input:focus ~ i.icon {
-    opacity: 1;
+    opacity: @iconFocusOpacity;
   }
 }
 
@@ -385,31 +413,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 +523,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 +638,163 @@
   }
 }
 
+
+& 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;
+    }
+  }
+  & when (@supportIE) {
+    .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;
+        }
+      }
+      & when (@supportIE) {
+        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
 ---------------------*/