pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
component-ion.less
(3748B)
1 /*
2 * Ion Slider
3 */
4
5
6 /* =====================================================================================================================
7 // RangeSlider */
8
9 .irs {
10 position: relative;
11 display: block;
12 }
13 .irs-line {
14 position: relative;
15 display: block;
16 overflow: hidden;
17 }
18 .irs-line-left, .irs-line-mid, .irs-line-right {
19 position: absolute;
20 display: block;
21 top: 0;
22 }
23 .irs-line-left {
24 left: 0;
25 width: 10%;
26 }
27 .irs-line-mid {
28 left: 10%;
29 width: 80%;
30 }
31 .irs-line-right {
32 right: 0;
33 width: 10%;
34 }
35
36 .irs-diapason {
37 position: absolute;
38 display: block;
39 left: 0;
40 width: 100%;
41 }
42 .irs-slider {
43 position: absolute;
44 display: block;
45 cursor: default;
46 z-index: 1;
47 }
48 .irs-slider.single {
49 left: 10px;
50 }
51 .irs-slider.single:before {
52 position: absolute;
53 display: block;
54 content: "";
55 top: -50%;
56 left: -150%;
57 width: 400%;
58 height: 200%;
59 background: rgba(red(@black), green(@black), blue(@black),0.0);
60 }
61 .irs-slider.from {
62 left: 100px;
63 }
64 .irs-slider.from:before {
65 position: absolute;
66 display: block;
67 content: "";
68 top: -50%;
69 left: -300%;
70 width: 400%;
71 height: 200%;
72 background: rgba(red(@black), green(@black), blue(@black),0.0);
73 }
74 .irs-slider.to {
75 left: 300px;
76 }
77 .irs-slider.to:before {
78 position: absolute;
79 display: block;
80 content: "";
81 top: -50%;
82 left: 0;
83 width: 400%;
84 height: 200%;
85 background: rgba(red(@black), green(@black), blue(@black),0.0);
86 }
87 .irs-slider.last {
88 z-index: 2;
89 }
90
91 .irs-min {
92 position: absolute;
93 display: block;
94 left: 0;
95 cursor: default;
96 }
97 .irs-max {
98 position: absolute;
99 display: block;
100 right: 0;
101 cursor: default;
102 }
103
104 .irs-from, .irs-to, .irs-single {
105 position: absolute;
106 display: block;
107 top: 0;
108 left: 0;
109 cursor: default;
110 white-space: nowrap;
111 }
112
113 .irs-grid {
114 position: absolute;
115 display: none;
116 bottom: 0;
117 left: 0;
118 width: 100%;
119 height: 20px;
120 }
121 .irs-with-grid .irs-grid {
122 display: block;
123 }
124 .irs-grid-pol {
125 position: absolute;
126 top: 0;
127 left: 0;
128 width: 1px;
129 height: 8px;
130 background: #000;
131 }
132 .irs-grid-pol.small {
133 height: 4px;
134 }
135 .irs-grid-text {
136 position: absolute;
137 bottom: 0;
138 left: 0;
139 width: 100px;
140 white-space: nowrap;
141 text-align: center;
142 font-size: 9px;
143 line-height: 9px;
144 color: #000;
145 }
146
147 /*
148 * CUST
149 *
150 */
151
152 .irs {
153 height: 40px;
154 }
155 .irs-with-grid {
156 height: 60px;
157 }
158 .irs-line {
159 height: 8px;
160 top: 25px;
161 background: @gray-lighter;
162 }
163 .irs-line-left {
164 height: 8px;
165 }
166 .irs-line-mid {
167 height: 8px;
168 }
169 .irs-line-right {
170 height: 8px;
171 }
172
173 .irs-diapason {
174 height: 8px;
175 top: 25px;
176 }
177
178 .irs-slider {
179 width: 10px;
180 height: 22px;
181 top: 17px;
182 border: 1px solid @white;
183 background: @handle-bg-color;
184 }
185 .irs-slider:hover {
186 background: darken(@handle-bg-color, 10%);
187 }
188 #irs-active-slider {
189 background: #686868;
190 box-shadow: rgba(red(@black), green(@black), blue(@black), 0.3) 1px 1px 1px 0px;
191 width: 12px;
192 height: 24px;
193 top: 16px;
194 }
195
196 .irs-min, .irs-max {
197 color: @gray-light;
198 font-size: 12px;
199 line-height: 1.333;
200 text-shadow: none;
201 top: 0;
202 padding: 1px 3px;
203 background: rgba(red(@black), green(@black), blue(@black),0.1);
204 border-radius: 0;
205 }
206 .lt-ie9 .irs-min, .lt-ie9 .irs-max {
207 background: @gray-mid-light;
208 }
209
210 .irs-from, .irs-to, .irs-single {
211 color: @white;
212 font-size: 10px;
213 line-height: 1.333;
214 text-shadow: none;
215 padding: 1px 5px;
216 background: rgba(red(@black), green(@black), blue(@black),0.4);
217 border-radius: 0;
218 }
219 .lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
220 background: @gray-light;
221 }
222
223 .irs-grid-pol {
224 background: #99a4ac;
225 }
226 .irs-grid-text {
227 color: #99a4ac;
228 }
229 .irs-diapason {
230 background: @slider-bar-color;
231 }