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-radio-button-large[dir='rtl'] > label:first-child {
|
15 | margin-left: -1px;
|
16 | border-top-right-radius: 3px;
|
17 | border-top-right-radius: var(--radio-button-corner-large, 3px);
|
18 | border-bottom-right-radius: 3px;
|
19 | border-bottom-right-radius: var(--radio-button-corner-large, 3px);
|
20 | border-top-left-radius: 0;
|
21 | border-bottom-left-radius: 0; }
|
22 |
|
23 | .next-radio-button-large[dir='rtl'] > label:last-child {
|
24 | margin-left: 0;
|
25 | border-top-right-radius: 0;
|
26 | border-bottom-right-radius: 0;
|
27 | border-top-left-radius: 3px;
|
28 | border-top-left-radius: var(--radio-button-corner-large, 3px);
|
29 | border-bottom-left-radius: 3px;
|
30 | border-bottom-left-radius: var(--radio-button-corner-large, 3px); }
|
31 |
|
32 | .next-radio-button-large[dir='rtl'] .next-radio-label {
|
33 | height: 38px;
|
34 | height: calc(var(--radio-button-height-large, 40px) - 2px);
|
35 | line-height: 38px;
|
36 | line-height: calc(var(--radio-button-height-large, 40px) - 2px);
|
37 | font-size: 16px;
|
38 | font-size: var(--radio-button-font-size-large, 16px); }
|
39 |
|
40 | .next-radio-button-medium[dir='rtl'] > label:first-child {
|
41 | margin-left: -1px;
|
42 | border-top-left-radius: 0;
|
43 | border-bottom-left-radius: 0;
|
44 | border-top-right-radius: 3px;
|
45 | border-top-right-radius: var(--radio-button-corner-medium, 3px);
|
46 | border-bottom-right-radius: 3px;
|
47 | border-bottom-right-radius: var(--radio-button-corner-medium, 3px); }
|
48 |
|
49 | .next-radio-button-medium[dir='rtl'] > label:last-child {
|
50 | margin-left: 0;
|
51 | border-top-right-radius: 0;
|
52 | border-bottom-right-radius: 0;
|
53 | border-top-left-radius: 3px;
|
54 | border-top-left-radius: var(--radio-button-corner-medium, 3px);
|
55 | border-bottom-left-radius: 3px;
|
56 | border-bottom-left-radius: var(--radio-button-corner-medium, 3px); }
|
57 |
|
58 | .next-radio-button-small[dir='rtl'] > label:first-child {
|
59 | margin-left: -1px;
|
60 | border-top-left-radius: 0;
|
61 | border-bottom-left-radius: 0;
|
62 | border-top-right-radius: 3px;
|
63 | border-top-right-radius: var(--radio-button-corner-small, 3px);
|
64 | border-bottom-right-radius: 3px;
|
65 | border-bottom-right-radius: var(--radio-button-corner-small, 3px); }
|
66 |
|
67 | .next-radio-button-small[dir='rtl'] > label:last-child {
|
68 | margin-left: 0;
|
69 | border-top-right-radius: 0;
|
70 | border-bottom-right-radius: 0;
|
71 | border-top-left-radius: 3px;
|
72 | border-top-left-radius: var(--radio-button-corner-small, 3px);
|
73 | border-bottom-left-radius: 3px;
|
74 | border-bottom-left-radius: var(--radio-button-corner-small, 3px); }
|
75 |
|
76 | .next-radio-wrapper[dir='rtl'] .next-radio-label {
|
77 | margin-left: 0;
|
78 | margin-right: 4px; }
|
79 |
|
80 | .next-radio-group[dir='rtl'] .next-radio-label {
|
81 | margin-right: 4px;
|
82 | margin-left: 16px; }
|
83 |
|
84 | .next-radio-button[dir='rtl'] > label .next-radio-label {
|
85 | margin: 0; }
|
86 |
|
87 | .next-radio-wrapper {
|
88 | outline: 0;
|
89 | display: inline-block; }
|
90 | .next-radio-wrapper .next-radio {
|
91 | box-sizing: border-box;
|
92 | display: inline-block;
|
93 | vertical-align: middle;
|
94 | position: relative;
|
95 | line-height: 1; }
|
96 | .next-radio-wrapper .next-radio *,
|
97 | .next-radio-wrapper .next-radio *:before,
|
98 | .next-radio-wrapper .next-radio *:after {
|
99 | box-sizing: border-box; }
|
100 | .next-radio-wrapper .next-radio input[type="radio"] {
|
101 | opacity: 0;
|
102 | position: absolute;
|
103 | vertical-align: middle;
|
104 | top: 0;
|
105 | left: 0;
|
106 | width: 16px;
|
107 | width: var(--radio-width, 16px);
|
108 | height: 16px;
|
109 | height: var(--radio-width, 16px);
|
110 | margin: 0;
|
111 | cursor: pointer; }
|
112 | .next-radio-wrapper .next-radio-inner {
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 | display: block;
|
123 | width: 16px;
|
124 | width: var(--radio-width, 16px);
|
125 | height: 16px;
|
126 | height: var(--radio-width, 16px);
|
127 | background: #FFFFFF;
|
128 | background: var(--radio-bg-color, #FFFFFF);
|
129 | border-radius: 50%;
|
130 | border-radius: var(--radio-radius-size, 50%);
|
131 | border: 1px solid #C4C6CF;
|
132 | border: var(--radio-circle-border-width, 1px) solid var(--radio-border-color, #C4C6CF);
|
133 | transition: all 100ms linear;
|
134 | transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
|
135 | box-shadow: none;
|
136 | box-shadow: var(--radio-shadow, none); }
|
137 | .next-radio-wrapper .next-radio-inner:after {
|
138 | transform: scale(0);
|
139 | position: absolute;
|
140 | border-radius: 50%;
|
141 | border-radius: var(--radio-radius-size, 50%);
|
142 | top: 50%;
|
143 | margin-top: -2px;
|
144 | margin-top: calc(0px - var(--radio-circle-size, 4px)/2);
|
145 | left: 50%;
|
146 | margin-left: -2px;
|
147 | margin-left: calc(0px - var(--radio-circle-size, 4px)/2);
|
148 | background: #FFFFFF;
|
149 | content: '';
|
150 | transition: all 100ms linear;
|
151 | transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear); }
|
152 | .next-radio-wrapper.checked .next-radio-inner {
|
153 | border-color: #5584FF;
|
154 | border-color: var(--radio-checked-border-color, #5584FF);
|
155 | background: #5584FF;
|
156 | background: var(--radio-checked-bg-color, #5584FF); }
|
157 | .next-radio-wrapper.checked .next-radio-inner:after {
|
158 | width: 4px;
|
159 | width: var(--radio-circle-size, 4px);
|
160 | height: 4px;
|
161 | height: var(--radio-circle-size, 4px);
|
162 | font-weight: bold;
|
163 | background: #FFFFFF;
|
164 | background: var(--radio-checked-circle-color, #FFFFFF);
|
165 | transform: scale(1); }
|
166 | .next-radio-wrapper.checked:hover .next-radio-inner, .next-radio-wrapper.checked.hovered .next-radio-inner {
|
167 | border-color: transparent;
|
168 | border-color: var(--radio-checked-hovered-border-color, transparent); }
|
169 | .next-radio-wrapper.disabled input[type="radio"] {
|
170 | cursor: not-allowed; }
|
171 | .next-radio-wrapper.disabled .next-radio-inner {
|
172 | border-color: #E6E7EB;
|
173 | border-color: var(--radio-disabled-border-color, #E6E7EB);
|
174 | background: #F7F8FA;
|
175 | background: var(--radio-disabled-bg-color, #F7F8FA); }
|
176 | .next-radio-wrapper.disabled .next-radio-inner:after {
|
177 | background: #CCCCCC;
|
178 | background: var(--radio-disabled-circle-color, #CCCCCC); }
|
179 | .next-radio-wrapper.disabled .next-radio-inner:hover, .next-radio-wrapper.disabled .next-radio-inner.hovered {
|
180 | border-color: #E6E7EB;
|
181 | border-color: var(--radio-disabled-border-color, #E6E7EB); }
|
182 | .next-radio-wrapper.disabled.checked .next-radio-inner {
|
183 | border-color: #E6E7EB;
|
184 | border-color: var(--radio-checked-disabled-border-color, #E6E7EB);
|
185 | background: #F7F8FA;
|
186 | background: var(--radio-checked-disabled-bg-color, #F7F8FA); }
|
187 | .next-radio-wrapper.disabled.checked .next-radio-inner:after {
|
188 | background: #CCCCCC;
|
189 | background: var(--radio-checked-disabled-circle-color, #CCCCCC); }
|
190 | .next-radio-wrapper.disabled .next-radio-label {
|
191 | color: #CCCCCC;
|
192 | color: var(--radio-normal-font-color-disabled, #CCCCCC); }
|
193 | .next-radio-wrapper:not(.disabled):hover .next-radio-inner, .next-radio-wrapper:not(.disabled).hovered .next-radio-inner {
|
194 | border-color: #5584FF;
|
195 | border-color: var(--radio-hovered-border-color, #5584FF);
|
196 | background-color: #DEE8FF;
|
197 | background-color: var(--radio-hovered-bg-color, #DEE8FF); }
|
198 | .next-radio-wrapper:not(.disabled):hover .next-radio-label, .next-radio-wrapper:not(.disabled).hovered .next-radio-label {
|
199 | cursor: pointer; }
|
200 | .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner {
|
201 | border-color: transparent;
|
202 | border-color: var(--radio-checked-hovered-border-color, transparent);
|
203 | background: #3E71F7;
|
204 | background: var(--radio-checked-hovered-bg-color, #3E71F7); }
|
205 | .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after {
|
206 | background: #FFFFFF;
|
207 | background: var(--radio-checked-hovered-circle-color, #FFFFFF); }
|
208 |
|
209 | .next-radio-button .next-radio {
|
210 | width: 0;
|
211 | height: 0; }
|
212 |
|
213 | .next-radio-button input[type="radio"] {
|
214 | width: 0;
|
215 | height: 0; }
|
216 |
|
217 | .next-radio-button > label {
|
218 | display: inline-block;
|
219 | box-sizing: border-box;
|
220 | position: relative;
|
221 | z-index: 1;
|
222 | margin: 0 0 0 -1px;
|
223 | border: 1px solid #C4C6CF;
|
224 | border: 1px solid var(--radio-button-border-color, #C4C6CF);
|
225 | background-color: #FFFFFF;
|
226 | background-color: var(--radio-button-bg-color, #FFFFFF);
|
227 | transition: all 100ms linear;
|
228 | transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
|
229 | vertical-align: middle; }
|
230 | .next-radio-button > label .next-radio-label {
|
231 | display: block;
|
232 | color: #333333;
|
233 | color: var(--radio-button-font-color, #333333);
|
234 | margin: 0;
|
235 | transition: all 100ms linear;
|
236 | transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear); }
|
237 | .next-radio-button > label:hover, .next-radio-button > label.hovered {
|
238 | z-index: 10;
|
239 | border-color: #A0A2AD;
|
240 | border-color: var(--radio-button-border-color-hovered, #A0A2AD);
|
241 | background-color: #F2F3F7;
|
242 | background-color: var(--radio-button-bg-color-hovered, #F2F3F7); }
|
243 | .next-radio-button > label:hover .next-radio-label, .next-radio-button > label.hovered .next-radio-label {
|
244 | color: #333333;
|
245 | color: var(--radio-button-font-color-hovered, #333333); }
|
246 | .next-radio-button > label.checked {
|
247 | z-index: 11;
|
248 | border-color: #5584FF;
|
249 | border-color: var(--radio-button-border-color-checked, #5584FF);
|
250 | background-color: #FFFFFF;
|
251 | background-color: var(--radio-button-bg-color-checked, #FFFFFF); }
|
252 | .next-radio-button > label.checked .next-radio-label {
|
253 | color: #5584FF;
|
254 | color: var(--radio-button-font-color-checked, #5584FF); }
|
255 | .next-radio-button > label.disabled {
|
256 | z-index: 0;
|
257 | cursor: not-allowed;
|
258 | border-color: #E6E7EB;
|
259 | border-color: var(--radio-button-border-color-disabled, #E6E7EB);
|
260 | background-color: #F7F8FA;
|
261 | background-color: var(--radio-button-bg-color-disabled, #F7F8FA); }
|
262 | .next-radio-button > label.disabled .next-radio-label {
|
263 | color: #CCCCCC;
|
264 | color: var(--radio-button-font-color-disabled, #CCCCCC); }
|
265 | .next-radio-button > label.checked.disabled {
|
266 | z-index: 0;
|
267 | border-color: #E6E7EB;
|
268 | border-color: var(--radio-button-border-color-checked-disabled, #E6E7EB);
|
269 | background-color: #F2F3F7;
|
270 | background-color: var(--radio-button-bg-color-checked-disabled, #F2F3F7); }
|
271 | .next-radio-button > label.checked.disabled .next-radio-label {
|
272 | color: #CCCCCC;
|
273 | color: var(--radio-button-font-color-checked-disabled, #CCCCCC); }
|
274 |
|
275 | .next-radio-button-large > label {
|
276 | padding: 0 8px;
|
277 | padding: 0 var(--radio-button-padding-large, 8px);
|
278 | height: 40px;
|
279 | height: var(--radio-button-height-large, 40px);
|
280 | line-height: 40px;
|
281 | line-height: var(--radio-button-height-large, 40px); }
|
282 | .next-radio-button-large > label:first-child {
|
283 | margin-left: 0;
|
284 | border-top-left-radius: 3px;
|
285 | border-top-left-radius: var(--radio-button-corner-large, 3px);
|
286 | border-bottom-left-radius: 3px;
|
287 | border-bottom-left-radius: var(--radio-button-corner-large, 3px); }
|
288 | .next-radio-button-large > label:last-child {
|
289 | border-top-right-radius: 3px;
|
290 | border-top-right-radius: var(--radio-button-corner-large, 3px);
|
291 | border-bottom-right-radius: 3px;
|
292 | border-bottom-right-radius: var(--radio-button-corner-large, 3px); }
|
293 |
|
294 | .next-radio-button-large .next-radio-label {
|
295 | height: 38px;
|
296 | height: calc(var(--radio-button-height-large, 40px) - 2px);
|
297 | line-height: 38px;
|
298 | line-height: calc(var(--radio-button-height-large, 40px) - 2px);
|
299 | font-size: 16px;
|
300 | font-size: var(--radio-button-font-size-large, 16px); }
|
301 |
|
302 | .next-radio-button-medium > label {
|
303 | padding: 0 8px;
|
304 | padding: 0 var(--radio-button-padding-medium, 8px);
|
305 | height: 28px;
|
306 | height: var(--radio-button-height-medium, 28px);
|
307 | line-height: 28px;
|
308 | line-height: var(--radio-button-height-medium, 28px); }
|
309 | .next-radio-button-medium > label:first-child {
|
310 | margin-left: 0;
|
311 | border-top-left-radius: 3px;
|
312 | border-top-left-radius: var(--radio-button-corner-medium, 3px);
|
313 | border-bottom-left-radius: 3px;
|
314 | border-bottom-left-radius: var(--radio-button-corner-medium, 3px); }
|
315 | .next-radio-button-medium > label:last-child {
|
316 | border-top-right-radius: 3px;
|
317 | border-top-right-radius: var(--radio-button-corner-medium, 3px);
|
318 | border-bottom-right-radius: 3px;
|
319 | border-bottom-right-radius: var(--radio-button-corner-medium, 3px); }
|
320 |
|
321 | .next-radio-button-medium .next-radio-label {
|
322 | height: 26px;
|
323 | height: calc(var(--radio-button-height-medium, 28px) - 2px);
|
324 | line-height: 26px;
|
325 | line-height: calc(var(--radio-button-height-medium, 28px) - 2px);
|
326 | font-size: 12px;
|
327 | font-size: var(--radio-button-font-size-medium, 12px); }
|
328 |
|
329 | .next-radio-button-small > label {
|
330 | padding: 0 8px;
|
331 | padding: 0 var(--radio-button-padding-small, 8px);
|
332 | height: 20px;
|
333 | height: var(--radio-button-height-small, 20px);
|
334 | line-height: 20px;
|
335 | line-height: var(--radio-button-height-small, 20px); }
|
336 | .next-radio-button-small > label:first-child {
|
337 | margin-left: 0;
|
338 | border-top-left-radius: 3px;
|
339 | border-top-left-radius: var(--radio-button-corner-small, 3px);
|
340 | border-bottom-left-radius: 3px;
|
341 | border-bottom-left-radius: var(--radio-button-corner-small, 3px); }
|
342 | .next-radio-button-small > label:last-child {
|
343 | border-top-right-radius: 3px;
|
344 | border-top-right-radius: var(--radio-button-corner-small, 3px);
|
345 | border-bottom-right-radius: 3px;
|
346 | border-bottom-right-radius: var(--radio-button-corner-small, 3px); }
|
347 |
|
348 | .next-radio-button-small .next-radio-label {
|
349 | height: 18px;
|
350 | height: calc(var(--radio-button-height-small, 20px) - 2px);
|
351 | line-height: 18px;
|
352 | line-height: calc(var(--radio-button-height-small, 20px) - 2px);
|
353 | font-size: 12px;
|
354 | font-size: var(--radio-button-font-size-small, 12px); }
|
355 |
|
356 | .next-radio-single-input input[type="radio"] {
|
357 | opacity: 0;
|
358 | position: absolute;
|
359 | top: 0;
|
360 | left: 0;
|
361 | margin: 0; }
|
362 |
|
363 | .next-radio-group {
|
364 | display: inline-block; }
|
365 | .next-radio-group .next-radio-wrapper {
|
366 |
|
367 | margin-right: 12px; }
|
368 | .next-radio-group .next-radio-wrapper:last-child {
|
369 | margin-right: 0; }
|
370 | .next-radio-group .next-radio-label {
|
371 | color: #333333;
|
372 | color: var(--radio-normal-font-color, #333333); }
|
373 | .next-radio-group.disabled .next-radio-label {
|
374 | color: #CCCCCC;
|
375 | color: var(--radio-normal-font-color-disabled, #CCCCCC); }
|
376 |
|
377 | .next-radio-group.next-radio-button .next-radio-wrapper {
|
378 | margin-right: 0; }
|
379 |
|
380 | .next-radio-group-ver .next-radio-wrapper {
|
381 | display: block;
|
382 | margin-bottom: 8px; }
|
383 |
|
384 | .next-radio-label {
|
385 | margin: 0;
|
386 | margin-left: 4px;
|
387 | margin-left: var(--radio-font-margin-left, 4px);
|
388 |
|
389 | margin-right: 4px;
|
390 | margin-right: var(--radio-font-margin-left, 4px);
|
391 | font-size: 12px;
|
392 | font-size: var(--radio-font-size, 12px);
|
393 | vertical-align: middle;
|
394 | line-height: 1;
|
395 | color: #333333;
|
396 | color: var(--radio-normal-font-color, #333333); }
|
397 |
|
398 | @-moz-document url-prefix() {
|
399 | .next-radio {
|
400 | margin-top: -1px; }
|
401 | @supports (animation: calc(0s)) {
|
402 |
|
403 | .next-radio {
|
404 | margin-top: -3px; } } }
|