GPQAPP

Форк
0
/
ion.rangeSlider.css 
675 строк · 13.0 Кб
1
/**
2
Ion.RangeSlider, 2.3.1
3
© Denis Ineshin, 2010 - 2019, IonDen.com
4
Build date: 2019-12-19 16:51:02
5
*/
6
.irs {
7
  position: relative;
8
  display: block;
9
  -webkit-touch-callout: none;
10
  -webkit-user-select: none;
11
  -khtml-user-select: none;
12
  -moz-user-select: none;
13
  -ms-user-select: none;
14
  user-select: none;
15
  font-size: 12px;
16
  font-family: Arial, sans-serif;
17
}
18
.irs-line {
19
  position: relative;
20
  display: block;
21
  overflow: hidden;
22
  outline: none !important;
23
}
24
.irs-bar {
25
  position: absolute;
26
  display: block;
27
  left: 0;
28
  width: 0;
29
}
30
.irs-shadow {
31
  position: absolute;
32
  display: none;
33
  left: 0;
34
  width: 0;
35
}
36
.irs-handle {
37
  position: absolute;
38
  display: block;
39
  box-sizing: border-box;
40
  cursor: default;
41
  z-index: 1;
42
}
43
.irs-handle.type_last {
44
  z-index: 2;
45
}
46
.irs-min,
47
.irs-max {
48
  position: absolute;
49
  display: block;
50
  cursor: default;
51
}
52
.irs-min {
53
  left: 0;
54
}
55
.irs-max {
56
  right: 0;
57
}
58
.irs-from,
59
.irs-to,
60
.irs-single {
61
  position: absolute;
62
  display: block;
63
  top: 0;
64
  left: 0;
65
  cursor: default;
66
  white-space: nowrap;
67
}
68
.irs-grid {
69
  position: absolute;
70
  display: none;
71
  bottom: 0;
72
  left: 0;
73
  width: 100%;
74
  height: 20px;
75
}
76
.irs-with-grid .irs-grid {
77
  display: block;
78
}
79
.irs-grid-pol {
80
  position: absolute;
81
  top: 0;
82
  left: 0;
83
  width: 1px;
84
  height: 8px;
85
  background: #000;
86
}
87
.irs-grid-pol.small {
88
  height: 4px;
89
}
90
.irs-grid-text {
91
  position: absolute;
92
  bottom: 0;
93
  left: 0;
94
  white-space: nowrap;
95
  text-align: center;
96
  font-size: 9px;
97
  line-height: 9px;
98
  padding: 0 3px;
99
  color: #000;
100
}
101
.irs-disable-mask {
102
  position: absolute;
103
  display: block;
104
  top: 0;
105
  left: -1%;
106
  width: 102%;
107
  height: 100%;
108
  cursor: default;
109
  background: rgba(0, 0, 0, 0);
110
  z-index: 2;
111
}
112
.lt-ie9 .irs-disable-mask {
113
  background: #000;
114
  filter: alpha(opacity=0);
115
  cursor: not-allowed;
116
}
117
.irs-disabled {
118
  opacity: 0.4;
119
}
120
.irs-hidden-input {
121
  position: absolute !important;
122
  display: block !important;
123
  top: 0 !important;
124
  left: 0 !important;
125
  width: 0 !important;
126
  height: 0 !important;
127
  font-size: 0 !important;
128
  line-height: 0 !important;
129
  padding: 0 !important;
130
  margin: 0 !important;
131
  overflow: hidden;
132
  outline: none !important;
133
  z-index: -9999 !important;
134
  background: none !important;
135
  border-style: solid !important;
136
  border-color: transparent !important;
137
}
138
.irs--flat {
139
  height: 40px;
140
}
141
.irs--flat.irs-with-grid {
142
  height: 60px;
143
}
144
.irs--flat .irs-line {
145
  top: 25px;
146
  height: 12px;
147
  background-color: #e1e4e9;
148
  border-radius: 4px;
149
}
150
.irs--flat .irs-bar {
151
  top: 25px;
152
  height: 12px;
153
  background-color: #ed5565;
154
}
155
.irs--flat .irs-bar--single {
156
  border-radius: 4px 0 0 4px;
157
}
158
.irs--flat .irs-shadow {
159
  height: 1px;
160
  bottom: 16px;
161
  background-color: #e1e4e9;
162
}
163
.irs--flat .irs-handle {
164
  top: 22px;
165
  width: 16px;
166
  height: 18px;
167
  background-color: transparent;
168
}
169
.irs--flat .irs-handle > i:first-child {
170
  position: absolute;
171
  display: block;
172
  top: 0;
173
  left: 50%;
174
  width: 2px;
175
  height: 100%;
176
  margin-left: -1px;
177
  background-color: #da4453;
178
}
179
.irs--flat .irs-handle.state_hover > i:first-child,
180
.irs--flat .irs-handle:hover > i:first-child {
181
  background-color: #a43540;
182
}
183
.irs--flat .irs-min,
184
.irs--flat .irs-max {
185
  top: 0;
186
  padding: 1px 3px;
187
  color: #999;
188
  font-size: 10px;
189
  line-height: 1.333;
190
  text-shadow: none;
191
  background-color: #e1e4e9;
192
  border-radius: 4px;
193
}
194
.irs--flat .irs-from,
195
.irs--flat .irs-to,
196
.irs--flat .irs-single {
197
  color: white;
198
  font-size: 10px;
199
  line-height: 1.333;
200
  text-shadow: none;
201
  padding: 1px 5px;
202
  background-color: #ed5565;
203
  border-radius: 4px;
204
}
205
.irs--flat .irs-from:before,
206
.irs--flat .irs-to:before,
207
.irs--flat .irs-single:before {
208
  position: absolute;
209
  display: block;
210
  content: "";
211
  bottom: -6px;
212
  left: 50%;
213
  width: 0;
214
  height: 0;
215
  margin-left: -3px;
216
  overflow: hidden;
217
  border: 3px solid transparent;
218
  border-top-color: #ed5565;
219
}
220
.irs--flat .irs-grid-pol {
221
  background-color: #e1e4e9;
222
}
223
.irs--flat .irs-grid-text {
224
  color: #999;
225
}
226
.irs--big {
227
  height: 55px;
228
}
229
.irs--big.irs-with-grid {
230
  height: 70px;
231
}
232
.irs--big .irs-line {
233
  top: 33px;
234
  height: 12px;
235
  background-color: white;
236
  background: linear-gradient(to bottom, #ddd -50%, white 150%);
237
  border: 1px solid #ccc;
238
  border-radius: 12px;
239
}
240
.irs--big .irs-bar {
241
  top: 33px;
242
  height: 12px;
243
  background-color: #92bce0;
244
  border: 1px solid #428bca;
245
  background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
246
  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
247
}
248
.irs--big .irs-bar--single {
249
  border-radius: 12px 0 0 12px;
250
}
251
.irs--big .irs-shadow {
252
  height: 1px;
253
  bottom: 16px;
254
  background-color: rgba(66, 139, 202, 0.5);
255
}
256
.irs--big .irs-handle {
257
  top: 25px;
258
  width: 30px;
259
  height: 30px;
260
  border: 1px solid rgba(0, 0, 0, 0.3);
261
  background-color: #cbcfd5;
262
  background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
263
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
264
  border-radius: 30px;
265
}
266
.irs--big .irs-handle.state_hover,
267
.irs--big .irs-handle:hover {
268
  border-color: rgba(0, 0, 0, 0.45);
269
  background-color: #939ba7;
270
  background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%);
271
}
272
.irs--big .irs-min,
273
.irs--big .irs-max {
274
  top: 0;
275
  padding: 1px 5px;
276
  color: white;
277
  text-shadow: none;
278
  background-color: #9f9f9f;
279
  border-radius: 3px;
280
}
281
.irs--big .irs-from,
282
.irs--big .irs-to,
283
.irs--big .irs-single {
284
  color: white;
285
  text-shadow: none;
286
  padding: 1px 5px;
287
  background-color: #428bca;
288
  background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
289
  border-radius: 3px;
290
}
291
.irs--big .irs-grid-pol {
292
  background-color: #428bca;
293
}
294
.irs--big .irs-grid-text {
295
  color: #428bca;
296
}
297
.irs--modern {
298
  height: 55px;
299
}
300
.irs--modern.irs-with-grid {
301
  height: 55px;
302
}
303
.irs--modern .irs-line {
304
  top: 25px;
305
  height: 5px;
306
  background-color: #d1d6e0;
307
  background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
308
  border: 1px solid #a3adc1;
309
  border-bottom-width: 0;
310
  border-radius: 5px;
311
}
312
.irs--modern .irs-bar {
313
  top: 25px;
314
  height: 5px;
315
  background: #20b426;
316
  background: linear-gradient(to bottom, #20b426 0%, #18891d 100%);
317
}
318
.irs--modern .irs-bar--single {
319
  border-radius: 5px 0 0 5px;
320
}
321
.irs--modern .irs-shadow {
322
  height: 1px;
323
  bottom: 21px;
324
  background-color: rgba(209, 214, 224, 0.5);
325
}
326
.irs--modern .irs-handle {
327
  top: 37px;
328
  width: 12px;
329
  height: 13px;
330
  border: 1px solid #a3adc1;
331
  border-top-width: 0;
332
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
333
  border-radius: 0 0 3px 3px;
334
}
335
.irs--modern .irs-handle > i:nth-child(1) {
336
  position: absolute;
337
  display: block;
338
  top: -4px;
339
  left: 1px;
340
  width: 6px;
341
  height: 6px;
342
  border: 1px solid #a3adc1;
343
  background: white;
344
  transform: rotate(45deg);
345
}
346
.irs--modern .irs-handle > i:nth-child(2) {
347
  position: absolute;
348
  display: block;
349
  box-sizing: border-box;
350
  top: 0;
351
  left: 0;
352
  width: 10px;
353
  height: 12px;
354
  background: #e9e6e6;
355
  background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
356
  border-radius: 0 0 3px 3px;
357
}
358
.irs--modern .irs-handle > i:nth-child(3) {
359
  position: absolute;
360
  display: block;
361
  box-sizing: border-box;
362
  top: 3px;
363
  left: 3px;
364
  width: 4px;
365
  height: 5px;
366
  border-left: 1px solid #a3adc1;
367
  border-right: 1px solid #a3adc1;
368
}
369
.irs--modern .irs-handle.state_hover,
370
.irs--modern .irs-handle:hover {
371
  border-color: #7685a2;
372
  background: #c3c7cd;
373
  background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%);
374
}
375
.irs--modern .irs-handle.state_hover > i:nth-child(1),
376
.irs--modern .irs-handle:hover > i:nth-child(1) {
377
  border-color: #7685a2;
378
}
379
.irs--modern .irs-handle.state_hover > i:nth-child(3),
380
.irs--modern .irs-handle:hover > i:nth-child(3) {
381
  border-color: #48536a;
382
}
383
.irs--modern .irs-min,
384
.irs--modern .irs-max {
385
  top: 0;
386
  font-size: 10px;
387
  line-height: 1.333;
388
  text-shadow: none;
389
  padding: 1px 5px;
390
  color: white;
391
  background-color: #d1d6e0;
392
  border-radius: 5px;
393
}
394
.irs--modern .irs-from,
395
.irs--modern .irs-to,
396
.irs--modern .irs-single {
397
  font-size: 10px;
398
  line-height: 1.333;
399
  text-shadow: none;
400
  padding: 1px 5px;
401
  background-color: #20b426;
402
  color: white;
403
  border-radius: 5px;
404
}
405
.irs--modern .irs-from:before,
406
.irs--modern .irs-to:before,
407
.irs--modern .irs-single:before {
408
  position: absolute;
409
  display: block;
410
  content: "";
411
  bottom: -6px;
412
  left: 50%;
413
  width: 0;
414
  height: 0;
415
  margin-left: -3px;
416
  overflow: hidden;
417
  border: 3px solid transparent;
418
  border-top-color: #20b426;
419
}
420
.irs--modern .irs-grid {
421
  height: 25px;
422
}
423
.irs--modern .irs-grid-pol {
424
  background-color: #dedede;
425
}
426
.irs--modern .irs-grid-text {
427
  color: silver;
428
  font-size: 13px;
429
}
430
.irs--sharp {
431
  height: 50px;
432
  font-size: 12px;
433
  line-height: 1;
434
}
435
.irs--sharp.irs-with-grid {
436
  height: 57px;
437
}
438
.irs--sharp .irs-line {
439
  top: 30px;
440
  height: 2px;
441
  background-color: black;
442
  border-radius: 2px;
443
}
444
.irs--sharp .irs-bar {
445
  top: 30px;
446
  height: 2px;
447
  background-color: #ee22fa;
448
}
449
.irs--sharp .irs-bar--single {
450
  border-radius: 2px 0 0 2px;
451
}
452
.irs--sharp .irs-shadow {
453
  height: 1px;
454
  bottom: 21px;
455
  background-color: rgba(0, 0, 0, 0.5);
456
}
457
.irs--sharp .irs-handle {
458
  top: 25px;
459
  width: 10px;
460
  height: 10px;
461
  background-color: #a804b2;
462
}
463
.irs--sharp .irs-handle > i:first-child {
464
  position: absolute;
465
  display: block;
466
  top: 100%;
467
  left: 0;
468
  width: 0;
469
  height: 0;
470
  border: 5px solid transparent;
471
  border-top-color: #a804b2;
472
}
473
.irs--sharp .irs-handle.state_hover,
474
.irs--sharp .irs-handle:hover {
475
  background-color: black;
476
}
477
.irs--sharp .irs-handle.state_hover > i:first-child,
478
.irs--sharp .irs-handle:hover > i:first-child {
479
  border-top-color: black;
480
}
481
.irs--sharp .irs-min,
482
.irs--sharp .irs-max {
483
  color: white;
484
  font-size: 14px;
485
  line-height: 1;
486
  top: 0;
487
  padding: 3px 4px;
488
  opacity: 0.4;
489
  background-color: #a804b2;
490
  border-radius: 2px;
491
}
492
.irs--sharp .irs-from,
493
.irs--sharp .irs-to,
494
.irs--sharp .irs-single {
495
  font-size: 14px;
496
  line-height: 1;
497
  text-shadow: none;
498
  padding: 3px 4px;
499
  background-color: #a804b2;
500
  color: white;
501
  border-radius: 2px;
502
}
503
.irs--sharp .irs-from:before,
504
.irs--sharp .irs-to:before,
505
.irs--sharp .irs-single:before {
506
  position: absolute;
507
  display: block;
508
  content: "";
509
  bottom: -6px;
510
  left: 50%;
511
  width: 0;
512
  height: 0;
513
  margin-left: -3px;
514
  overflow: hidden;
515
  border: 3px solid transparent;
516
  border-top-color: #a804b2;
517
}
518
.irs--sharp .irs-grid {
519
  height: 25px;
520
}
521
.irs--sharp .irs-grid-pol {
522
  background-color: #dedede;
523
}
524
.irs--sharp .irs-grid-text {
525
  color: silver;
526
  font-size: 13px;
527
}
528
.irs--round {
529
  height: 50px;
530
}
531
.irs--round.irs-with-grid {
532
  height: 65px;
533
}
534
.irs--round .irs-line {
535
  top: 36px;
536
  height: 4px;
537
  background-color: #dee4ec;
538
  border-radius: 4px;
539
}
540
.irs--round .irs-bar {
541
  top: 36px;
542
  height: 4px;
543
  background-color: #006cfa;
544
}
545
.irs--round .irs-bar--single {
546
  border-radius: 4px 0 0 4px;
547
}
548
.irs--round .irs-shadow {
549
  height: 4px;
550
  bottom: 21px;
551
  background-color: rgba(222, 228, 236, 0.5);
552
}
553
.irs--round .irs-handle {
554
  top: 26px;
555
  width: 24px;
556
  height: 24px;
557
  border: 4px solid #006cfa;
558
  background-color: white;
559
  border-radius: 24px;
560
  box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
561
}
562
.irs--round .irs-handle.state_hover,
563
.irs--round .irs-handle:hover {
564
  background-color: #f0f6ff;
565
}
566
.irs--round .irs-min,
567
.irs--round .irs-max {
568
  color: #333;
569
  font-size: 14px;
570
  line-height: 1;
571
  top: 0;
572
  padding: 3px 5px;
573
  background-color: rgba(0, 0, 0, 0.1);
574
  border-radius: 4px;
575
}
576
.irs--round .irs-from,
577
.irs--round .irs-to,
578
.irs--round .irs-single {
579
  font-size: 14px;
580
  line-height: 1;
581
  text-shadow: none;
582
  padding: 3px 5px;
583
  background-color: #006cfa;
584
  color: white;
585
  border-radius: 4px;
586
}
587
.irs--round .irs-from:before,
588
.irs--round .irs-to:before,
589
.irs--round .irs-single:before {
590
  position: absolute;
591
  display: block;
592
  content: "";
593
  bottom: -6px;
594
  left: 50%;
595
  width: 0;
596
  height: 0;
597
  margin-left: -3px;
598
  overflow: hidden;
599
  border: 3px solid transparent;
600
  border-top-color: #006cfa;
601
}
602
.irs--round .irs-grid {
603
  height: 25px;
604
}
605
.irs--round .irs-grid-pol {
606
  background-color: #dedede;
607
}
608
.irs--round .irs-grid-text {
609
  color: silver;
610
  font-size: 13px;
611
}
612
.irs--square {
613
  height: 50px;
614
}
615
.irs--square.irs-with-grid {
616
  height: 60px;
617
}
618
.irs--square .irs-line {
619
  top: 31px;
620
  height: 4px;
621
  background-color: #dedede;
622
}
623
.irs--square .irs-bar {
624
  top: 31px;
625
  height: 4px;
626
  background-color: black;
627
}
628
.irs--square .irs-shadow {
629
  height: 2px;
630
  bottom: 21px;
631
  background-color: #dedede;
632
}
633
.irs--square .irs-handle {
634
  top: 25px;
635
  width: 16px;
636
  height: 16px;
637
  border: 3px solid black;
638
  background-color: white;
639
  -webkit-transform: rotate(45deg);
640
  -ms-transform: rotate(45deg);
641
  transform: rotate(45deg);
642
}
643
.irs--square .irs-handle.state_hover,
644
.irs--square .irs-handle:hover {
645
  background-color: #f0f6ff;
646
}
647
.irs--square .irs-min,
648
.irs--square .irs-max {
649
  color: #333;
650
  font-size: 14px;
651
  line-height: 1;
652
  top: 0;
653
  padding: 3px 5px;
654
  background-color: rgba(0, 0, 0, 0.1);
655
}
656
.irs--square .irs-from,
657
.irs--square .irs-to,
658
.irs--square .irs-single {
659
  font-size: 14px;
660
  line-height: 1;
661
  text-shadow: none;
662
  padding: 3px 5px;
663
  background-color: black;
664
  color: white;
665
}
666
.irs--square .irs-grid {
667
  height: 25px;
668
}
669
.irs--square .irs-grid-pol {
670
  background-color: #dedede;
671
}
672
.irs--square .irs-grid-text {
673
  color: silver;
674
  font-size: 11px;
675
}
676

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.