commonroutesApp/www/lib/angular-material/modules/closure/slider/slider.css
www/lib/angular-material/modules/closure/slider/slider.cssRaw
1/*!
2 * Angular Material Design
3 * https://github.com/angular/material
4 * @license MIT
5 * v1.1.1
6 */
7@-webkit-keyframes sliderFocusThumb {
8 0% {
9 -webkit-transform: scale(0.7);
10 transform: scale(0.7); }
11 30% {
12 -webkit-transform: scale(1);
13 transform: scale(1); }
14 100% {
15 -webkit-transform: scale(0.7);
16 transform: scale(0.7); } }
17
18@keyframes sliderFocusThumb {
19 0% {
20 -webkit-transform: scale(0.7);
21 transform: scale(0.7); }
22 30% {
23 -webkit-transform: scale(1);
24 transform: scale(1); }
25 100% {
26 -webkit-transform: scale(0.7);
27 transform: scale(0.7); } }
28
29@-webkit-keyframes sliderDiscreteFocusThumb {
30 0% {
31 -webkit-transform: scale(0.7);
32 transform: scale(0.7); }
33 50% {
34 -webkit-transform: scale(0.8);
35 transform: scale(0.8); }
36 100% {
37 -webkit-transform: scale(0);
38 transform: scale(0); } }
39
40@keyframes sliderDiscreteFocusThumb {
41 0% {
42 -webkit-transform: scale(0.7);
43 transform: scale(0.7); }
44 50% {
45 -webkit-transform: scale(0.8);
46 transform: scale(0.8); }
47 100% {
48 -webkit-transform: scale(0);
49 transform: scale(0); } }
50
51@-webkit-keyframes sliderDiscreteFocusRing {
52 0% {
53 -webkit-transform: scale(0.7);
54 transform: scale(0.7);
55 opacity: 0; }
56 50% {
57 -webkit-transform: scale(1);
58 transform: scale(1);
59 opacity: 1; }
60 100% {
61 -webkit-transform: scale(0);
62 transform: scale(0); } }
63
64@keyframes sliderDiscreteFocusRing {
65 0% {
66 -webkit-transform: scale(0.7);
67 transform: scale(0.7);
68 opacity: 0; }
69 50% {
70 -webkit-transform: scale(1);
71 transform: scale(1);
72 opacity: 1; }
73 100% {
74 -webkit-transform: scale(0);
75 transform: scale(0); } }
76
77md-slider {
78 height: 48px;
79 min-width: 128px;
80 position: relative;
81 margin-left: 4px;
82 margin-right: 4px;
83 padding: 0;
84 display: block;
85 -webkit-box-orient: horizontal;
86 -webkit-box-direction: normal;
87 -webkit-flex-direction: row;
88 flex-direction: row;
89 /**
90 * Track
91 */
92 /**
93 * Slider thumb
94 */
95 /* The sign that's focused in discrete mode */
96 /**
97 * The border/background that comes in when focused in non-discrete mode
98 */
99 /* Don't animate left/right while panning */ }
100 md-slider *, md-slider *:after {
101 box-sizing: border-box; }
102 md-slider .md-slider-wrapper {
103 outline: none;
104 width: 100%;
105 height: 100%; }
106 md-slider .md-slider-content {
107 position: relative; }
108 md-slider .md-track-container {
109 width: 100%;
110 position: absolute;
111 top: 23px;
112 height: 2px; }
113 md-slider .md-track {
114 position: absolute;
115 left: 0;
116 right: 0;
117 height: 100%; }
118 md-slider .md-track-fill {
119 -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
120 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
121 -webkit-transition-property: width, height;
122 transition-property: width, height; }
123 md-slider .md-track-ticks {
124 position: absolute;
125 left: 0;
126 right: 0;
127 height: 100%; }
128 md-slider .md-track-ticks canvas {
129 width: 100%;
130 height: 100%; }
131 md-slider .md-thumb-container {
132 position: absolute;
133 left: 0;
134 top: 50%;
135 -webkit-transform: translate3d(-50%, -50%, 0);
136 transform: translate3d(-50%, -50%, 0);
137 -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
138 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
139 -webkit-transition-property: left, right, bottom;
140 transition-property: left, right, bottom; }
141 [dir=rtl] md-slider .md-thumb-container {
142 left: auto;
143 right: 0; }
144 md-slider .md-thumb {
145 z-index: 1;
146 position: absolute;
147 left: -10px;
148 top: 14px;
149 width: 20px;
150 height: 20px;
151 border-radius: 20px;
152 -webkit-transform: scale(0.7);
153 transform: scale(0.7);
154 -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
155 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
156 [dir=rtl] md-slider .md-thumb {
157 left: auto;
158 right: -10px; }
159 md-slider .md-thumb:after {
160 content: '';
161 position: absolute;
162 width: 20px;
163 height: 20px;
164 border-radius: 20px;
165 border-width: 3px;
166 border-style: solid;
167 -webkit-transition: inherit;
168 transition: inherit; }
169 md-slider .md-sign {
170 /* Center the children (slider-thumb-text) */
171 display: -webkit-box;
172 display: -webkit-flex;
173 display: flex;
174 -webkit-box-align: center;
175 -webkit-align-items: center;
176 align-items: center;
177 -webkit-box-pack: center;
178 -webkit-justify-content: center;
179 justify-content: center;
180 position: absolute;
181 left: -14px;
182 top: -17px;
183 width: 28px;
184 height: 28px;
185 border-radius: 28px;
186 -webkit-transform: scale(0.4) translate3d(0, 67.5px, 0);
187 transform: scale(0.4) translate3d(0, 67.5px, 0);
188 -webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
189 transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
190 /* The arrow pointing down under the sign */ }
191 md-slider .md-sign:after {
192 position: absolute;
193 content: '';
194 left: 0px;
195 border-radius: 16px;
196 top: 19px;
197 border-left: 14px solid transparent;
198 border-right: 14px solid transparent;
199 border-top-width: 16px;
200 border-top-style: solid;
201 opacity: 0;
202 -webkit-transform: translate3d(0, -8px, 0);
203 transform: translate3d(0, -8px, 0);
204 -webkit-transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1);
205 transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1); }
206 [dir=rtl] md-slider .md-sign:after {
207 left: auto;
208 right: 0px; }
209 md-slider .md-sign .md-thumb-text {
210 z-index: 1;
211 font-size: 12px;
212 font-weight: bold; }
213 md-slider .md-focus-ring {
214 position: absolute;
215 left: -17px;
216 top: 7px;
217 width: 34px;
218 height: 34px;
219 border-radius: 34px;
220 -webkit-transform: scale(0.7);
221 transform: scale(0.7);
222 opacity: 0;
223 -webkit-transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1);
224 transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1); }
225 [dir=rtl] md-slider .md-focus-ring {
226 left: auto;
227 right: -17px; }
228 md-slider .md-disabled-thumb {
229 position: absolute;
230 left: -14px;
231 top: 10px;
232 width: 28px;
233 height: 28px;
234 border-radius: 28px;
235 -webkit-transform: scale(0.5);
236 transform: scale(0.5);
237 border-width: 4px;
238 border-style: solid;
239 display: none; }
240 [dir=rtl] md-slider .md-disabled-thumb {
241 left: auto;
242 right: -14px; }
243 md-slider.md-min .md-sign {
244 opacity: 0; }
245 md-slider:focus {
246 outline: none; }
247 md-slider.md-dragging .md-thumb-container,
248 md-slider.md-dragging .md-track-fill {
249 -webkit-transition: none;
250 transition: none; }
251 md-slider:not([md-discrete]) {
252 /* Hide the sign and ticks in non-discrete mode */ }
253 md-slider:not([md-discrete]) .md-track-ticks,
254 md-slider:not([md-discrete]) .md-sign {
255 display: none; }
256 md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper .md-thumb:hover {
257 -webkit-transform: scale(0.8);
258 transform: scale(0.8); }
259 md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {
260 -webkit-transform: scale(1);
261 transform: scale(1);
262 opacity: 1; }
263 md-slider:not([md-discrete]):not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
264 -webkit-animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1);
265 animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1); }
266 md-slider:not([md-discrete]):not([disabled]).md-active .md-slider-wrapper .md-thumb {
267 -webkit-transform: scale(1);
268 transform: scale(1); }
269 md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-focus-ring {
270 -webkit-transform: scale(0);
271 transform: scale(0);
272 -webkit-animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1);
273 animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
274 md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb {
275 -webkit-animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1);
276 animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
277 md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-thumb, md-slider[md-discrete]:not([disabled]).md-active .md-thumb {
278 -webkit-transform: scale(0);
279 transform: scale(0); }
280 md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-sign,
281 md-slider[md-discrete]:not([disabled]) .md-slider-wrapper.md-focused .md-sign:after, md-slider[md-discrete]:not([disabled]).md-active .md-sign,
282 md-slider[md-discrete]:not([disabled]).md-active .md-sign:after {
283 opacity: 1;
284 -webkit-transform: translate3d(0, 0, 0) scale(1);
285 transform: translate3d(0, 0, 0) scale(1); }
286 md-slider[md-discrete][disabled][readonly] .md-thumb {
287 -webkit-transform: scale(0);
288 transform: scale(0); }
289 md-slider[md-discrete][disabled][readonly] .md-sign,
290 md-slider[md-discrete][disabled][readonly] .md-sign:after {
291 opacity: 1;
292 -webkit-transform: translate3d(0, 0, 0) scale(1);
293 transform: translate3d(0, 0, 0) scale(1); }
294 md-slider[disabled] .md-track-fill {
295 display: none; }
296 md-slider[disabled] .md-track-ticks {
297 opacity: 0; }
298 md-slider[disabled]:not([readonly]) .md-sign {
299 opacity: 0; }
300 md-slider[disabled] .md-thumb {
301 -webkit-transform: scale(0.5);
302 transform: scale(0.5); }
303 md-slider[disabled] .md-disabled-thumb {
304 display: block; }
305 md-slider[md-vertical] {
306 -webkit-box-orient: vertical;
307 -webkit-box-direction: normal;
308 -webkit-flex-direction: column;
309 flex-direction: column;
310 min-height: 128px;
311 min-width: 0; }
312 md-slider[md-vertical] .md-slider-wrapper {
313 -webkit-box-flex: 1;
314 -webkit-flex: 1;
315 flex: 1;
316 padding-top: 12px;
317 padding-bottom: 12px;
318 width: 48px;
319 -webkit-align-self: center;
320 align-self: center;
321 display: -webkit-box;
322 display: -webkit-flex;
323 display: flex;
324 -webkit-box-pack: center;
325 -webkit-justify-content: center;
326 justify-content: center; }
327 md-slider[md-vertical] .md-track-container {
328 height: 100%;
329 width: 2px;
330 top: 0;
331 left: calc(50% - (2px / 2)); }
332 md-slider[md-vertical] .md-thumb-container {
333 top: auto;
334 margin-bottom: 23px;
335 left: calc(50% - 1px);
336 bottom: 0; }
337 md-slider[md-vertical] .md-thumb-container .md-thumb:after {
338 left: 1px; }
339 md-slider[md-vertical] .md-thumb-container .md-focus-ring {
340 left: -16px; }
341 md-slider[md-vertical] .md-track-fill {
342 bottom: 0; }
343 md-slider[md-vertical][md-discrete] .md-sign {
344 left: -40px;
345 top: 9.5px;
346 -webkit-transform: scale(0.4) translate3d(67.5px, 0, 0);
347 transform: scale(0.4) translate3d(67.5px, 0, 0);
348 /* The arrow pointing left next the sign */ }
349 md-slider[md-vertical][md-discrete] .md-sign:after {
350 top: 9.5px;
351 left: 19px;
352 border-top: 14px solid transparent;
353 border-right: 0;
354 border-bottom: 14px solid transparent;
355 border-left-width: 16px;
356 border-left-style: solid;
357 opacity: 0;
358 -webkit-transform: translate3d(0, -8px, 0);
359 transform: translate3d(0, -8px, 0);
360 -webkit-transition: all 0.2s ease-in-out;
361 transition: all 0.2s ease-in-out; }
362 md-slider[md-vertical][md-discrete] .md-sign .md-thumb-text {
363 z-index: 1;
364 font-size: 12px;
365 font-weight: bold; }
366 md-slider[md-vertical][md-discrete].md-active .md-sign:after,
367 md-slider[md-vertical][md-discrete] .md-focused .md-sign:after, md-slider[md-vertical][md-discrete][disabled][readonly] .md-sign:after {
368 top: 0; }
369 md-slider[md-vertical][disabled][readonly] .md-thumb {
370 -webkit-transform: scale(0);
371 transform: scale(0); }
372 md-slider[md-vertical][disabled][readonly] .md-sign,
373 md-slider[md-vertical][disabled][readonly] .md-sign:after {
374 opacity: 1;
375 -webkit-transform: translate3d(0, 0, 0) scale(1);
376 transform: translate3d(0, 0, 0) scale(1); }
377 md-slider[md-invert]:not([md-vertical]) .md-track-fill {
378 left: auto;
379 right: 0; }
380 [dir=rtl] md-slider[md-invert]:not([md-vertical]) .md-track-fill {
381 left: 0; }
382 [dir=rtl] md-slider[md-invert]:not([md-vertical]) .md-track-fill {
383 right: auto; }
384 md-slider[md-invert][md-vertical] .md-track-fill {
385 bottom: auto;
386 top: 0; }
387
388md-slider-container {
389 display: -webkit-box;
390 display: -webkit-flex;
391 display: flex;
392 -webkit-box-align: center;
393 -webkit-align-items: center;
394 align-items: center;
395 -webkit-box-orient: horizontal;
396 -webkit-box-direction: normal;
397 -webkit-flex-direction: row;
398 flex-direction: row; }
399 md-slider-container > *:first-child:not(md-slider),
400 md-slider-container > *:last-child:not(md-slider) {
401 min-width: 25px;
402 max-width: 42px;
403 height: 25px;
404 -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
405 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
406 -webkit-transition-property: color, max-width;
407 transition-property: color, max-width; }
408 md-slider-container > *:first-child:not(md-slider) {
409 margin-right: 16px; }
410 [dir=rtl] md-slider-container > *:first-child:not(md-slider) {
411 margin-right: auto;
412 margin-left: 16px; }
413 md-slider-container > *:last-child:not(md-slider) {
414 margin-left: 16px; }
415 [dir=rtl] md-slider-container > *:last-child:not(md-slider) {
416 margin-left: auto;
417 margin-right: 16px; }
418 md-slider-container[md-vertical] {
419 -webkit-box-orient: vertical;
420 -webkit-box-direction: normal;
421 -webkit-flex-direction: column;
422 flex-direction: column; }
423 md-slider-container[md-vertical] > *:first-child:not(md-slider),
424 md-slider-container[md-vertical] > *:last-child:not(md-slider) {
425 margin-right: 0;
426 margin-left: 0;
427 text-align: center; }
428 md-slider-container md-input-container input[type="number"] {
429 text-align: center;
430 padding-left: 15px;
431 height: 50px;
432 margin-top: -25px; }
433 [dir=rtl] md-slider-container md-input-container input[type="number"] {
434 padding-left: 0;
435 padding-right: 15px; }
436
437@media screen and (-ms-high-contrast: active) {
438 md-slider.md-default-theme .md-track {
439 border-bottom: 1px solid #fff; } }