|
0
|
1 // main: ../style.scss
|
|
|
2 /********************************
|
|
|
3 *********************************
|
|
|
4 Range Slider
|
|
|
5 *********************************
|
|
|
6 *********************************/
|
|
|
7 .irs {
|
|
|
8 display: block;
|
|
|
9 clear: both;
|
|
|
10 margin: 3em 0;
|
|
|
11
|
|
|
12 .irs-single,
|
|
|
13 .irs-from,
|
|
|
14 .irs-to {
|
|
|
15 display: block;
|
|
|
16 height: 2em;
|
|
|
17 line-height: 2em;
|
|
|
18 text-align: center;
|
|
|
19 display: block;
|
|
|
20 background: $primary;
|
|
|
21 color: #fff;
|
|
|
22 font-size: em(10);
|
|
|
23 top: -3em;
|
|
|
24 padding: 0 .5em;
|
|
|
25
|
|
|
26 &:after {
|
|
|
27 border-color: $primary transparent transparent transparent;
|
|
|
28 }
|
|
|
29 }
|
|
|
30
|
|
|
31 .irs-single,
|
|
|
32 .irs-max,
|
|
|
33 .irs-min,
|
|
|
34 .irs-from,
|
|
|
35 .irs-to {
|
|
|
36 &:after {
|
|
|
37 content: '';
|
|
|
38 @include size(0);
|
|
|
39 border-style: solid;
|
|
|
40 border-width: 5px 3px 0 3px;
|
|
|
41 @include position(absolute, null 50% em(-5,10) null);
|
|
|
42 transform: translateX(50%);
|
|
|
43 }
|
|
|
44 }
|
|
|
45
|
|
|
46 .irs-slider {
|
|
|
47 display: block;
|
|
|
48 @include size(2em);
|
|
|
49 background: yellow;
|
|
|
50 top: 0;
|
|
|
51 border-radius: 100px;
|
|
|
52 background: #fff;
|
|
|
53 border: 1px solid #ddd;
|
|
|
54 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1);
|
|
|
55 cursor: pointer;
|
|
|
56 z-index: 3;
|
|
|
57 }
|
|
|
58
|
|
|
59 .irs-shadow.shadow-from,
|
|
|
60 .irs-shadow.shadow-to,
|
|
|
61 .irs-line,
|
|
|
62 .irs-bar {
|
|
|
63 height: 1em;
|
|
|
64 top: 0.5em;
|
|
|
65 border-radius: 100px;
|
|
|
66 background: #eee;
|
|
|
67 box-shadow:inset 1px 1px 5px 0 #ddd;
|
|
|
68 border: 1px solid #d9d9d9;
|
|
|
69 cursor: pointer;
|
|
|
70 }
|
|
|
71
|
|
|
72 .irs-bar {
|
|
|
73 background: $primary;
|
|
|
74 box-shadow:inset 1px 1px 5px 0 $primary;
|
|
|
75 border: 1px solid darken( $primary , 10%);
|
|
|
76 border-left: 0;
|
|
|
77 z-index: 2;
|
|
|
78 }
|
|
|
79
|
|
|
80 .irs-shadow.shadow-from,
|
|
|
81 .irs-shadow.shadow-to {
|
|
|
82 background: #bbb;
|
|
|
83 box-shadow:inset 1px 1px 5px 0 #bbb;
|
|
|
84 border: 1px solid #aaa;
|
|
|
85 z-index: 1;
|
|
|
86 }
|
|
|
87
|
|
|
88 .irs-grid {
|
|
|
89 top: 2em;
|
|
|
90 opacity: 0.2;
|
|
|
91 }
|
|
|
92
|
|
|
93 .irs-max,
|
|
|
94 .irs-min {
|
|
|
95 text-align: center;
|
|
|
96 height: 2em;
|
|
|
97 padding: 0 .5em;
|
|
|
98 line-height: 2em;
|
|
|
99 @include position(absolute, -3em null null 0);
|
|
|
100 background: #eee;
|
|
|
101 border: 1px solid #ddd;
|
|
|
102 font-size: em(10);
|
|
|
103 &:after {
|
|
|
104 border-color: #ddd transparent transparent transparent;
|
|
|
105 }
|
|
|
106 }
|
|
|
107
|
|
|
108 .irs-min{
|
|
|
109 left: 0
|
|
|
110 }
|
|
|
111 .irs-max{
|
|
|
112 left: auto;
|
|
|
113 right: 0;
|
|
|
114 }
|
|
|
115
|
|
|
116 .irs-bar-edge {
|
|
|
117 height: 1em;
|
|
|
118 top: 0.5em;
|
|
|
119 width: em(20);
|
|
|
120 border: 1px solid darken( $primary , 10%);
|
|
|
121 border-right: 0;
|
|
|
122 background: $primary;
|
|
|
123 box-shadow:inset 1px 1px 5px 0 $primary;
|
|
|
124 border-radius: 16px 0 0 16px;
|
|
|
125 }
|
|
|
126 }
|
