Skip to content

Commit f14cf4b

Browse files
lubber-delubber-de
authored
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
1 parent 951277d commit f14cf4b

File tree

4 files changed

+170
-1
lines changed

4 files changed

+170
-1
lines changed

‎src/definitions/collections/form.less

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,12 @@
6666
.ui.form .field > label {
6767
display: block;
6868
margin: @labelMargin;
69-
color: @labelColor;
7069
font-size: @labelFontSize;
7170
font-weight: @labelFontWeight;
7271
text-transform: @labelTextTransform;
72+
&:not(.button) {
73+
color: @labelColor;
74+
}
7375
}
7476

7577
/*--------------------

‎src/definitions/elements/input.less

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -563,6 +563,159 @@
563563
}
564564
}
565565

566+
567+
& when (@variationInputFile) {
568+
/*--------------------
569+
File
570+
---------------------*/
571+
572+
/* width hack for chrome/edge */
573+
.ui.file.input {
574+
width: 100%;
575+
& input[type="file"] {
576+
width: 0;
577+
}
578+
}
579+
580+
.ui.form .field > input[type="file"],
581+
.ui.file.input:not(.action) input[type="file"] {
582+
padding: 0;
583+
}
584+
585+
.ui.action.file.input input[type="file"]::-webkit-file-upload-button {
586+
display: none;
587+
}
588+
.ui.form .field input[type="file"]::-webkit-file-upload-button,
589+
.ui.file.input input[type="file"]::-webkit-file-upload-button {
590+
border: none;
591+
cursor: pointer;
592+
padding: @padding;
593+
margin-right: @fileButtonMargin;
594+
background: @fileButtonBackground;
595+
font-weight: @fileButtonFontWeight;
596+
color: @fileButtonTextColor;
597+
&:hover {
598+
background: @fileButtonBackgroundHover;
599+
color: @fileButtonTextColor;
600+
}
601+
}
602+
.ui.action.file.input input[type="file"]::-ms-browse {
603+
display: none;
604+
}
605+
.ui.form .field input[type="file"]::-ms-browse,
606+
.ui.file.input input[type="file"]::-ms-browse {
607+
border: none;
608+
cursor: pointer;
609+
padding: @padding;
610+
margin: 0;
611+
background: @fileButtonBackground;
612+
font-weight: @fileButtonFontWeight;
613+
color: @fileButtonTextColor;
614+
&:hover {
615+
background: @fileButtonBackgroundHover;
616+
color: @fileButtonTextColor;
617+
}
618+
}
619+
/* IE needs additional styling for input field :S */
620+
@media all and (-ms-high-contrast:none) {
621+
.ui.file.input > input[type="file"],
622+
input[type="file"].ui.file.input {
623+
padding: 0 !important;
624+
}
625+
}
626+
627+
.ui.action.file.input input[type="file"]::file-selector-button {
628+
display: none;
629+
}
630+
.ui.form .field input[type="file"]::file-selector-button,
631+
.ui.file.input input[type="file"]::file-selector-button {
632+
border: none;
633+
cursor: pointer;
634+
padding: @padding;
635+
margin-right: @fileButtonMargin;
636+
background: @fileButtonBackground;
637+
font-weight: @fileButtonFontWeight;
638+
color: @fileButtonTextColor;
639+
&:hover {
640+
background: @fileButtonBackgroundHover;
641+
color: @fileButtonTextColor;
642+
}
643+
}
644+
645+
.ui.form .field input[type="file"]:required:invalid,
646+
.ui.file.input input[type="file"]:required:invalid {
647+
color: @negativeTextColor;
648+
background: @negativeBackgroundColor ;
649+
border-color: @negativeBorderColor;
650+
}
651+
652+
input[type="file"].ui.invisible.file.input,
653+
.ui.invisible.file.input input[type="file"] {
654+
left: -99999px;
655+
position: absolute;
656+
}
657+
658+
input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary),
659+
.ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) {
660+
background: @fileButtonBackgroundHover;
661+
color: @hoveredTextColor;
662+
&.inverted {
663+
background: @fileButtonInvertedBackgroundHover;
664+
}
665+
}
666+
667+
/* this is related to existing buttons, so the button color variable is used here! */
668+
& when not (@variationButtonColors = false) {
669+
each(@variationButtonColors, {
670+
@color: @value;
671+
@h: @colors[@@color][hover];
672+
@lh: @colors[@@color][lightHover];
673+
674+
input[type="file"].ui.file.input:focus + label.ui.@{color}.button:not(.basic):not(.tertiary),
675+
.ui.file.input input[type="file"]:focus + label.ui.@{color}.button:not(.basic):not(.tertiary) {
676+
background-color: @h;
677+
color: @white;
678+
&.inverted when (@variationButtonInverted) {
679+
background-color: @lh;
680+
}
681+
}
682+
})
683+
}
684+
685+
& when not (@variationInputColors = false) {
686+
each(@variationInputColors, {
687+
@color: @value;
688+
@c: @colors[@@color][color];
689+
@h: @colors[@@color][hover];
690+
691+
input[type="file"].ui.@{color}.file.input::-webkit-file-upload-button,
692+
.ui.@{color}.file.input input[type="file"]::-webkit-file-upload-button {
693+
background: @c;
694+
color: @white;
695+
&:hover {
696+
background: @h;
697+
}
698+
}
699+
input[type="file"].ui.@{color}.file.input::-ms-browse,
700+
.ui.@{color}.file.input input[type="file"]::-ms-browse {
701+
background: @c;
702+
color: @white;
703+
&:hover {
704+
background: @h;
705+
}
706+
}
707+
input[type="file"].ui.@{color}.file.input::file-selector-button,
708+
.ui.@{color}.file.input input[type="file"]::file-selector-button {
709+
background: @c;
710+
color: @white;
711+
&:hover {
712+
background: @h;
713+
}
714+
}
715+
})
716+
}
717+
}
718+
566719
/*--------------------
567720
Size
568721
---------------------*/

‎src/themes/default/elements/input.variables

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,18 @@
8585
/* Loader */
8686
@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
8787

88+
/* file */
89+
@fileButtonMargin: 1em;
90+
@fileButtonTextColor: @mutedTextColor;
91+
@fileButtonTextColorHover: @hoveredTextColor;
92+
@fileButtonBackground: #e0e1e2;
93+
@fileButtonBackgroundHover: #cacbcd;
94+
@fileButtonFontWeight: @bold;
95+
96+
@fileButtonInvertedBackground: #e0e1e2;
97+
@fileButtonInvertedBackgroundHover: @white;
98+
@fileButtonInvertedTextColor: @mutedTextColor;
99+
88100
/*-------------------
89101
Variations
90102
--------------------*/

‎src/themes/default/globals/variation.variables

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,8 @@
122122
@variationInputLabeled: true;
123123
@variationInputAction: true;
124124
@variationInputFluid: true;
125+
@variationInputFile: true;
126+
@variationInputColors: @variationAllColors;
125127
@variationInputSizes: @variationAllSizes;
126128

127129
/* Label */

0 commit comments

Comments
 (0)