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

   1 .form-group {
   2 }
   3
   4 .checkbox {
   5   label {
   6     cursor: pointer;
   7     padding-left: 0; // Reset for Bootstrap rule
   8     color: $mdb-checkbox-label-color;
   9     @include mdb-label-color-toggle-focus();
  10   }
  11
  12   // Hide native checkbox
  13   input[type=checkbox] {
  14     opacity: 0;
  15     position: absolute;
  16     margin: 0;
  17     z-index: -1;
  18     width: 0;
  19     height: 0;
  20     overflow: hidden;
  21     left: 0;
  22     pointer-events: none;
  23   }
  24
  25   .checkbox-material {
  26     vertical-align: middle;
  27     position: relative;
  28     top: 1px;
  29     padding-right: 5px;
  30     display: inline-block;
  31
  32     &:before {
  33         display: block;
  34         position: absolute;
  35         left: 0;
  36         content: "";
  37         background-color: rgba(0,0,0,.84);
  38         height: $mdb-checkbox-size;
  39         width: $mdb-checkbox-size;
  40         border-radius: 100%;
  41         z-index: 1;
  42         opacity: 0;
  43         margin: 0;
  44         top: 0;
  45         @include transform-scale3d(unquote('2.3,2.3,1'));
  46     }
  47
  48     .check {
  49       position: relative;
  50       display: inline-block;
  51       width: $mdb-checkbox-size;
  52       height: $mdb-checkbox-size;
  53       border: 1px solid $mdb-checkbox-border-color;
  54       overflow: hidden;
  55       z-index: 1;
  56       border-radius: $border-radius-base;
  57     }
  58     .check:before {
  59       position: absolute;
  60       content: "";
  61       transform: rotate(45deg);
  62       display: block;
  63       margin-top: -3px;
  64       margin-left: 7px;
  65       width: 0;
  66       height: 0;
  67       background: red;
  68       box-shadow:
  69         0 0 0 0,
  70         0 0 0 0,
  71         0 0 0 0,
  72         0 0 0 0,
  73         0 0 0 0,
  74         0 0 0 0,
  75         0 0 0 0 inset;
  76       @include animation(checkbox-off $mdb-checkbox-animation-check forwards);
  77     }
  78   }
  79
  80   input[type=checkbox] {
  81
  82     &:focus + .checkbox-material .check:after {
  83       opacity: 0.2;
  84     }
  85
  86     &:checked {
  87
  88       & + .checkbox-material .check {
  89         background: $mdb-checkbox-checked-color;
  90       }
  91
  92       & + .checkbox-material .check:before {
  93         color: #FFFFFF;
  94         box-shadow: 0 0 0 10px,
  95           10px -10px 0 10px,
  96         32px 0 0 20px,
  97         0px 32px 0 20px,
  98         -5px 5px 0 10px,
  99           20px -12px 0 11px;
 100         @include animation(checkbox-on $mdb-checkbox-animation-check forwards);
 101       }
 102
 103       & + .checkbox-material:before {
 104         @include animation(rippleOn $mdb-checkbox-animation-ripple);
 105       }
 106
 107       & + .checkbox-material .check:after {
 108         //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
 109         @include animation(rippleOn $mdb-checkbox-animation-ripple forwards);
 110       }
 111     }
 112
 113     &:not(:checked) {
 114       & + .checkbox-material:before {
 115         @include animation(rippleOff $mdb-checkbox-animation-ripple);
 116       }
 117
 118       & + .checkbox-material .check:after {
 119         @include animation(rippleOff $mdb-checkbox-animation-ripple); // Ripple effect on uncheck
 120
 121       }
 122     }
 123   }
 124
 125   // Style for disabled inputs
 126   fieldset[disabled] &,
 127   fieldset[disabled] & input[type=checkbox],
 128   input[type=checkbox][disabled] ~ .checkbox-material .check,
 129   input[type=checkbox][disabled] + .circle {
 130     opacity: 0.5;
 131   }
 132
 133   input[type=checkbox][disabled] ~ .checkbox-material .check{
 134       border-color: #000000;
 135       opacity: .26;
 136   }
 137
 138   input[type=checkbox][disabled] + .checkbox-material .check:after {
 139     background-color: $mdb-text-color-primary;
 140     transform: rotate(-45deg);
 141   }
 142 }
 143
 144 @keyframes checkbox-on {
 145   0% {
 146     box-shadow:
 147       0 0 0 10px,
 148       10px -10px 0 10px,
 149       32px 0 0 20px,
 150       0px 32px 0 20px,
 151       -5px 5px 0 10px,
 152       15px 2px 0 11px;
 153   }
 154   50% {
 155     box-shadow:
 156       0 0 0 10px,
 157       10px -10px 0 10px,
 158       32px 0 0 20px,
 159       0px 32px 0 20px,
 160       -5px 5px 0 10px,
 161       20px 2px 0 11px;
 162   }
 163   100% {
 164     box-shadow:
 165       0 0 0 10px,
 166       10px -10px 0 10px,
 167       32px 0 0 20px,
 168       0px 32px 0 20px,
 169       -5px 5px 0 10px,
 170       20px -12px 0 11px;
 171   }
 172 }
 173
 174 @keyframes rippleOn {
 175   0% {
 176     opacity: 0;
 177   }
 178   50% {
 179     opacity: 0.2;
 180   }
 181   100% {
 182     opacity: 0;
 183   }
 184 }
 185 @keyframes rippleOff {
 186   0% {
 187     opacity: 0;
 188   }
 189   50% {
 190     opacity: 0.2;
 191   }
 192   100% {
 193     opacity: 0;
 194   }
 195 }