frameworks/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.scss

   1 //
   2 // Checkboxes
   3 // --------------------------------------------------
   4
   5
   6 $font-family-icon: 'FontAwesome' !default;
   7 $fa-var-check: "\f00c" !default;
   8 $check-icon: $fa-var-check !default;
   9
  10 @mixin checkbox-variant($parent, $color) {
  11   #{$parent} input[type="checkbox"]:checked + label,
  12   #{$parent} input[type="radio"]:checked + label {
  13     &::before {
  14       background-color: $color;
  15       border-color: $color;
  16     }
  17     &::after{
  18       color: #fff;
  19     }
  20   }
  21 }
  22
  23 @mixin checkbox-variant-indeterminate($parent, $color) {
  24   #{$parent} input[type="checkbox"]:indeterminate + label,
  25   #{$parent} input[type="radio"]:indeterminate + label {
  26     &::before {
  27       background-color: $color;
  28       border-color: $color;
  29     }
  30     &::after{
  31       background-color: #fff;
  32     }
  33   }
  34 }
  35
  36
  37
  38 .checkbox{
  39   padding-left: 20px;
  40
  41   label{
  42     display: inline-block;
  43     vertical-align: middle;
  44     position: relative;
  45     padding-left: 5px;
  46
  47     &::before{
  48       content: "";
  49       display: inline-block;
  50       position: absolute;
  51       width: 17px;
  52       height: 17px;
  53       left: 0;
  54       margin-left: -20px;
  55       border: 1px solid $input-border;
  56       border-radius: 3px;
  57       background-color: #fff;
  58       @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
  59     }
  60
  61     &::after{
  62       display: inline-block;
  63       position: absolute;
  64       width: 16px;
  65       height: 16px;
  66       left: 0;
  67       top: 0;
  68       margin-left: -20px;
  69       padding-left: 3px;
  70       padding-top: 1px;
  71       font-size: 11px;
  72       color: $input-color;
  73     }
  74   }
  75
  76   input[type="checkbox"],
  77   input[type="radio"] {
  78     opacity: 0;
  79     z-index: 1;
  80
  81     &:focus + label::before{
  82       @include tab-focus();
  83     }
  84
  85     &:checked + label::after{
  86       font-family: $font-family-icon;
  87       content: $check-icon;
  88     }
  89
  90     &:indeterminate + label::after{
  91       display: block;
  92       content: "";
  93       width: 10px;
  94       height: 3px;
  95       background-color: #555555;
  96       border-radius: 2px;
  97       margin-left: -16.5px;
  98       margin-top: 7px;
  99     }
 100
 101     &:disabled + label{
 102       opacity: 0.65;
 103
 104       &::before{
 105         background-color: $input-bg-disabled;
 106         cursor: not-allowed;
 107       }
 108     }
 109
 110   }
 111
 112   &.checkbox-circle label::before{
 113     border-radius: 50%;
 114   }
 115
 116   &.checkbox-inline{
 117     margin-top: 0;
 118   }
 119 }
 120
 121 @include checkbox-variant('.checkbox-primary', $brand-primary);
 122 @include checkbox-variant('.checkbox-danger', $brand-danger);
 123 @include checkbox-variant('.checkbox-info', $brand-info);
 124 @include checkbox-variant('.checkbox-warning', $brand-warning);
 125 @include checkbox-variant('.checkbox-success', $brand-success);
 126
 127
 128 @include checkbox-variant-indeterminate('.checkbox-primary', $brand-primary);
 129 @include checkbox-variant-indeterminate('.checkbox-danger', $brand-danger);
 130 @include checkbox-variant-indeterminate('.checkbox-info', $brand-info);
 131 @include checkbox-variant-indeterminate('.checkbox-warning', $brand-warning);
 132 @include checkbox-variant-indeterminate('.checkbox-success', $brand-success);
 133
 134 //
 135 // Radios
 136 // --------------------------------------------------
 137
 138 @mixin radio-variant($parent, $color) {
 139   #{$parent} input[type="radio"]{
 140     + label{
 141       &::after{
 142         background-color: $color;
 143       }
 144     }
 145     &:checked + label{
 146       &::before {
 147         border-color: $color;
 148       }
 149       &::after{
 150         background-color: $color;
 151       }
 152     }
 153   }
 154 }
 155
 156 .radio{
 157   padding-left: 20px;
 158
 159   label{
 160     display: inline-block;
 161     vertical-align: middle;
 162     position: relative;
 163     padding-left: 5px;
 164
 165     &::before{
 166       content: "";
 167       display: inline-block;
 168       position: absolute;
 169       width: 17px;
 170       height: 17px;
 171       left: 0;
 172       margin-left: -20px;
 173       border: 1px solid $input-border;
 174       border-radius: 50%;
 175       background-color: #fff;
 176       @include transition(border 0.15s ease-in-out);
 177     }
 178
 179     &::after{
 180       display: inline-block;
 181       position: absolute;
 182       content: " ";
 183       width: 11px;
 184       height: 11px;
 185       left: 3px;
 186       top: 3px;
 187       margin-left: -20px;
 188       border-radius: 50%;
 189       background-color: $input-color;
 190       @include scale(0, 0);
 191
 192       @include transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
 193       //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
 194     }
 195   }
 196
 197   input[type="radio"]{
 198     opacity: 0;
 199     z-index: 1;
 200
 201     &:focus + label::before{
 202       @include tab-focus();
 203     }
 204
 205     &:checked + label::after{
 206       @include scale(1, 1);
 207     }
 208
 209     &:disabled + label{
 210       opacity: 0.65;
 211
 212       &::before{
 213         cursor: not-allowed;
 214       }
 215     }
 216
 217   }
 218
 219   &.radio-inline{
 220     margin-top: 0;
 221   }
 222 }
 223
 224 @include radio-variant('.radio-primary', $brand-primary);
 225 @include radio-variant('.radio-danger', $brand-danger);
 226 @include radio-variant('.radio-info', $brand-info);
 227 @include radio-variant('.radio-warning', $brand-warning);
 228 @include radio-variant('.radio-success', $brand-success);
 229
 230
 231 input[type="checkbox"],
 232 input[type="radio"] {
 233   &.styled:checked + label:after {
 234     font-family: $font-family-icon;
 235     content: $check-icon;
 236   }
 237   .styled:checked + label {
 238     &::before {
 239       color: #fff;
 240     }
 241     &::after {
 242       color: #fff;
 243     }
 244   }
 245 }