3 // --------------------------------------------------
6 $font-family-icon: 'ForkAwesome' !default;
7 $fa-var-check: "\f00c" !default;
8 $check-icon: $fa-var-check !default;
10 @mixin checkbox-variant($parent, $color) {
11 #{$parent} input[type="checkbox"]:checked + label,
12 #{$parent} input[type="radio"]:checked + label {
14 background-color: $color;
23 @mixin checkbox-variant-indeterminate($parent, $color) {
24 #{$parent} input[type="checkbox"]:indeterminate + label,
25 #{$parent} input[type="radio"]:indeterminate + label {
27 background-color: $color;
31 background-color: #fff;
42 display: inline-block;
43 vertical-align: middle;
49 display: inline-block;
55 border: 1px solid $input-border;
57 background-color: #fff;
58 @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
62 display: inline-block;
76 input[type="checkbox"],
81 &:focus + label::before{
85 &:checked + label::after{
86 font-family: $font-family-icon;
90 &:indeterminate + label::after{
95 background-color: #555555;
105 background-color: $input-bg-disabled;
112 &.checkbox-circle label::before{
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);
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);
136 // --------------------------------------------------
138 @mixin radio-variant($parent, $color) {
139 #{$parent} input[type="radio"]{
142 background-color: $color;
147 border-color: $color;
150 background-color: $color;
160 display: inline-block;
161 vertical-align: middle;
167 display: inline-block;
173 border: 1px solid $input-border;
175 background-color: #fff;
176 @include transition(border 0.15s ease-in-out);
180 display: inline-block;
189 background-color: $input-color;
190 @include scale(0, 0);
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
201 &:focus + label::before{
202 @include tab-focus();
205 &:checked + label::after{
206 @include scale(1, 1);
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);
231 input[type="checkbox"],
232 input[type="radio"] {
233 &.styled:checked + label:after {
234 font-family: $font-family-icon;
235 content: $check-icon;
237 .styled:checked + label {