ASCII text
1
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select) {
2
background: var(--color-input);
3
color: var(--color-input-text);
4
box-shadow: var(--shadow-input);
5
border: var(--border-input);
6
min-height: var(--height-input);
7
padding: var(--padding-input);
8
border-radius: var(--radius-input);
9
min-width: var(--min-width-input);
10
flex: 1 0 auto;
11
appearance: none;
12
}
13
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):focus {
15
background: var(--color-input-active);
16
color: var(--color-input-active-text);
17
box-shadow: var(--shadow-input-active);
18
border: var(--border-input-active);
19
}
20
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):hover {
22
background: var(--color-input-hover);
23
color: var(--color-input-hover-text);
24
box-shadow: var(--shadow-input-hover);
25
border: var(--border-input-hover);
26
}
27
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):hover::placeholder {
29
color: var(--color-input-hover-text);
30
}
31
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select):focus::placeholder {
33
color: var(--color-input-focus-text);
34
}
35
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select)::placeholder {
37
color: var(--color-input-text);
38
}
39
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat {
41
background: var(--color-flat-input);
42
color: var(--color-flat-input-text);
43
box-shadow: var(--shadow-flat-input);
44
border: var(--border-flat-input);
45
border-radius: var(--radius-flat-input);
46
}
47
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:focus {
49
background: var(--color-flat-input-active);
50
color: var(--color-flat-input-active-text);
51
box-shadow: var(--shadow-flat-input-active);
52
border: var(--border-flat-input-active);
53
}
54
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:hover {
56
background: var(--color-flat-input-hover);
57
color: var(--color-flat-input-hover-text);
58
box-shadow: var(--shadow-flat-input-hover);
59
border: var(--border-flat-input-hover);
60
}
61
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:hover::placeholder {
63
color: var(--color-flat-input-hover-text);
64
}
65
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select).input-flat:focus::placeholder {
67
color: var(--color-flat-input-focus-text);
68
}
69
.input-flat::placeholder {
71
color: var(--color-flat-input-text);
72
}
73
/* ICONS */
75
input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator, input[type="search"]::-webkit-search-cancel-button {
77
display: block;
78
width: var(--size-input-icon);
79
height: var(--size-input-icon);
80
padding: 0;
81
background: currentColor;
82
-webkit-mask: var(--input-icon);
83
mask: var(--input-icon);
84
appearance: none;
85
}
86
input:is([type="date"]) {
88
--input-icon: url("./icons/input-date.svg");
89
}
90
input:is([type="month"]) {
92
--input-icon: url("./icons/input-month.svg");
93
}
94
input:is([type="week"]) {
96
--input-icon: url("./icons/input-week.svg");
97
}
98
input:is([type="datetime-local"]) {
100
--input-icon: url("./icons/input-datetime-local.svg");
101
}
102
input:is([type="time"]) {
104
--input-icon: url("./icons/input-time.svg");
105
}
106
input:is([type="search"]) {
108
--input-icon: url("./icons/search-delete.svg");
109
}
110
select {
112
appearance: auto;
113
position: relative;
114
appearance: none;
115
}
116
label:has(input:not([type=checkbox], [type=radio]), select) {
118
display: inline-flex;
119
flex-direction: column;
120
gap: var(--gap-label-input);
121
align-items: stretch;
122
}
123
label:has(input:not([type=checkbox], [type=radio]), select).horizontal-label {
125
flex-direction: row;
126
}
127
input:not(:is(:user-invalid, [aria-invalid="true"])) ~ .input-error-text {
129
display: none;
130
}
131