fomantic-ui 2.9.0-beta.98 → 2.9.0

package/src/definitions/elements/input.less

@@ -55,6 +55,12 @@
   &:not([type="color"]) {
     padding: @padding;
   }
+  &::-webkit-calendar-picker-indicator {
+    padding: 0;
+    opacity: @iconOpacity;
+    transition: @iconTransition;
+    cursor: pointer;
+  }
 }
 
 
@@ -71,7 +77,7 @@
   color: @placeholderColor;
   opacity: 1;
 }
-.ui.input > input:-ms-input-placeholder {
+.ui.input > input:-ms-input-placeholder when (@supportIE){
   color: @placeholderColor;
 }
 
@@ -112,7 +118,7 @@
          Loading
   ---------------------*/
 
-  .ui.loading.loading.input > i.icon:before {
+  .ui.loading.loading.input > i.icon::before {
     position: absolute;
     content: '';
     top: 50%;
@@ -125,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%;
@@ -164,9 +170,11 @@
 .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;
+  }
 }
 
 
@@ -190,7 +198,7 @@
         color: @formStates[@@state][color];
         box-shadow: @formStates[@@state][boxShadow];
       }
-      .ui.input > input:not(:-ms-input-placeholder):invalid {
+      .ui.input > input:not(:-ms-input-placeholder):invalid when (@supportIE){
         background-color: @formStates[@@state][background];
         border-color: @formStates[@@state][borderColor];
         color: @formStates[@@state][color];
@@ -205,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;
     }
 
@@ -216,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;
     }
   })
@@ -271,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;
     }
   }
@@ -300,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;
@@ -332,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;
   }
 }
 
