feat(input): file input variant

This PR styles the file input field so it has the same look as normal input fields by adding a file variant to the input element. It also supports using action inputs for file inputs, if one needs additional features like icons. If not using an action input i also added color variants to support colors for the native file input trigger button. It also adds an invisible file input, in case one does not need the filepath being shown and only needs a button. See examples in the jsfiddle
fomantic · Nov 2, 2021 · f14cf4b · f14cf4b
1 parent 951277d
commit f14cf4b
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 1 deletion.
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
@@ -66,10 +66,12 @@
 .ui.form .field > label {
   display: block;
   margin: @labelMargin;
-  color: @labelColor;
   font-size: @labelFontSize;
   font-weight: @labelFontWeight;
   text-transform: @labelTextTransform;
+  &:not(.button) {
+    color: @labelColor;
+  }
 }
 
 /*--------------------

diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less
@@ -563,6 +563,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
 ---------------------*/

diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables
@@ -85,6 +85,18 @@
 /* Loader */
 @invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
 
+/* file */
+@fileButtonMargin: 1em;
+@fileButtonTextColor: @mutedTextColor;
+@fileButtonTextColorHover: @hoveredTextColor;
+@fileButtonBackground: #e0e1e2;
+@fileButtonBackgroundHover: #cacbcd;
+@fileButtonFontWeight: @bold;
+
+@fileButtonInvertedBackground: #e0e1e2;
+@fileButtonInvertedBackgroundHover: @white;
+@fileButtonInvertedTextColor: @mutedTextColor;
+
 /*-------------------
       Variations
 --------------------*/

diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -122,6 +122,8 @@
 @variationInputLabeled: true;
 @variationInputAction: true;
 @variationInputFluid: true;
+@variationInputFile: true;
+@variationInputColors: @variationAllColors;
 @variationInputSizes: @variationAllSizes;
 
 /* Label */