git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_togglebutton.scss

   1 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
   2
   3 .togglebutton {
   4   vertical-align: middle;
   5   &, label, input, .toggle {
   6     user-select: none;
   7   }
   8   label {
   9     cursor: pointer;
  10     color: $mdb-toggle-label-color;
  11     @include mdb-label-color-toggle-focus();
  12
  13     // Hide original checkbox
  14     input[type=checkbox] {
  15       opacity: 0;
  16       width: 0;
  17       height: 0;
  18     }
  19
  20     .toggle {
  21       text-align: left; // Issue #737 horizontal form
  22       margin-left: 5px;
  23     }
  24     // Switch bg off and disabled
  25     .toggle,
  26     input[type=checkbox][disabled] + .toggle {
  27       content: "";
  28       display: inline-block;
  29       width: 30px;
  30       height: 15px;
  31       background-color: rgba(80, 80, 80, 0.7);
  32       border-radius: 15px;
  33       margin-right: 15px;
  34       transition: background 0.3s ease;
  35       vertical-align: middle;
  36     }
  37     // Handle off
  38     .toggle:after {
  39       content: "";
  40       display: inline-block;
  41       width: 20px;
  42       height: 20px;
  43       background-color: #FFFFFF;
  44       border-radius: 20px;
  45       position: relative;
  46       box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  47       left: -5px;
  48       top: -3px;
  49       border: 1px solid $mdb-checkbox-border-color;
  50       transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
  51     }
  52     input[type=checkbox] {
  53       // Handle disabled
  54       &[disabled] {
  55         & + .toggle:after,
  56         &:checked + .toggle:after {
  57           background-color: #BDBDBD;
  58         }
  59       }
  60
  61       & + .toggle:active:after,
  62       &[disabled] + .toggle:active:after {
  63         box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
  64       }
  65
  66       // Ripple off and disabled
  67       &:checked + .toggle:after {
  68         left: 15px;
  69       }
  70     }
  71
  72     // set bg when checked
  73     input[type=checkbox]:checked {
  74       + .toggle {
  75         background-color: rgba($brand-primary, (70/100)); // Switch bg on
  76       }
  77
  78       + .toggle:after {
  79         border-color: $brand-primary; // Handle on
  80       }
  81
  82       + .toggle:active:after {
  83         box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (10/100)); // Ripple on
  84       }
  85     }
  86   }
  87 }