|
0
|
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);
|
