1 /* ============================================================
2 * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
3 * http://www.larentis.eu/
5 * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
6 * http://www.bdmdesign.org/
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 * ============================================================ */
15 display: inline-block;
17 -webkit-border-radius: 5px;
18 -moz-border-radius: 5px;
21 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
26 -webkit-user-select: none;
27 -moz-user-select: none;
28 -ms-user-select: none;
31 vertical-align: middle;
34 .has-switch.switch-mini {
37 .has-switch.switch-mini i.switch-mini-icons {
40 vertical-align: text-top;
42 transform: scale(0.6);
46 .has-switch.switch-small {
49 .has-switch.switch-large {
52 .has-switch.deactivate {
54 filter: alpha(opacity=50);
55 cursor: default !important;
57 .has-switch.deactivate label,
58 .has-switch.deactivate span {
59 cursor: default !important;
62 display: inline-block;
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;
73 .has-switch > div.switch-off {
76 .has-switch > div.switch-on {
79 .has-switch input[type=radio],
80 .has-switch input[type=checkbox] {
85 -webkit-box-sizing: border-box;
86 -moz-box-sizing: border-box;
87 box-sizing: border-box;
90 display: inline-block;
97 .has-switch span.switch-mini,
98 .has-switch label.switch-mini {
104 .has-switch span.switch-small,
105 .has-switch label.switch-small {
111 .has-switch span.switch-large,
112 .has-switch label.switch-large {
124 border-left: 1px solid #cccccc;
125 border-right: 1px solid #cccccc;
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 */
141 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
150 background-color: #e6e6e6;
151 *background-color: #d9d9d9;
153 .has-switch label:active,
154 .has-switch label.active {
155 background-color: #cccccc \9;
157 .has-switch label i {
159 text-shadow: 0 1px 0 #fff;
161 pointer-events: none;
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;
176 .has-switch span.switch-right {
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 */
192 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
201 background-color: #ffffff;
202 *background-color: #f2f2f2;
204 .has-switch span.switch-right:active,
205 .has-switch span.switch-right.active {
206 background-color: #e6e6e6 \9;
208 .has-switch span.switch-primary,
209 .has-switch span.switch-left {
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 */
225 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
240 background-color: #0088cc;
241 *background-color: #0077b3;
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;
249 .has-switch span.switch-info {
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 */
265 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
274 background-color: #5bc0de;
275 *background-color: #46b8da;
277 .has-switch span.switch-info:active,
278 .has-switch span.switch-info.active {
279 background-color: #31b0d5 \9;
281 .has-switch span.switch-success {
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 */
297 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
306 background-color: #62c462;
307 *background-color: #4fbd4f;
309 .has-switch span.switch-success:active,
310 .has-switch span.switch-success.active {
311 background-color: #42b142 \9;
313 .has-switch span.switch-warning {
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 */
329 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
338 background-color: #fbb450;
339 *background-color: #faa937;
341 .has-switch span.switch-warning:active,
342 .has-switch span.switch-warning.active {
343 background-color: #fa9f1e \9;
345 .has-switch span.switch-danger {
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 */
361 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
370 background-color: #ee5f5b;
371 *background-color: #ec4844;
373 .has-switch span.switch-danger:active,
374 .has-switch span.switch-danger.active {
375 background-color: #e9322d \9;
377 .has-switch span.switch-default {
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 */
393 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
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] {
402 background-color: #ffffff;
403 *background-color: #f2f2f2;
405 .has-switch span.switch-default:active,
406 .has-switch span.switch-default.active {
407 background-color: #e6e6e6 \9;