source: trip-planner-front/node_modules/angular-material/modules/js/slider/slider.css@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

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