Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bourbon/library/_text-inputs.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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);