1 | /* ============================================================ |
---|
2 | * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru |
---|
3 | * http://www.larentis.eu/ |
---|
4 | * |
---|
5 | * Enhanced for radiobuttons by Stein, Peter @BdMdesigN |
---|
6 | * http://www.bdmdesign.org/ |
---|
7 | * |
---|
8 | * Project site: |
---|
9 | * http://www.larentis.eu/switch/ |
---|
10 | * ============================================================ |
---|
11 | * Licensed under the Apache License, Version 2.0 |
---|
12 | * http://www.apache.org/licenses/LICENSE-2.0 |
---|
13 | * ============================================================ */ |
---|
14 | .has-switch { |
---|
15 | display: inline-block; |
---|
16 | cursor: pointer; |
---|
17 | -webkit-border-radius: 5px; |
---|
18 | -moz-border-radius: 5px; |
---|
19 | border-radius: 5px; |
---|
20 | border: 1px solid; |
---|
21 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
22 | position: relative; |
---|
23 | text-align: left; |
---|
24 | overflow: hidden; |
---|
25 | line-height: 8px; |
---|
26 | -webkit-user-select: none; |
---|
27 | -moz-user-select: none; |
---|
28 | -ms-user-select: none; |
---|
29 | -o-user-select: none; |
---|
30 | user-select: none; |
---|
31 | vertical-align: middle; |
---|
32 | min-width: 100px; |
---|
33 | } |
---|
34 | .has-switch.switch-mini { |
---|
35 | min-width: 72px; |
---|
36 | } |
---|
37 | .has-switch.switch-mini i.switch-mini-icons { |
---|
38 | height: 1.20em; |
---|
39 | line-height: 9px; |
---|
40 | vertical-align: text-top; |
---|
41 | text-align: center; |
---|
42 | transform: scale(0.6); |
---|
43 | margin-top: -1px; |
---|
44 | margin-bottom: -1px; |
---|
45 | } |
---|
46 | .has-switch.switch-small { |
---|
47 | min-width: 80px; |
---|
48 | } |
---|
49 | .has-switch.switch-large { |
---|
50 | min-width: 120px; |
---|
51 | } |
---|
52 | .has-switch.deactivate { |
---|
53 | opacity: 0.5; |
---|
54 | filter: alpha(opacity=50); |
---|
55 | cursor: default !important; |
---|
56 | } |
---|
57 | .has-switch.deactivate label, |
---|
58 | .has-switch.deactivate span { |
---|
59 | cursor: default !important; |
---|
60 | } |
---|
61 | .has-switch > div { |
---|
62 | display: inline-block; |
---|
63 | width: 150%; |
---|
64 | position: relative; |
---|
65 | top: 0; |
---|
66 | } |
---|
67 | .has-switch > div.switch-animate { |
---|
68 | -webkit-transition: left 0.5s; |
---|
69 | -moz-transition: left 0.5s; |
---|
70 | -o-transition: left 0.5s; |
---|
71 | transition: left 0.5s; |
---|
72 | } |
---|
73 | .has-switch > div.switch-off { |
---|
74 | left: -50%; |
---|
75 | } |
---|
76 | .has-switch > div.switch-on { |
---|
77 | left: 0%; |
---|
78 | } |
---|
79 | .has-switch input[type=radio], |
---|
80 | .has-switch input[type=checkbox] { |
---|
81 | display: none; |
---|
82 | } |
---|
83 | .has-switch span, |
---|
84 | .has-switch label { |
---|
85 | -webkit-box-sizing: border-box; |
---|
86 | -moz-box-sizing: border-box; |
---|
87 | box-sizing: border-box; |
---|
88 | cursor: pointer; |
---|
89 | position: relative; |
---|
90 | display: inline-block; |
---|
91 | height: 100%; |
---|
92 | padding-bottom: 4px; |
---|
93 | padding-top: 4px; |
---|
94 | font-size: 14px; |
---|
95 | line-height: 20px; |
---|
96 | } |
---|
97 | .has-switch span.switch-mini, |
---|
98 | .has-switch label.switch-mini { |
---|
99 | padding-bottom: 4px; |
---|
100 | padding-top: 4px; |
---|
101 | font-size: 10px; |
---|
102 | line-height: 9px; |
---|
103 | } |
---|
104 | .has-switch span.switch-small, |
---|
105 | .has-switch label.switch-small { |
---|
106 | padding-bottom: 3px; |
---|
107 | padding-top: 3px; |
---|
108 | font-size: 12px; |
---|
109 | line-height: 18px; |
---|
110 | } |
---|
111 | .has-switch span.switch-large, |
---|
112 | .has-switch label.switch-large { |
---|
113 | padding-bottom: 9px; |
---|
114 | padding-top: 9px; |
---|
115 | font-size: 16px; |
---|
116 | line-height: normal; |
---|
117 | } |
---|
118 | .has-switch label { |
---|
119 | text-align: center; |
---|
120 | margin-top: -1px; |
---|
121 | margin-bottom: -1px; |
---|
122 | z-index: 100; |
---|
123 | width: 34%; |
---|
124 | border-left: 1px solid #cccccc; |
---|
125 | border-right: 1px solid #cccccc; |
---|
126 | color: #333333; |
---|
127 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
---|
128 | background-color: #f5f5f5; |
---|
129 | background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); |
---|
130 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); |
---|
131 | background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); |
---|
132 | background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); |
---|
133 | background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); |
---|
134 | background-repeat: repeat-x; |
---|
135 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); |
---|
136 | border-color: #e6e6e6 #e6e6e6 #bfbfbf; |
---|
137 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
138 | *background-color: #e6e6e6; |
---|
139 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
140 | |
---|
141 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
142 | } |
---|
143 | .has-switch label:hover, |
---|
144 | .has-switch label:focus, |
---|
145 | .has-switch label:active, |
---|
146 | .has-switch label.active, |
---|
147 | .has-switch label.disabled, |
---|
148 | .has-switch label[disabled] { |
---|
149 | color: #333333; |
---|
150 | background-color: #e6e6e6; |
---|
151 | *background-color: #d9d9d9; |
---|
152 | } |
---|
153 | .has-switch label:active, |
---|
154 | .has-switch label.active { |
---|
155 | background-color: #cccccc \9; |
---|
156 | } |
---|
157 | .has-switch label i { |
---|
158 | color: #000; |
---|
159 | text-shadow: 0 1px 0 #fff; |
---|
160 | line-height: 18px; |
---|
161 | pointer-events: none; |
---|
162 | } |
---|
163 | .has-switch span { |
---|
164 | text-align: center; |
---|
165 | z-index: 1; |
---|
166 | width: 33%; |
---|
167 | } |
---|
168 | .has-switch span.switch-left { |
---|
169 | -webkit-border-top-left-radius: 4px; |
---|
170 | -moz-border-radius-topleft: 4px; |
---|
171 | border-top-left-radius: 4px; |
---|
172 | -webkit-border-bottom-left-radius: 4px; |
---|
173 | -moz-border-radius-bottomleft: 4px; |
---|
174 | border-bottom-left-radius: 4px; |
---|
175 | } |
---|
176 | .has-switch span.switch-right { |
---|
177 | color: #333333; |
---|
178 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); |
---|
179 | background-color: #f0f0f0; |
---|
180 | background-image: -moz-linear-gradient(top, #e6e6e6, #ffffff); |
---|
181 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#ffffff)); |
---|
182 | background-image: -webkit-linear-gradient(top, #e6e6e6, #ffffff); |
---|
183 | background-image: -o-linear-gradient(top, #e6e6e6, #ffffff); |
---|
184 | background-image: linear-gradient(to bottom, #e6e6e6, #ffffff); |
---|
185 | background-repeat: repeat-x; |
---|
186 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); |
---|
187 | border-color: #ffffff #ffffff #d9d9d9; |
---|
188 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
189 | *background-color: #ffffff; |
---|
190 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
191 | |
---|
192 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
193 | } |
---|
194 | .has-switch span.switch-right:hover, |
---|
195 | .has-switch span.switch-right:focus, |
---|
196 | .has-switch span.switch-right:active, |
---|
197 | .has-switch span.switch-right.active, |
---|
198 | .has-switch span.switch-right.disabled, |
---|
199 | .has-switch span.switch-right[disabled] { |
---|
200 | color: #333333; |
---|
201 | background-color: #ffffff; |
---|
202 | *background-color: #f2f2f2; |
---|
203 | } |
---|
204 | .has-switch span.switch-right:active, |
---|
205 | .has-switch span.switch-right.active { |
---|
206 | background-color: #e6e6e6 \9; |
---|
207 | } |
---|
208 | .has-switch span.switch-primary, |
---|
209 | .has-switch span.switch-left { |
---|
210 | color: #ffffff; |
---|
211 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
---|
212 | background-color: #005fcc; |
---|
213 | background-image: -moz-linear-gradient(top, #0044cc, #0088cc); |
---|
214 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0044cc), to(#0088cc)); |
---|
215 | background-image: -webkit-linear-gradient(top, #0044cc, #0088cc); |
---|
216 | background-image: -o-linear-gradient(top, #0044cc, #0088cc); |
---|
217 | background-image: linear-gradient(to bottom, #0044cc, #0088cc); |
---|
218 | background-repeat: repeat-x; |
---|
219 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0); |
---|
220 | border-color: #0088cc #0088cc #005580; |
---|
221 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
222 | *background-color: #0088cc; |
---|
223 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
224 | |
---|
225 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
226 | } |
---|
227 | .has-switch span.switch-primary:hover, |
---|
228 | .has-switch span.switch-left:hover, |
---|
229 | .has-switch span.switch-primary:focus, |
---|
230 | .has-switch span.switch-left:focus, |
---|
231 | .has-switch span.switch-primary:active, |
---|
232 | .has-switch span.switch-left:active, |
---|
233 | .has-switch span.switch-primary.active, |
---|
234 | .has-switch span.switch-left.active, |
---|
235 | .has-switch span.switch-primary.disabled, |
---|
236 | .has-switch span.switch-left.disabled, |
---|
237 | .has-switch span.switch-primary[disabled], |
---|
238 | .has-switch span.switch-left[disabled] { |
---|
239 | color: #ffffff; |
---|
240 | background-color: #0088cc; |
---|
241 | *background-color: #0077b3; |
---|
242 | } |
---|
243 | .has-switch span.switch-primary:active, |
---|
244 | .has-switch span.switch-left:active, |
---|
245 | .has-switch span.switch-primary.active, |
---|
246 | .has-switch span.switch-left.active { |
---|
247 | background-color: #006699 \9; |
---|
248 | } |
---|
249 | .has-switch span.switch-info { |
---|
250 | color: #ffffff; |
---|
251 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
---|
252 | background-color: #41a7c5; |
---|
253 | background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de); |
---|
254 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de)); |
---|
255 | background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de); |
---|
256 | background-image: -o-linear-gradient(top, #2f96b4, #5bc0de); |
---|
257 | background-image: linear-gradient(to bottom, #2f96b4, #5bc0de); |
---|
258 | background-repeat: repeat-x; |
---|
259 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0); |
---|
260 | border-color: #5bc0de #5bc0de #28a1c5; |
---|
261 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
262 | *background-color: #5bc0de; |
---|
263 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
264 | |
---|
265 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
266 | } |
---|
267 | .has-switch span.switch-info:hover, |
---|
268 | .has-switch span.switch-info:focus, |
---|
269 | .has-switch span.switch-info:active, |
---|
270 | .has-switch span.switch-info.active, |
---|
271 | .has-switch span.switch-info.disabled, |
---|
272 | .has-switch span.switch-info[disabled] { |
---|
273 | color: #ffffff; |
---|
274 | background-color: #5bc0de; |
---|
275 | *background-color: #46b8da; |
---|
276 | } |
---|
277 | .has-switch span.switch-info:active, |
---|
278 | .has-switch span.switch-info.active { |
---|
279 | background-color: #31b0d5 \9; |
---|
280 | } |
---|
281 | .has-switch span.switch-success { |
---|
282 | color: #ffffff; |
---|
283 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
---|
284 | background-color: #58b058; |
---|
285 | background-image: -moz-linear-gradient(top, #51a351, #62c462); |
---|
286 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462)); |
---|
287 | background-image: -webkit-linear-gradient(top, #51a351, #62c462); |
---|
288 | background-image: -o-linear-gradient(top, #51a351, #62c462); |
---|
289 | background-image: linear-gradient(to bottom, #51a351, #62c462); |
---|
290 | background-repeat: repeat-x; |
---|
291 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0); |
---|
292 | border-color: #62c462 #62c462 #3b9e3b; |
---|
293 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
294 | *background-color: #62c462; |
---|
295 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
296 | |
---|
297 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
298 | } |
---|
299 | .has-switch span.switch-success:hover, |
---|
300 | .has-switch span.switch-success:focus, |
---|
301 | .has-switch span.switch-success:active, |
---|
302 | .has-switch span.switch-success.active, |
---|
303 | .has-switch span.switch-success.disabled, |
---|
304 | .has-switch span.switch-success[disabled] { |
---|
305 | color: #ffffff; |
---|
306 | background-color: #62c462; |
---|
307 | *background-color: #4fbd4f; |
---|
308 | } |
---|
309 | .has-switch span.switch-success:active, |
---|
310 | .has-switch span.switch-success.active { |
---|
311 | background-color: #42b142 \9; |
---|
312 | } |
---|
313 | .has-switch span.switch-warning { |
---|
314 | color: #ffffff; |
---|
315 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
---|
316 | background-color: #f9a123; |
---|
317 | background-image: -moz-linear-gradient(top, #f89406, #fbb450); |
---|
318 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450)); |
---|
319 | background-image: -webkit-linear-gradient(top, #f89406, #fbb450); |
---|
320 | background-image: -o-linear-gradient(top, #f89406, #fbb450); |
---|
321 | background-image: linear-gradient(to bottom, #f89406, #fbb450); |
---|
322 | background-repeat: repeat-x; |
---|
323 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0); |
---|
324 | border-color: #fbb450 #fbb450 #f89406; |
---|
325 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
326 | *background-color: #fbb450; |
---|
327 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
328 | |
---|
329 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
330 | } |
---|
331 | .has-switch span.switch-warning:hover, |
---|
332 | .has-switch span.switch-warning:focus, |
---|
333 | .has-switch span.switch-warning:active, |
---|
334 | .has-switch span.switch-warning.active, |
---|
335 | .has-switch span.switch-warning.disabled, |
---|
336 | .has-switch span.switch-warning[disabled] { |
---|
337 | color: #ffffff; |
---|
338 | background-color: #fbb450; |
---|
339 | *background-color: #faa937; |
---|
340 | } |
---|
341 | .has-switch span.switch-warning:active, |
---|
342 | .has-switch span.switch-warning.active { |
---|
343 | background-color: #fa9f1e \9; |
---|
344 | } |
---|
345 | .has-switch span.switch-danger { |
---|
346 | color: #ffffff; |
---|
347 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
---|
348 | background-color: #d14641; |
---|
349 | background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b); |
---|
350 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b)); |
---|
351 | background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b); |
---|
352 | background-image: -o-linear-gradient(top, #bd362f, #ee5f5b); |
---|
353 | background-image: linear-gradient(to bottom, #bd362f, #ee5f5b); |
---|
354 | background-repeat: repeat-x; |
---|
355 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0); |
---|
356 | border-color: #ee5f5b #ee5f5b #e51d18; |
---|
357 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
358 | *background-color: #ee5f5b; |
---|
359 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
360 | |
---|
361 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
362 | } |
---|
363 | .has-switch span.switch-danger:hover, |
---|
364 | .has-switch span.switch-danger:focus, |
---|
365 | .has-switch span.switch-danger:active, |
---|
366 | .has-switch span.switch-danger.active, |
---|
367 | .has-switch span.switch-danger.disabled, |
---|
368 | .has-switch span.switch-danger[disabled] { |
---|
369 | color: #ffffff; |
---|
370 | background-color: #ee5f5b; |
---|
371 | *background-color: #ec4844; |
---|
372 | } |
---|
373 | .has-switch span.switch-danger:active, |
---|
374 | .has-switch span.switch-danger.active { |
---|
375 | background-color: #e9322d \9; |
---|
376 | } |
---|
377 | .has-switch span.switch-default { |
---|
378 | color: #333333; |
---|
379 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); |
---|
380 | background-color: #f0f0f0; |
---|
381 | background-image: -moz-linear-gradient(top, #e6e6e6, #ffffff); |
---|
382 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#ffffff)); |
---|
383 | background-image: -webkit-linear-gradient(top, #e6e6e6, #ffffff); |
---|
384 | background-image: -o-linear-gradient(top, #e6e6e6, #ffffff); |
---|
385 | background-image: linear-gradient(to bottom, #e6e6e6, #ffffff); |
---|
386 | background-repeat: repeat-x; |
---|
387 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0); |
---|
388 | border-color: #ffffff #ffffff #d9d9d9; |
---|
389 | border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); |
---|
390 | *background-color: #ffffff; |
---|
391 | /* Darken IE7 buttons by default so they stand out more given they won't have borders */ |
---|
392 | |
---|
393 | filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
---|
394 | } |
---|
395 | .has-switch span.switch-default:hover, |
---|
396 | .has-switch span.switch-default:focus, |
---|
397 | .has-switch span.switch-default:active, |
---|
398 | .has-switch span.switch-default.active, |
---|
399 | .has-switch span.switch-default.disabled, |
---|
400 | .has-switch span.switch-default[disabled] { |
---|
401 | color: #333333; |
---|
402 | background-color: #ffffff; |
---|
403 | *background-color: #f2f2f2; |
---|
404 | } |
---|
405 | .has-switch span.switch-default:active, |
---|
406 | .has-switch span.switch-default.active { |
---|
407 | background-color: #e6e6e6 \9; |
---|
408 | } |
---|