git.roojs.org Git - ratchet/blob - lib/css/toggles.css

   1 /* Toggle styles (to be used with toggles.js)
   2 -------------------------------------------------- */
   3
   4 .toggle {
   5   position: relative;
   6   width: 75px;
   7   height: 28px;
   8   background-color: #eee;
   9   border: 1px solid #bbb;
  10   border-radius: 20px;
  11   box-shadow: inset 0 0 4px rgba(0, 0, 0, .1);
  12 }
  13
  14 /* Text indicating "on" or "off". Default is "off" */
  15 .toggle:before {
  16   position: absolute;
  17   right: 13px;
  18   font-weight: bold;
  19   line-height: 28px;
  20   color: #777;
  21   text-shadow: 0 1px #fff;
  22   text-transform: uppercase;
  23   content: "Off";
  24 }
  25
  26 /* Sliding handle */
  27 .toggle-handle {
  28   position: absolute;
  29   top: -1px;
  30   left: -1px;
  31   z-index: 2;
  32   width: 28px;
  33   height: 28px;
  34   background-color: #fff;
  35   background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%);
  36   background-image: linear-gradient(to bottom, #fff 0, #f2f2f2 100%);
  37   border: 1px solid rgba(0, 0, 0, .2);
  38   border-radius: 100px;
  39   -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
  40                   transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
  41 }
  42
  43 /* Active state for toggle */
  44 .toggle.active {
  45   background-color: #19a8e4;
  46   background-image: -webkit-linear-gradient(top, #088cd4 0, #19a8e4 100%);
  47   background-image: linear-gradient(to bottom, #088cd4 0, #19a8e4 100%);
  48   border: 1px solid #096c9d;
  49   box-shadow: inset 0 0 15px rgba(255, 255, 255, .25);
  50 }
  51
  52 /* Active state for toggle handle */
  53 .toggle.active .toggle-handle {
  54   border-color: #0a76ad;
  55   -webkit-transform: translate3d(48px,0,0);
  56           transform: translate3d(48px,0,0);
  57 }
  58
  59 /* Change "off" to "on" for active state */
  60 .toggle.active:before {
  61   right: auto;
  62   left: 15px;
  63   color: #fff;
  64   text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
  65   content: "On";
  66 }