@@ -401,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) {
@@ -563,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
 ---------------------*/

package/src/definitions/elements/label.less

@@ -73,7 +73,7 @@ a.ui.label {
 }
 
 /* Icon */
-.ui.left.icon.label > .icon,
+.ui.ui[class*="left icon"].label > .icon,
 .ui.label > .icon {
   width: auto;
   margin: 0 @iconDistance 0 0;
@@ -105,9 +105,12 @@ a.ui.label {
 }
 
 /* Backward compatible positioning */
-.ui.label.left.icon > .close.icon,
-.ui.label.left.icon > .delete.icon {
+.ui.label[class*="left icon"] > .close.icon,
+.ui.label[class*="left icon"] > .delete.icon {
   margin: 0 @deleteMargin 0 0;
+  &.right {
+    margin: 0 0 0 @deleteMargin;
+  }
 }
 .ui.label:not(.icon) > .close.icon,
 .ui.label:not(.icon) > .delete.icon {
@@ -120,7 +123,7 @@ a.ui.label {
 }
 
 /* Right Side Icon */
-.ui.right.icon.label > .icon {
+.ui[class*="right icon"].label > .icon {
   margin: 0 0 0 @iconDistance;
 }
 
@@ -250,8 +253,8 @@ a.ui.label {
     border-radius: 0 @borderRadius @borderRadius 0;
     transition: @tagTransition;
   }
-  .ui.tag.labels .label:before,
-  .ui.tag.label:before {
+  .ui.tag.labels .label::before,
+  .ui.tag.label::before {
       position: absolute;
       transform: translateY(-50%) translateX(50%) rotate(-45deg);
 
@@ -268,8 +271,8 @@ a.ui.label {
   }
 
 
-  .ui.tag.labels .label:after,
-  .ui.tag.label:after {
+  .ui.tag.labels .label::after,
+  .ui.tag.label::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -284,15 +287,15 @@ a.ui.label {
     border-radius: @circularRadius;
   }
   & when (@variationLabelBasic) {
-    .ui.basic.tag.labels .label:before,
-    .ui.basic.tag.label:before {
+    .ui.basic.tag.labels .label::before,
+    .ui.basic.tag.label::before {
       border-color: inherit;
       border-width: @basicBorderWidth 0 0 @basicBorderWidth;
       border-style: inherit;
       right: @basicBorderFullWidthOffset;
     }
-    .ui.basic.tag.labels .label:after,
-    .ui.basic.tag.label:after {
+    .ui.basic.tag.labels .label::after,
+    .ui.basic.tag.label::after {
       box-shadow: @basicTagCircleBoxShadow;
     }
   }
@@ -323,7 +326,7 @@ a.ui.label {
   .ui.corner.label{
     background-color: transparent !important;
   }
-  .ui.corner.label:after {
+  .ui.corner.label::after {
     position: absolute;
     content: "";
     right: 0;
@@ -355,11 +358,11 @@ a.ui.label {
 
   /* Left Corner */
   .ui.left.corner.label,
-  .ui.left.corner.label:after {
+  .ui.left.corner.label::after {
     right: auto;
     left: 0;
   }
-  .ui.left.corner.label:after {
+  .ui.left.corner.label::after {
     border-top: @cornerTriangleSize solid transparent;
     border-right: @cornerTriangleSize solid transparent;
     border-bottom: 0 solid transparent;
@@ -396,7 +399,7 @@ a.ui.label {
     border-color: @ribbonShadowColor;
   }
 
-  .ui.ribbon.label:after {
+  .ui.ribbon.label::after {
     position: absolute;
     content: '';
 
@@ -453,7 +456,7 @@ a.ui.label {
     transform: translateX(-100%);
     border-radius: @borderRadius 0 0 @borderRadius;
   }
-  .ui[class*="right ribbon"].label:after {
+  .ui[class*="right ribbon"].label::after {
     left: auto;
     right: 0;
 
@@ -564,8 +567,8 @@ a.ui.label:hover {
   background-image: @labelHoverBackgroundImage;
   color: @labelHoverTextColor;
 }
-.ui.labels a.label:hover:before,
-a.ui.label:hover:before {
+.ui.labels a.label:hover::before,
+a.ui.label:hover::before {
   color: @labelHoverTextColor;
 }
 
@@ -580,7 +583,7 @@ a.ui.label:hover:before {
   background-image: @labelActiveBackgroundImage;
   color: @labelActiveTextColor;
 }
-.ui.active.label:before {
+.ui.active.label::before {
   background-color: @labelActiveBackgroundColor;
   background-image: @labelActiveBackgroundImage;
   color: @labelActiveTextColor;
@@ -598,8 +601,8 @@ a.ui.active.label:hover {
   background-image: @labelActiveHoverBackgroundImage;
   color: @labelActiveHoverTextColor;
 }
-.ui.labels a.active.label:hover:before,
-a.ui.active.label:hover:before {
+.ui.labels a.active.label:hover::before,
+a.ui.active.label:hover::before {
   background-color: @labelActiveHoverBackgroundColor;
   background-image: @labelActiveHoverBackgroundImage;
   color: @labelActiveHoverTextColor;
@@ -665,7 +668,7 @@ a.ui.active.label:hover:before {
   }
   & when (@variationLabelPointing) {
       /* Pointing */
-    .ui.basic.pointing.label:before {
+    .ui.basic.pointing.label::before {
       border-color: inherit;
     }
   }
@@ -814,8 +817,8 @@ a.ui.active.label:hover:before {
           .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 {
+          .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;
@@ -881,7 +884,7 @@ a.ui.active.label:hover:before {
     position: absolute;
   }
 
-  .ui.pointing.label:before {
+  .ui.pointing.label::before {
     background-color: inherit;
     background-image: inherit;
     border-width: 0;
@@ -889,7 +892,7 @@ a.ui.active.label:hover:before {
     border-color: @pointingBorderColor;
   }
   /* Arrow */
-  .ui.pointing.label:before {
+  .ui.pointing.label::before {
     position: absolute;
     content: '';
     transform: rotate(45deg);
@@ -906,8 +909,8 @@ a.ui.active.label:hover:before {
   .ui[class*="pointing above"].label {
     margin-top: @pointingVerticalDistance;
   }
-  .ui.pointing.label:before,
-  .ui[class*="pointing above"].label:before {
+  .ui.pointing.label::before,
+  .ui[class*="pointing above"].label::before {
     border-width: @borderWidth 0 0 @borderWidth;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     top: 0;
@@ -919,8 +922,8 @@ a.ui.active.label:hover:before {
     margin-top: 0;
     margin-bottom: @pointingVerticalDistance;
   }
-  .ui[class*="bottom pointing"].label:before,
-  .ui[class*="pointing below"].label:before {
+  .ui[class*="bottom pointing"].label::before,
+  .ui[class*="pointing below"].label::before {
     border-width: 0 @borderWidth @borderWidth 0;
     top: auto;
     right: auto;
@@ -933,7 +936,7 @@ a.ui.active.label:hover:before {
     margin-top: 0;
     margin-left: @pointingHorizontalDistance;
   }
-  .ui[class*="left pointing"].label:before {
+  .ui[class*="left pointing"].label::before {
     border-width: 0 0 @borderWidth @borderWidth;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     bottom: auto;
@@ -946,7 +949,7 @@ a.ui.active.label:hover:before {
     margin-top: 0;
     margin-right: @pointingHorizontalDistance;
   }
-  .ui[class*="right pointing"].label:before {
+  .ui[class*="right pointing"].label::before {
     border-width: @borderWidth @borderWidth 0 0;
     transform: translateX(50%) translateY(-50%) rotate(45deg);
     top: 50%;
@@ -958,24 +961,24 @@ a.ui.active.label:hover:before {
     /* Basic Pointing */
 
     /*--- Above ---*/
-    .ui.basic.pointing.label:before,
-    .ui.basic[class*="pointing above"].label:before {
+    .ui.basic.pointing.label::before,
+    .ui.basic[class*="pointing above"].label::before {
       margin-top: @basicPointingTriangleOffset;
     }
     /*--- Below ---*/
-    .ui.basic[class*="bottom pointing"].label:before,
-    .ui.basic[class*="pointing below"].label:before {
+    .ui.basic[class*="bottom pointing"].label::before,
+    .ui.basic[class*="pointing below"].label::before {
       bottom: auto;
       top: 100%;
       margin-top: -@basicPointingTriangleOffset;
     }
     /*--- Left ---*/
-    .ui.basic[class*="left pointing"].label:before {
+    .ui.basic[class*="left pointing"].label::before {
       top: 50%;
       left: @basicPointingTriangleOffset;
     }
     /*--- Right ---*/
-    .ui.basic[class*="right pointing"].label:before {
+    .ui.basic[class*="right pointing"].label::before {
       top: 50%;
       right: @basicPointingTriangleOffset;
     }