2d3ca553 |
1 | @charset "UTF-8"; |
2 | |
3 | //// |
4 | /// @type list |
5 | /// |
6 | /// @require {function} _assign-inputs |
7 | /// |
8 | /// @require {variable} $_text-inputs-list |
9 | //// |
10 | |
11 | /// A list of all _text-based_ HTML inputs. Please note that you must |
12 | /// interpolate the variable (`#{}`) to use it as a selector. |
13 | /// |
14 | /// @example scss |
15 | /// #{$all-text-inputs} { |
16 | /// border: 1px solid #ccc; |
17 | /// } |
18 | /// |
19 | /// // CSS Output |
20 | /// [type='color'], |
21 | /// [type='date'], |
22 | /// [type='datetime'], |
23 | /// [type='datetime-local'], |
24 | /// [type='email'], |
25 | /// [type='month'], |
26 | /// [type='number'], |
27 | /// [type='password'], |
28 | /// [type='search'], |
29 | /// [type='tel'], |
30 | /// [type='text'], |
31 | /// [type='time'], |
32 | /// [type='url'], |
33 | /// [type='week'], |
34 | /// input:not([type]), |
35 | /// textarea { |
36 | /// border: 1px solid #ccc; |
37 | /// } |
38 | |
39 | $all-text-inputs: _assign-inputs($_text-inputs-list); |
40 | |
41 | /// A list of all _text-based_ HTML inputs with the `:active` pseudo-class |
42 | /// applied. Please note that you must interpolate the variable (`#{}`) to use |
43 | /// it as a selector. |
44 | /// |
45 | /// @example scss |
46 | /// #{$all-text-inputs-active} { |
47 | /// border: 1px solid #aaa; |
48 | /// } |
49 | /// |
50 | /// // CSS Output |
51 | /// [type='color']:active, |
52 | /// [type='date']:active, |
53 | /// [type='datetime']:active, |
54 | /// [type='datetime-local']:active, |
55 | /// [type='email']:active, |
56 | /// [type='month']:active, |
57 | /// [type='number']:active, |
58 | /// [type='password']:active, |
59 | /// [type='search']:active, |
60 | /// [type='tel']:active, |
61 | /// [type='text']:active, |
62 | /// [type='time']:active, |
63 | /// [type='url']:active, |
64 | /// [type='week']:active, |
65 | /// input:not([type]):active, |
66 | /// textarea:active { |
67 | /// border: 1px solid #aaa; |
68 | /// } |
69 | |
70 | $all-text-inputs-active: _assign-inputs($_text-inputs-list, active); |
71 | |
72 | /// A list of all _text-based_ HTML inputs with the `:focus` pseudo-class |
73 | /// applied. Please note that you must interpolate the variable (`#{}`) to use |
74 | /// it as a selector. |
75 | /// |
76 | /// @example scss |
77 | /// #{$all-text-inputs-focus} { |
78 | /// border: 1px solid #1565c0; |
79 | /// } |
80 | /// |
81 | /// // CSS Output |
82 | /// [type='color']:focus, |
83 | /// [type='date']:focus, |
84 | /// [type='datetime']:focus, |
85 | /// [type='datetime-local']:focus, |
86 | /// [type='email']:focus, |
87 | /// [type='month']:focus, |
88 | /// [type='number']:focus, |
89 | /// [type='password']:focus, |
90 | /// [type='search']:focus, |
91 | /// [type='tel']:focus, |
92 | /// [type='text']:focus, |
93 | /// [type='time']:focus, |
94 | /// [type='url']:focus, |
95 | /// [type='week']:focus, |
96 | /// input:not([type]):focus, |
97 | /// textarea:focus { |
98 | /// border: 1px solid #1565c0; |
99 | /// } |
100 | |
101 | $all-text-inputs-focus: _assign-inputs($_text-inputs-list, focus); |
102 | |
103 | /// A list of all _text-based_ HTML inputs with the `:hover` pseudo-class |
104 | /// applied. Please note that you must interpolate the variable (`#{}`) to use |
105 | /// it as a selector. |
106 | /// |
107 | /// @example scss |
108 | /// #{$all-text-inputs-hover} { |
109 | /// border: 1px solid #aaa; |
110 | /// } |
111 | /// |
112 | /// // CSS Output |
113 | /// [type='color']:hover, |
114 | /// [type='date']:hover, |
115 | /// [type='datetime']:hover, |
116 | /// [type='datetime-local']:hover, |
117 | /// [type='email']:hover, |
118 | /// [type='month']:hover, |
119 | /// [type='number']:hover, |
120 | /// [type='password']:hover, |
121 | /// [type='search']:hover, |
122 | /// [type='tel']:hover, |
123 | /// [type='text']:hover, |
124 | /// [type='time']:hover, |
125 | /// [type='url']:hover, |
126 | /// [type='week']:hover, |
127 | /// input:not([type]):hover, |
128 | /// textarea:hover { |
129 | /// border: 1px solid #aaa; |
130 | /// } |
131 | |
132 | $all-text-inputs-hover: _assign-inputs($_text-inputs-list, hover); |
133 | |
134 | /// A list of all _text-based_ HTML inputs with the `:invalid` pseudo-class |
135 | /// applied. Please note that you must interpolate the variable (`#{}`) to use |
136 | /// it as a selector. |
137 | /// |
138 | /// @example scss |
139 | /// #{$all-text-inputs-invalid} { |
140 | /// border: 1px solid #00f; |
141 | /// } |
142 | /// |
143 | /// // CSS Output |
144 | /// [type='color']:invalid, |
145 | /// [type='date']:invalid, |
146 | /// [type='datetime']:invalid, |
147 | /// [type='datetime-local']:invalid, |
148 | /// [type='email']:invalid, |
149 | /// [type='month']:invalid, |
150 | /// [type='number']:invalid, |
151 | /// [type='password']:invalid, |
152 | /// [type='search']:invalid, |
153 | /// [type='tel']:invalid, |
154 | /// [type='text']:invalid, |
155 | /// [type='time']:invalid, |
156 | /// [type='url']:invalid, |
157 | /// [type='week']:invalid, |
158 | /// input:not([type]):invalid, |
159 | /// textarea:invalid { |
160 | /// border: 1px solid #00f; |
161 | /// } |
162 | |
163 | $all-text-inputs-invalid: _assign-inputs($_text-inputs-list, invalid); |