Release 4.0.1
[DeezloaderRemix.git] / app / public / css / nouislider.css
1 /*!
2  * Materialize v0.100.2 (http://materializecss.com)
3  * Copyright 2014-2015 Materialize
4  * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
5  */
6
7 /*! nouislider - 9.1.0 - 2016-12-10 16:00:32 */
8
9
10 /* Functional styling;
11  * These styles are required for noUiSlider to function.
12  * You don't need to change these rules to apply your design.
13  */
14 .noUi-target,
15 .noUi-target * {
16   -webkit-touch-callout: none;
17   -webkit-tap-highlight-color: rgba(0,0,0,0);
18   -webkit-user-select: none;
19   -ms-touch-action: none;
20   touch-action: none;
21   -ms-user-select: none;
22   -moz-user-select: none;
23   user-select: none;
24   -moz-box-sizing: border-box;
25   box-sizing: border-box;
26 }
27 .noUi-target {
28   position: relative;
29   direction: ltr;
30 }
31 .noUi-base {
32   width: 100%;
33   height: 100%;
34   position: relative;
35   z-index: 1; /* Fix 401 */
36 }
37 .noUi-connect {
38   position: absolute;
39   right: 0;
40   top: 0;
41   left: 0;
42   bottom: 0;
43 }
44 .noUi-origin {
45   position: absolute;
46   height: 0;
47   width: 0;
48 }
49 .noUi-handle {
50   position: relative;
51   z-index: 1;
52 }
53 .noUi-state-tap .noUi-connect,
54 .noUi-state-tap .noUi-origin {
55   -webkit-transition: top 0.25s, right 0.25s, bottom 0.25s, left 0.25s;
56   transition: top 0.25s, right 0.25s, bottom 0.25s, left 0.25s;
57 }
58 .noUi-state-drag * {
59   cursor: inherit !important;
60 }
61
62 .noUi-handle-touch-area{
63     position: relative;
64     width: 44px;
65     height: 44px;
66     left: -15px;
67     top: -15px;
68 }
69 /* Painting and performance;
70  * Browsers can paint handles in their own layer.
71  */
72 .noUi-base,
73 .noUi-handle {
74   -webkit-transform: translate3d(0,0,0);
75   transform: translate3d(0,0,0);
76 }
77
78 /* Slider size and handle placement;
79  */
80 .noUi-horizontal {
81   height: 18px;
82 }
83 .noUi-horizontal .noUi-handle {
84   width: 34px;
85   height: 28px;
86   left: -17px;
87   top: -6px;
88 }
89 .noUi-vertical {
90   width: 18px;
91 }
92 .noUi-vertical .noUi-handle {
93   width: 28px;
94   height: 34px;
95   left: -6px;
96   top: -17px;
97 }
98
99 /* Styling;
100  */
101 .noUi-target {
102   background: #cdcdcd;
103   border-radius: 4px;
104   border: 1px solid transparent;
105 }
106 .noUi-connect {
107   background: #26A69A;
108   -webkit-transition: background 450ms;
109   transition: background 450ms;
110 }
111
112 /* Handles and cursors;
113  */
114 .noUi-draggable {
115   cursor: ew-resize;
116 }
117 .noUi-vertical .noUi-draggable {
118   cursor: ns-resize;
119 }
120 .noUi-handle {
121   border: 1px solid #D9D9D9;
122   border-radius: 3px;
123   background: #FFF;
124   cursor: default;
125   box-shadow: inset 0 0 1px #FFF,
126   inset 0 1px 7px #EBEBEB,
127   0 3px 6px -3px #BBB;
128 }
129 .noUi-active {
130   box-shadow: inset 0 0 1px #FFF,
131   inset 0 1px 7px #DDD,
132   0 3px 6px -3px #BBB;
133 }
134
135 /* Handle stripes
136  */
137 .noUi-handle:before,
138 .noUi-handle:after {
139   content: "";
140   display: block;
141   position: absolute;
142   height: 14px;
143   width: 1px;
144   background: #E8E7E6;
145   left: 14px;
146   top: 6px;
147 }
148 .noUi-handle:after {
149   left: 17px;
150 }
151 .noUi-vertical .noUi-handle:before,
152 .noUi-vertical .noUi-handle:after {
153   width: 14px;
154   height: 1px;
155   left: 6px;
156   top: 14px;
157 }
158 .noUi-vertical .noUi-handle:after {
159   top: 17px;
160 }
161
162 /* Disabled state;
163  */
164
165 [disabled] .noUi-connect {
166   background: #B8B8B8;
167 }
168 [disabled].noUi-target,
169 [disabled].noUi-handle,
170 [disabled] .noUi-handle {
171   cursor: not-allowed;
172 }
173
174
175 /* Base;
176  *
177  */
178 .noUi-pips,
179 .noUi-pips * {
180   -moz-box-sizing: border-box;
181   box-sizing: border-box;
182 }
183 .noUi-pips {
184   position: absolute;
185   color: #999;
186 }
187
188 /* Values;
189  *
190  */
191 .noUi-value {
192   position: absolute;
193   text-align: center;
194 }
195 .noUi-value-sub {
196   color: #ccc;
197   font-size: 10px;
198 }
199
200 /* Markings;
201  *
202  */
203 .noUi-marker {
204   position: absolute;
205   background: #CCC;
206 }
207 .noUi-marker-sub {
208   background: #AAA;
209 }
210 .noUi-marker-large {
211   background: #AAA;
212 }
213
214 /* Horizontal layout;
215  *
216  */
217 .noUi-pips-horizontal {
218   padding: 10px 0;
219   height: 80px;
220   top: 100%;
221   left: 0;
222   width: 100%;
223 }
224 .noUi-value-horizontal {
225   -webkit-transform: translate3d(-50%,50%,0);
226   transform: translate3d(-50%,50%,0);
227 }
228
229 .noUi-marker-horizontal.noUi-marker {
230   margin-left: -1px;
231   width: 2px;
232   height: 5px;
233 }
234 .noUi-marker-horizontal.noUi-marker-sub {
235   height: 10px;
236 }
237 .noUi-marker-horizontal.noUi-marker-large {
238   height: 15px;
239 }
240
241 /* Vertical layout;
242  *
243  */
244 .noUi-pips-vertical {
245   padding: 0 10px;
246   height: 100%;
247   top: 0;
248   left: 100%;
249 }
250 .noUi-value-vertical {
251   -webkit-transform: translate3d(0,50%,0);
252   transform: translate3d(0,50%,0);
253   padding-left: 25px;
254 }
255
256 .noUi-marker-vertical.noUi-marker {
257   width: 5px;
258   height: 2px;
259   margin-top: -1px;
260 }
261 .noUi-marker-vertical.noUi-marker-sub {
262   width: 10px;
263 }
264 .noUi-marker-vertical.noUi-marker-large {
265   width: 15px;
266 }
267
268 .noUi-tooltip {
269   display: block;
270   position: absolute;
271   border: 1px solid transparent;
272   border-radius: 3px;
273   background: #fff;
274   color: #000;
275   padding: 5px;
276   text-align: center;
277 }
278 .noUi-horizontal .noUi-tooltip {
279   -webkit-transform: translate(-50%, 0);
280   transform: translate(-50%, 0);
281   left: 50%;
282   bottom: 120%;
283 }
284 .noUi-vertical .noUi-tooltip {
285   -webkit-transform: translate(0, -50%);
286   transform: translate(0, -50%);
287   top: 50%;
288   right: 120%;
289 }
290
291 /* Materialize Styles */
292 .noUi-target {
293   border: 0;
294   border-radius: 0;
295 }
296 .noUi-horizontal {
297   height: 3px;
298 }
299
300 .noUi-vertical {
301   height: 100%;
302   width: 3px;
303 }
304
305 .noUi-horizontal .noUi-handle,
306 .noUi-vertical .noUi-handle {
307   width: 15px;
308   height: 15px;
309   border-radius: 50%;
310   box-shadow: none;
311   background-color: #26A69A;
312   border: none;
313   left: -5px;
314   top: -6px;
315   transition: width .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
316   height .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
317   left .2s cubic-bezier(0.215, 0.610, 0.355, 1.000),
318   top .2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
319 }
320 .noUi-handle:before {
321   content: none;
322 }
323 .noUi-handle:after {
324   content: none;
325 }
326
327 .noUi-target .noUi-active.noUi-handle {
328   width: 3px;
329   height: 3px;
330   left: 0;
331   top: 0;
332 }
333
334 .noUi-target.noUi-horizontal .noUi-tooltip {
335   position: absolute;
336   height: 30px;
337   width: 30px;
338   top: -17px;
339   left: -2px;
340   background-color: #26A69A;
341   border-radius: 50%;
342   transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
343   transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
344   transform: scale(.5) rotate(-45deg);
345   transform-origin: 50% 100%;
346 }
347 .noUi-target.noUi-horizontal .noUi-active .noUi-tooltip {
348   border-radius: 15px 15px 15px 0;
349   transform: rotate(-45deg) translate(23px, -25px);
350 }
351
352 .noUi-tooltip span {
353   width: 100%;
354   text-align: center;
355   color: #fff;
356   font-size: 12px;
357   opacity: 0;
358   position: absolute;
359   top: 6px;
360   left: -1px;
361   transition: opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
362 }
363
364 .noUi-horizontal .noUi-tooltip span {
365   transform: rotate(45deg);
366 }
367
368 .noUi-vertical .noUi-tooltip span {
369   transform: rotate(135deg);
370 }
371
372
373 .noUi-target.noUi-vertical .noUi-tooltip {
374   position: absolute;
375   height: 30px;
376   width: 30px;
377   top: -17px;
378   left: -2px;
379   background-color: #26A69A;
380   border-radius: 50%;
381   transition: border-radius .25s cubic-bezier(0.215, 0.610, 0.355, 1.000),
382   transform .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
383   transform: scale(.5) rotate(-45deg);
384   transform-origin: 50% 100%;
385 }
386 .noUi-target.noUi-vertical .noUi-active .noUi-tooltip {
387   border-radius: 15px 15px 15px 0;
388   transform: rotate(-135deg) translate(35px, -10px);
389 }
390 .noUi-vertical .noUi-tooltip span {
391   width: 100%;
392   text-align: center;
393   color: #fff;
394   font-size: 12px;
395   transform: rotate(135deg);
396   opacity: 0;
397   position: absolute;
398   top: 7px;
399   left: -1px;
400   transition: opacity .25s cubic-bezier(0.215, 0.610, 0.355, 1.000);
401 }
402
403 .noUi-horizontal .noUi-active .noUi-tooltip span,
404 .noUi-vertical .noUi-active .noUi-tooltip span {
405   opacity: 1;
406 }