1 |
|
2 | .next-sr-only {
|
3 | position: absolute;
|
4 | width: 1px;
|
5 | height: 1px;
|
6 | padding: 0;
|
7 | overflow: hidden;
|
8 | clip: rect(0, 0, 0, 0);
|
9 | white-space: nowrap;
|
10 | border: 0;
|
11 | top: 0;
|
12 | margin: -1px; }
|
13 |
|
14 | .next-number-picker {
|
15 | box-sizing: border-box;
|
16 | display: inline-block;
|
17 | }
|
18 | .next-number-picker *,
|
19 | .next-number-picker *:before,
|
20 | .next-number-picker *:after {
|
21 | box-sizing: border-box; }
|
22 | .next-number-picker .next-btn {
|
23 | padding: 0 !important;
|
24 | line-height: 0 !important;
|
25 | box-shadow: none !important; }
|
26 | .next-number-picker-normal .next-input {
|
27 | width: 100%; }
|
28 | .next-number-picker-normal .next-input .next-input-control {
|
29 | padding-right: 0;
|
30 | height: 100%; }
|
31 | .next-number-picker-normal:not(.next-number-picker-no-trigger) .next-input input {
|
32 | padding-right: 2px; }
|
33 | .next-number-picker-normal .next-btn {
|
34 | display: block; }
|
35 | .next-number-picker-normal .next-btn:hover {
|
36 | z-index: 1; }
|
37 | .next-number-picker-normal .next-btn:first-child {
|
38 | border-right: none;
|
39 | border-top: none;
|
40 | height: 50%;
|
41 | border-top-left-radius: 0;
|
42 | border-bottom-left-radius: 0;
|
43 | border-bottom-right-radius: 0; }
|
44 | .next-number-picker-normal .next-btn:last-child {
|
45 | border-right: none;
|
46 | border-bottom: none;
|
47 | margin-top: -1px;
|
48 | height: calc(50% + 1px);
|
49 | border-top-left-radius: 0;
|
50 | border-bottom-left-radius: 0;
|
51 | border-top-right-radius: 0; }
|
52 | .next-number-picker-normal .next-number-picker-handler {
|
53 | transition: opacity 100ms linear;
|
54 | transition: opacity var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
|
55 | height: 100%;
|
56 | display: block; }
|
57 | .next-number-picker-normal:not(.next-number-picker-show-trigger) .next-number-picker-handler {
|
58 | opacity: 0; }
|
59 | .next-number-picker-normal:hover .next-number-picker-handler,
|
60 | .next-number-picker-normal.hover .next-number-picker-handler {
|
61 | opacity: 1; }
|
62 | .next-number-picker-normal .next-input.next-disabled .next-number-picker-handler {
|
63 | opacity: 0; }
|
64 | .next-number-picker-normal .next-number-picker-up-icon::before {
|
65 | content: "";
|
66 | content: var(--number-picker-normal-up-icon, ""); }
|
67 | .next-number-picker-normal .next-number-picker-down-icon::before {
|
68 | content: "";
|
69 | content: var(--number-picker-normal-down-icon, ""); }
|
70 | .next-number-picker-normal.next-small {
|
71 | width: 68px; }
|
72 | .next-number-picker-normal.next-small .next-btn {
|
73 | width: 20px;
|
74 | width: var(--number-picker-normal-s-button-width, 20px); }
|
75 | .next-number-picker-normal.next-small .next-btn:first-child {
|
76 | border-top-right-radius: 3px;
|
77 | border-top-right-radius: var(--form-element-small-corner, 3px); }
|
78 | .next-number-picker-normal.next-small .next-btn:last-child {
|
79 | border-bottom-right-radius: 3px;
|
80 | border-bottom-right-radius: var(--form-element-small-corner, 3px); }
|
81 | .next-number-picker-normal.next-small .next-icon:before,
|
82 | .next-number-picker-normal.next-small .next-icon .next-icon-remote {
|
83 | width: 8px;
|
84 | width: var(--number-picker-normal-s-button-icon-size, 8px);
|
85 | font-size: 8px;
|
86 | font-size: var(--number-picker-normal-s-button-icon-size, 8px);
|
87 | line-height: inherit; }
|
88 | @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
|
89 | .next-number-picker-normal.next-small .next-icon {
|
90 | transform: scale(0.5);
|
91 | margin-left: -4px;
|
92 | margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--number-picker-normal-s-button-icon-size, 8px)/2);
|
93 | margin-right: -4px;
|
94 | margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--number-picker-normal-s-button-icon-size, 8px)/2); }
|
95 | .next-number-picker-normal.next-small .next-icon:before {
|
96 | width: 16px;
|
97 | width: var(--icon-s, 16px);
|
98 | font-size: 16px;
|
99 | font-size: var(--icon-s, 16px); } }
|
100 | .next-number-picker-normal.next-medium {
|
101 | width: 80px;
|
102 | width: var(--number-picker-normal-m-input-width, 80px); }
|
103 | .next-number-picker-normal.next-medium .next-btn {
|
104 | width: 20px;
|
105 | width: var(--number-picker-normal-m-button-width, 20px); }
|
106 | .next-number-picker-normal.next-medium .next-btn:first-child {
|
107 | border-top-right-radius: 3px;
|
108 | border-top-right-radius: var(--form-element-medium-corner, 3px); }
|
109 | .next-number-picker-normal.next-medium .next-btn:last-child {
|
110 | border-bottom-right-radius: 3px;
|
111 | border-bottom-right-radius: var(--form-element-medium-corner, 3px); }
|
112 | .next-number-picker-normal.next-medium .next-icon:before,
|
113 | .next-number-picker-normal.next-medium .next-icon .next-icon-remote {
|
114 | width: 8px;
|
115 | width: var(--number-picker-normal-m-button-icon-size, 8px);
|
116 | font-size: 8px;
|
117 | font-size: var(--number-picker-normal-m-button-icon-size, 8px);
|
118 | line-height: inherit; }
|
119 | @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
|
120 | .next-number-picker-normal.next-medium .next-icon {
|
121 | transform: scale(0.5);
|
122 | margin-left: -4px;
|
123 | margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--number-picker-normal-m-button-icon-size, 8px)/2);
|
124 | margin-right: -4px;
|
125 | margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--number-picker-normal-m-button-icon-size, 8px)/2); }
|
126 | .next-number-picker-normal.next-medium .next-icon:before {
|
127 | width: 16px;
|
128 | width: var(--icon-s, 16px);
|
129 | font-size: 16px;
|
130 | font-size: var(--icon-s, 16px); } }
|
131 | .next-number-picker-normal.next-large {
|
132 | width: 80px;
|
133 | width: var(--number-picker-normal-l-input-width, 80px); }
|
134 | .next-number-picker-normal.next-large .next-btn {
|
135 | width: 20px;
|
136 | width: var(--number-picker-normal-l-button-width, 20px); }
|
137 | .next-number-picker-normal.next-large .next-btn:first-child {
|
138 | border-top-right-radius: 3px;
|
139 | border-top-right-radius: var(--form-element-large-corner, 3px); }
|
140 | .next-number-picker-normal.next-large .next-btn:last-child {
|
141 | border-bottom-right-radius: 3px;
|
142 | border-bottom-right-radius: var(--form-element-large-corner, 3px); }
|
143 | .next-number-picker-normal.next-large .next-icon:before,
|
144 | .next-number-picker-normal.next-large .next-icon .next-icon-remote {
|
145 | width: 8px;
|
146 | width: var(--number-picker-normal-l-button-icon-size, 8px);
|
147 | font-size: 8px;
|
148 | font-size: var(--number-picker-normal-l-button-icon-size, 8px);
|
149 | line-height: inherit; }
|
150 | @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
|
151 | .next-number-picker-normal.next-large .next-icon {
|
152 | transform: scale(0.5);
|
153 | margin-left: -4px;
|
154 | margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--number-picker-normal-l-button-icon-size, 8px)/2);
|
155 | margin-right: -4px;
|
156 | margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--number-picker-normal-l-button-icon-size, 8px)/2); }
|
157 | .next-number-picker-normal.next-large .next-icon:before {
|
158 | width: 16px;
|
159 | width: var(--icon-s, 16px);
|
160 | font-size: 16px;
|
161 | font-size: var(--icon-s, 16px); } }
|
162 | .next-number-picker-inline input {
|
163 | text-align: center; }
|
164 | .next-number-picker-inline .next-input input {
|
165 | padding: 0; }
|
166 | .next-number-picker-inline .next-number-picker-add-icon::before {
|
167 | content: "";
|
168 | content: var(--number-picker-inline-add-icon, ""); }
|
169 | .next-number-picker-inline .next-number-picker-minus-icon::before {
|
170 | content: "";
|
171 | content: var(--number-picker-inline-minus-icon, ""); }
|
172 | .next-number-picker-inline.next-small {
|
173 | width: 68px;
|
174 | min-width: 60px;
|
175 | min-width: calc(var(--form-element-small-height, 20px)*3); }
|
176 | .next-number-picker-inline.next-small .next-icon:before,
|
177 | .next-number-picker-inline.next-small .next-icon .next-icon-remote {
|
178 | width: 12px;
|
179 | width: var(--number-picker-inline-s-button-icon-size, 12px);
|
180 | font-size: 12px;
|
181 | font-size: var(--number-picker-inline-s-button-icon-size, 12px);
|
182 | line-height: inherit; }
|
183 | .next-number-picker-inline.next-small .next-btn {
|
184 | height: 20px;
|
185 | height: var(--form-element-small-height, 20px); }
|
186 | .next-number-picker-inline.next-small .next-before .next-btn {
|
187 | margin-right: 2px;
|
188 | margin-right: var(--number-picker-inline-s-button-margin, 2px);
|
189 | border-top-left-radius: 3px;
|
190 | border-top-left-radius: var(--number-picker-inline-s-button-corner, 3px);
|
191 | border-bottom-left-radius: 3px;
|
192 | border-bottom-left-radius: var(--number-picker-inline-s-button-corner, 3px); }
|
193 | .next-number-picker-inline.next-small .next-after .next-btn {
|
194 | margin-left: 2px;
|
195 | margin-left: var(--number-picker-inline-s-button-margin, 2px);
|
196 | border-top-right-radius: 3px;
|
197 | border-top-right-radius: var(--number-picker-inline-s-button-corner, 3px);
|
198 | border-bottom-right-radius: 3px;
|
199 | border-bottom-right-radius: var(--number-picker-inline-s-button-corner, 3px); }
|
200 | .next-number-picker-inline.next-medium {
|
201 | width: 100px;
|
202 | width: var(--number-picker-inline-m-input-width, 100px);
|
203 | min-width: 84px;
|
204 | min-width: calc(var(--form-element-medium-height, 28px)*3); }
|
205 | .next-number-picker-inline.next-medium .next-icon:before,
|
206 | .next-number-picker-inline.next-medium .next-icon .next-icon-remote {
|
207 | width: 12px;
|
208 | width: var(--number-picker-inline-m-button-icon-size, 12px);
|
209 | font-size: 12px;
|
210 | font-size: var(--number-picker-inline-m-button-icon-size, 12px);
|
211 | line-height: inherit; }
|
212 | .next-number-picker-inline.next-medium .next-btn {
|
213 | height: 28px;
|
214 | height: var(--form-element-medium-height, 28px); }
|
215 | .next-number-picker-inline.next-medium .next-before .next-btn {
|
216 | margin-right: 2px;
|
217 | margin-right: var(--number-picker-inline-m-button-margin, 2px);
|
218 | border-top-left-radius: 3px;
|
219 | border-top-left-radius: var(--number-picker-inline-m-button-corner, 3px);
|
220 | border-bottom-left-radius: 3px;
|
221 | border-bottom-left-radius: var(--number-picker-inline-m-button-corner, 3px); }
|
222 | .next-number-picker-inline.next-medium .next-after .next-btn {
|
223 | margin-left: 2px;
|
224 | margin-left: var(--number-picker-inline-m-button-margin, 2px);
|
225 | border-top-right-radius: 3px;
|
226 | border-top-right-radius: var(--number-picker-inline-m-button-corner, 3px);
|
227 | border-bottom-right-radius: 3px;
|
228 | border-bottom-right-radius: var(--number-picker-inline-m-button-corner, 3px); }
|
229 | .next-number-picker-inline.next-large {
|
230 | width: 128px;
|
231 | width: var(--number-picker-inline-l-input-width, 128px);
|
232 | min-width: 120px;
|
233 | min-width: calc(var(--form-element-large-height, 40px)*3); }
|
234 | .next-number-picker-inline.next-large .next-icon:before,
|
235 | .next-number-picker-inline.next-large .next-icon .next-icon-remote {
|
236 | width: 12px;
|
237 | width: var(--number-picker-inline-l-button-icon-size, 12px);
|
238 | font-size: 12px;
|
239 | font-size: var(--number-picker-inline-l-button-icon-size, 12px);
|
240 | line-height: inherit; }
|
241 | .next-number-picker-inline.next-large .next-btn {
|
242 | height: 40px;
|
243 | height: var(--form-element-large-height, 40px); }
|
244 | .next-number-picker-inline.next-large .next-before .next-btn {
|
245 | margin-right: 2px;
|
246 | margin-right: var(--number-picker-inline-l-button-margin, 2px);
|
247 | border-top-left-radius: 3px;
|
248 | border-top-left-radius: var(--number-picker-inline-l-button-corner, 3px);
|
249 | border-bottom-left-radius: 3px;
|
250 | border-bottom-left-radius: var(--number-picker-inline-l-button-corner, 3px); }
|
251 | .next-number-picker-inline.next-large .next-after .next-btn {
|
252 | margin-left: 2px;
|
253 | margin-left: var(--number-picker-inline-l-button-margin, 2px);
|
254 | border-top-right-radius: 3px;
|
255 | border-top-right-radius: var(--number-picker-inline-l-button-corner, 3px);
|
256 | border-bottom-right-radius: 3px;
|
257 | border-bottom-right-radius: var(--number-picker-inline-l-button-corner, 3px); }
|
258 | .next-number-picker-inline .next-btn.next-small {
|
259 | width: 20px;
|
260 | width: var(--form-element-small-height, 20px); }
|
261 | .next-number-picker-inline .next-btn.next-medium {
|
262 | width: 28px;
|
263 | width: var(--form-element-medium-height, 28px); }
|
264 | .next-number-picker-inline .next-btn.next-large {
|
265 | width: 40px;
|
266 | width: var(--form-element-large-height, 40px); }
|
267 |
|
268 | @-moz-document url-prefix() {
|
269 | .next-number-picker-normal.next-small .next-number-picker-handler {
|
270 | height: 18px;
|
271 | height: calc(var(--form-element-small-height, 20px) - 2px); }
|
272 | .next-number-picker-normal.next-medium .next-number-picker-handler {
|
273 | height: 26px;
|
274 | height: calc(var(--form-element-medium-height, 28px) - 2px); }
|
275 | .next-number-picker-normal.next-large .next-number-picker-handler {
|
276 | height: 38px;
|
277 | height: calc(var(--form-element-large-height, 40px) - 2px); } }
|
278 |
|
279 | .next-number-picker-normal[dir="rtl"] .next-btn:first-child {
|
280 | border-right: 1px solid #C4C6CF;
|
281 | border-right: 1px solid var(--color-line1-3, #C4C6CF);
|
282 | border-left: 0;
|
283 | border-top-right-radius: 0; }
|
284 | .next-number-picker-normal[dir="rtl"] .next-btn:first-child.next-small {
|
285 | border-top-left-radius: 3px;
|
286 | border-top-left-radius: var(--form-element-small-corner, 3px); }
|
287 | .next-number-picker-normal[dir="rtl"] .next-btn:first-child.next-medium {
|
288 | border-top-left-radius: 3px;
|
289 | border-top-left-radius: var(--form-element-medium-corner, 3px); }
|
290 | .next-number-picker-normal[dir="rtl"] .next-btn:first-child.next-large {
|
291 | border-top-left-radius: 3px;
|
292 | border-top-left-radius: var(--form-element-large-corner, 3px); }
|
293 |
|
294 | .next-number-picker-normal[dir="rtl"] .next-btn:last-child {
|
295 | border-right: 1px solid #C4C6CF;
|
296 | border-right: 1px solid var(--color-line1-3, #C4C6CF);
|
297 | border-left: 0;
|
298 | border-bottom-right-radius: 0; }
|
299 | .next-number-picker-normal[dir="rtl"] .next-btn:last-child.next-small {
|
300 | border-bottom-left-radius: 3px;
|
301 | border-bottom-left-radius: var(--form-element-small-corner, 3px); }
|
302 | .next-number-picker-normal[dir="rtl"] .next-btn:last-child.next-medium {
|
303 | border-bottom-left-radius: 3px;
|
304 | border-bottom-left-radius: var(--form-element-medium-corner, 3px); }
|
305 | .next-number-picker-normal[dir="rtl"] .next-btn:last-child.next-large {
|
306 | border-bottom-left-radius: 3px;
|
307 | border-bottom-left-radius: var(--form-element-large-corner, 3px); }
|
308 |
|
309 | .next-number-picker-normal[dir="rtl"] .next-input .next-input-control {
|
310 | padding-left: 0; }
|
311 |
|
312 | .next-number-picker-inline[dir="rtl"] .next-before .next-btn {
|
313 | margin-right: 0; }
|
314 | .next-number-picker-inline[dir="rtl"] .next-before .next-btn.next-small {
|
315 | margin-left: 2px;
|
316 | margin-left: var(--number-picker-inline-s-button-margin, 2px);
|
317 | border-top-right-radius: 3px !important;
|
318 | border-top-right-radius: var(--number-picker-inline-s-button-corner, 3px) !important;
|
319 | border-bottom-right-radius: 3px !important;
|
320 | border-bottom-right-radius: var(--number-picker-inline-s-button-corner, 3px) !important; }
|
321 | .next-number-picker-inline[dir="rtl"] .next-before .next-btn.next-medium {
|
322 | margin-left: 2px;
|
323 | margin-left: var(--number-picker-inline-m-button-margin, 2px);
|
324 | border-top-right-radius: 3px !important;
|
325 | border-top-right-radius: var(--number-picker-inline-m-button-corner, 3px) !important;
|
326 | border-bottom-right-radius: 3px !important;
|
327 | border-bottom-right-radius: var(--number-picker-inline-m-button-corner, 3px) !important; }
|
328 | .next-number-picker-inline[dir="rtl"] .next-before .next-btn.next-large {
|
329 | margin-left: 2px;
|
330 | margin-left: var(--number-picker-inline-l-button-margin, 2px);
|
331 | border-top-right-radius: 3px !important;
|
332 | border-top-right-radius: var(--number-picker-inline-l-button-corner, 3px) !important;
|
333 | border-bottom-right-radius: 3px !important;
|
334 | border-bottom-right-radius: var(--number-picker-inline-l-button-corner, 3px) !important; }
|
335 |
|
336 | .next-number-picker-inline[dir="rtl"] .next-after .next-btn {
|
337 | margin-left: 0; }
|
338 | .next-number-picker-inline[dir="rtl"] .next-after .next-btn.next-small {
|
339 | margin-right: 2px;
|
340 | margin-right: var(--number-picker-inline-s-button-margin, 2px);
|
341 | border-top-left-radius: 3px !important;
|
342 | border-top-left-radius: var(--number-picker-inline-s-button-corner, 3px) !important;
|
343 | border-bottom-left-radius: 3px !important;
|
344 | border-bottom-left-radius: var(--number-picker-inline-s-button-corner, 3px) !important; }
|
345 | .next-number-picker-inline[dir="rtl"] .next-after .next-btn.next-medium {
|
346 | margin-right: 2px;
|
347 | margin-right: var(--number-picker-inline-m-button-margin, 2px);
|
348 | border-top-left-radius: 3px !important;
|
349 | border-top-left-radius: var(--number-picker-inline-m-button-corner, 3px) !important;
|
350 | border-bottom-left-radius: 3px !important;
|
351 | border-bottom-left-radius: var(--number-picker-inline-m-button-corner, 3px) !important; }
|
352 | .next-number-picker-inline[dir="rtl"] .next-after .next-btn.next-large {
|
353 | margin-right: 2px;
|
354 | margin-right: var(--number-picker-inline-l-button-margin, 2px);
|
355 | border-top-left-radius: 3px !important;
|
356 | border-top-left-radius: var(--number-picker-inline-l-button-corner, 3px) !important;
|
357 | border-bottom-left-radius: 3px !important;
|
358 | border-bottom-left-radius: var(--number-picker-inline-l-button-corner, 3px) !important; }
|