1 | .next-sr-only {
|
2 | position: absolute;
|
3 | width: 1px;
|
4 | height: 1px;
|
5 | padding: 0;
|
6 | overflow: hidden;
|
7 | clip: rect(0, 0, 0, 0);
|
8 | white-space: nowrap;
|
9 | border: 0;
|
10 | top: 0;
|
11 | margin: -1px; }
|
12 |
|
13 | .next-range {
|
14 | box-sizing: border-box;
|
15 | width: 100%;
|
16 | font-family: inherit;
|
17 | font-weight: normal;
|
18 | font-size: inherit;
|
19 | line-height: inherit;
|
20 | vertical-align: baseline;
|
21 | display: flex;
|
22 | flex-direction: column;
|
23 | cursor: pointer; }
|
24 | .next-range *,
|
25 | .next-range *:before,
|
26 | .next-range *:after {
|
27 | box-sizing: border-box; }
|
28 | .next-range .next-range-inner {
|
29 | position: relative; }
|
30 | .next-range .next-range-inner:only-child {
|
31 | margin-top: auto;
|
32 | margin-bottom: auto; }
|
33 | .next-range .next-range-track {
|
34 | position: absolute;
|
35 | width: 100%;
|
36 | top: 50%;
|
37 | border-radius: 0;
|
38 | border-radius: var(--range-size-m-track-radius, 0); }
|
39 | .next-range .next-range-selected {
|
40 | position: absolute;
|
41 | width: 0;
|
42 | top: 50%;
|
43 | left: 0;
|
44 | border-radius: 0;
|
45 | border-radius: var(--range-size-m-track-radius, 0); }
|
46 | .next-range .next-range-scale {
|
47 | position: relative;
|
48 | width: 100%;
|
49 | height: 12px;
|
50 | height: var(--range-size-m-scale-height, 12px); }
|
51 | .next-range .next-range-scale .next-range-scale-item {
|
52 | position: absolute;
|
53 | left: 0;
|
54 | width: 2px;
|
55 | border: 1px solid;
|
56 | border: var(--range-size-m-scale-item-border-width, 1px) solid;
|
57 | border-radius: 0;
|
58 | border-radius: var(--range-size-m-scale-radius, 0); }
|
59 | .next-range .next-range-scale .next-range-scale-item:last-child {
|
60 | margin-left: -2px;
|
61 | margin-left: calc(0px - var(--range-size-m-scale-item-border-width, 1px)*2); }
|
62 | .next-range .next-range-slider {
|
63 | position: absolute;
|
64 | top: 50%;
|
65 | left: 0;
|
66 | border-radius: 50%; }
|
67 | .next-range .next-range-slider-inner {
|
68 | position: absolute;
|
69 | top: 50%;
|
70 | left: 50%;
|
71 | border-width: 1px;
|
72 | border-width: var(--range-size-slider-border-width, 1px);
|
73 | border-style: solid;
|
74 | border-style: var(--range-size-slider-border-style, solid);
|
75 | border-color: #C4C6CF;
|
76 | border-color: var(--range-normal-slider-border-color, #C4C6CF);
|
77 | border-radius: 50%;
|
78 | transition: transform 100ms linear, border-color 100ms linear;
|
79 | transition: transform var(--motion-duration-immediately, 100ms) var(--motion-linear, linear), border-color var(--motion-duration-immediately, 100ms) var(--motion-linear, linear); }
|
80 | .next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner {
|
81 | border: 2px solid #5584FF;
|
82 | border: var(--line-2, 2px) var(--line-solid, solid) var(--range-normal-selected-color, #5584FF);
|
83 | box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
|
84 | box-shadow: var(--range-size-m-slider-shadow-moving, 2px 2px 4px 0px rgba(0, 0, 0, 0.12));
|
85 | transform: scale(1.2); }
|
86 | .next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner {
|
87 | border: 2px solid #5584FF;
|
88 | border: var(--line-2, 2px) var(--line-solid, solid) var(--range-normal-selected-color, #5584FF);
|
89 | box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
|
90 | box-shadow: var(--range-size-m-slider-shadow-moving, 2px 2px 4px 0px rgba(0, 0, 0, 0.12));
|
91 | transform: scale(1.2); }
|
92 | .next-range .next-range-mark {
|
93 | position: relative;
|
94 | cursor: auto; }
|
95 | .next-range .next-range-mark .next-range-mark-text {
|
96 | position: absolute;
|
97 | left: 0;
|
98 | transform: translateX(-50%);
|
99 | padding-left: 2px;
|
100 | text-align: center; }
|
101 | .next-range .next-range-frag {
|
102 | position: absolute;
|
103 | top: 0; }
|
104 | .next-range .next-range-frag .next-range-slider {
|
105 | left: 0; }
|
106 | .next-range .next-range-frag .next-range-slider:nth-child(2) {
|
107 | left: 100%; }
|
108 | .next-range .next-range-frag .next-range-selected {
|
109 | width: 100%; }
|
110 | .next-range.disabled {
|
111 | cursor: not-allowed; }
|
112 | .next-range.disabled .next-range-mark {
|
113 | cursor: auto; }
|
114 | .next-range .next-range-track {
|
115 | background: #C4C6CF;
|
116 | background: var(--range-normal-unselected-color, #C4C6CF); }
|
117 | .next-range .next-range-track:hover {
|
118 | background: #C4C6CF;
|
119 | background: var(--range-normal-unselected-color-hover, #C4C6CF); }
|
120 | .next-range .next-range-selected {
|
121 | background: #5584FF;
|
122 | background: var(--range-normal-selected-color, #5584FF); }
|
123 | .next-range .next-range-selected:hover {
|
124 | background: #5584FF;
|
125 | background: var(--range-normal-selected-color-hover, #5584FF); }
|
126 | .next-range .next-range-scale .next-range-scale-item {
|
127 | border-color: #C4C6CF;
|
128 | border-color: var(--range-normal-unselected-color, #C4C6CF);
|
129 | background: #C4C6CF;
|
130 | background: var(--range-normal-unselected-color, #C4C6CF); }
|
131 | .next-range .next-range-scale .next-range-scale-item:hover {
|
132 | border-color: #C4C6CF;
|
133 | border-color: var(--range-normal-unselected-color-hover, #C4C6CF); }
|
134 | .next-range .next-range-scale .next-range-scale-item.activated {
|
135 | border-color: #5584FF;
|
136 | border-color: var(--range-normal-selected-color, #5584FF);
|
137 | background: #5584FF;
|
138 | background: var(--range-normal-selected-color, #5584FF); }
|
139 | .next-range .next-range-scale .next-range-scale-item.activated:hover {
|
140 | border-color: #5584FF;
|
141 | border-color: var(--range-normal-selected-color-hover, #5584FF); }
|
142 | .next-range .next-range-slider-inner {
|
143 | background: #FFFFFF;
|
144 | background: var(--range-normal-slider-bg-color, #FFFFFF);
|
145 | border-color: #C4C6CF;
|
146 | border-color: var(--range-normal-slider-border-color, #C4C6CF); }
|
147 | .next-range .next-range-slider-inner:hover {
|
148 | background: #FFFFFF;
|
149 | background: var(--range-normal-slider-bg-color-hover, #FFFFFF);
|
150 | box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
151 | box-shadow: var(--range-size-m-slider-shadow-hover, 3px 3px 5px 0px rgba(0, 0, 0, 0.12));
|
152 | transform: scale(1.2); }
|
153 | .next-range .next-range-mark .next-range-mark-text {
|
154 | color: #999999;
|
155 | color: var(--range-normal-mark-color, #999999); }
|
156 | .next-range .next-range-mark .next-range-mark-text:hover {
|
157 | color: #999999;
|
158 | color: var(--range-normal-mark-color-hover, #999999); }
|
159 | .next-range .next-range-mark .next-range-mark-text.activated {
|
160 | color: #333333;
|
161 | color: var(--range-normal-mark-selected-color, #333333); }
|
162 | .next-range .next-range-mark .next-range-mark-text.activated:hover {
|
163 | color: #333333;
|
164 | color: var(--range-normal-mark-selected-color-hover, #333333); }
|
165 | .next-range.disabled .next-range-track {
|
166 | background: #C4C6CF;
|
167 | background: var(--range-normal-unselected-color-disabled, #C4C6CF); }
|
168 | .next-range.disabled .next-range-selected {
|
169 | background: #A0A2AD;
|
170 | background: var(--range-normal-selected-color-disabled, #A0A2AD); }
|
171 | .next-range.disabled .next-range-scale-item {
|
172 | border-color: #C4C6CF;
|
173 | border-color: var(--range-normal-unselected-color-disabled, #C4C6CF); }
|
174 | .next-range.disabled .next-range-scale-item.activated {
|
175 | border-color: #A0A2AD;
|
176 | border-color: var(--range-normal-selected-color-disabled, #A0A2AD); }
|
177 | .next-range.disabled .next-range-slider-inner {
|
178 | background: #E6E7EB;
|
179 | background: var(--range-normal-slider-bg-color-disabled, #E6E7EB);
|
180 | border-color: #E6E7EB;
|
181 | border-color: var(--range-normal-slider-border-color-disabled, #E6E7EB);
|
182 | transform: none;
|
183 | box-shadow: none; }
|
184 | .next-range.disabled .next-range-mark-text {
|
185 | color: #CCCCCC;
|
186 | color: var(--range-normal-mark-color-disabled, #CCCCCC); }
|
187 | .next-range.disabled .next-range-mark-text.activated {
|
188 | color: #999999;
|
189 | color: var(--range-normal-mark-selected-color-disabled, #999999); }
|
190 | .next-range .next-range-track {
|
191 | height: 4px;
|
192 | height: var(--range-size-m-track-height, 4px);
|
193 | margin-top: -2px;
|
194 | margin-top: calc(0px - var(--range-size-m-track-height, 4px)/2); }
|
195 | .next-range .next-range-selected {
|
196 | height: 4px;
|
197 | height: var(--range-size-m-track-height, 4px);
|
198 | margin-top: -2px;
|
199 | margin-top: calc(0px - var(--range-size-m-track-height, 4px)/2); }
|
200 | .next-range .next-range-frag {
|
201 | margin-top: 4px;
|
202 | margin-top: calc(var(--range-size-m-scale-height, 12px)/2 - var(--range-size-m-track-height, 4px)/2);
|
203 | height: 4px;
|
204 | height: var(--range-size-m-track-height, 4px); }
|
205 | .next-range .next-range-slider {
|
206 | height: 16px;
|
207 | height: var(--range-size-m-slider-hw, 16px);
|
208 | width: 16px;
|
209 | width: var(--range-size-m-slider-hw, 16px);
|
210 | margin-top: -8px;
|
211 | margin-top: calc(0px - var(--range-size-m-slider-hw, 16px)/2);
|
212 | margin-left: -8px;
|
213 | margin-left: calc(0px - var(--range-size-m-slider-hw, 16px)/2);
|
214 | box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12);
|
215 | box-shadow: var(--range-size-m-slider-shadow, 1px 1px 3px 0px rgba(0, 0, 0, 0.12)); }
|
216 | .next-range .next-range-slider-inner {
|
217 | height: 16px;
|
218 | height: var(--range-size-m-slider-hw, 16px);
|
219 | width: 16px;
|
220 | width: var(--range-size-m-slider-hw, 16px);
|
221 | margin-top: -8px;
|
222 | margin-top: calc(0px - var(--range-size-m-slider-hw, 16px)/2);
|
223 | margin-left: -8px;
|
224 | margin-left: calc(0px - var(--range-size-m-slider-hw, 16px)/2); }
|
225 | .next-range .next-range-mark {
|
226 | display: block; }
|
227 | .next-range .next-range-mark .next-range-mark-text {
|
228 | font-size: 12px;
|
229 | font-size: var(--range-size-m-mark-font-size, 12px);
|
230 | font-weight: normal;
|
231 | font-weight: var(--range-size-m-mark-font-weight, normal);
|
232 | line-height: 20px;
|
233 | line-height: var(--range-size-m-mark-font-lineheight, 20px);
|
234 | height: 20px;
|
235 | height: var(--range-size-m-mark-font-lineheight, 20px); }
|
236 | .next-range .next-range-mark.next-range-mark-below {
|
237 | height: 30px;
|
238 | height: var(--range-size-m-mark-top, 30px); }
|
239 | .next-range .next-range-mark.next-range-mark-below .next-range-mark-text {
|
240 | bottom: 0; }
|
241 | .next-range .next-range-mark.next-range-mark-above {
|
242 | height: 30px;
|
243 | height: var(--range-size-m-mark-top, 30px); }
|
244 | .next-range .next-range-scale .next-range-scale-item {
|
245 | height: 12px;
|
246 | height: var(--range-size-m-scale-height, 12px); }
|
247 | .next-range.simulation-hover > .next-range-slider-inner {
|
248 | background: #FFFFFF;
|
249 | background: var(--range-normal-slider-bg-color-hover, #FFFFFF);
|
250 | box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
251 | box-shadow: var(--range-size-m-slider-shadow-hover, 3px 3px 5px 0px rgba(0, 0, 0, 0.12));
|
252 | transform: scale(1.2); }
|
253 | .next-range.simulation-hover .next-range-selected {
|
254 | background: #5584FF;
|
255 | background: var(--range-normal-selected-color-hover, #5584FF); }
|
256 | .next-range.simulation-hover .next-range-track {
|
257 | background: #C4C6CF;
|
258 | background: var(--range-normal-unselected-color-hover, #C4C6CF); }
|
259 | .next-range.simulation-hover .next-range-scale-item {
|
260 | border-color: #C4C6CF;
|
261 | border-color: var(--range-normal-unselected-color-hover, #C4C6CF); }
|
262 | .next-range.simulation-hover .next-range-scale-item.activated {
|
263 | border-color: #5584FF;
|
264 | border-color: var(--range-normal-selected-color-hover, #5584FF); }
|
265 | .next-range.simulation-click > .next-range-slider-inner {
|
266 | border: 2px solid #5584FF;
|
267 | border: 2px solid var(--range-normal-selected-color, #5584FF);
|
268 | box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12);
|
269 | box-shadow: var(--range-size-m-slider-shadow-moving, 2px 2px 4px 0px rgba(0, 0, 0, 0.12));
|
270 | transform: scale(1.2); }
|
271 |
|
272 | .next-range[dir=rtl] .next-range-mark {
|
273 | position: relative;
|
274 | cursor: auto; }
|
275 | .next-range[dir=rtl] .next-range-mark .next-range-mark-text {
|
276 | position: absolute;
|
277 | right: 0;
|
278 | transform: translateX(50%);
|
279 | padding-right: 2px;
|
280 | text-align: center; }
|