xp-dev.com Git - namibia/blob - public/css/vendor/bootstrap-switch.css

   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 }