Experiments page.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / utils / bourbon / library / _text-inputs.scss
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);