3 // --------------------------------------------------
5 @font-family-icon: 'FontAwesome';
6 @fa-var-check: "\f00c";
7 @check-icon: @fa-var-check;
9 .checkbox-variant(@parent, @color) {
10 .@{parent} input[type="checkbox"]:checked + label,
11 .@{parent} input[type="radio"]:checked + label {
13 background-color: @color;
22 .checkbox-variant-indeterminate(@parent, @color) {
23 .@{parent} input[type="checkbox"]:indeterminate + label,
24 .@{parent} input[type="radio"]:indeterminate + label {
26 background-color: @color;
30 background-color: #fff;
40 display: inline-block;
41 vertical-align: middle;
47 display: inline-block;
53 border: 1px solid @input-border;
55 background-color: #fff;
56 .transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
60 display: inline-block;
74 input[type="checkbox"],
79 &:focus + label::before{
83 &:checked + label::after{
84 font-family: @font-family-icon;
88 &:indeterminate + label::after{
93 background-color: #555555;
103 background-color: @input-bg-disabled;
110 &.checkbox-circle label::before{
119 .checkbox-variant(checkbox-primary, @brand-primary);
120 .checkbox-variant(checkbox-danger, @brand-danger);
121 .checkbox-variant(checkbox-info, @brand-info);
122 .checkbox-variant(checkbox-warning, @brand-warning);
123 .checkbox-variant(checkbox-success, @brand-success);
125 .checkbox-variant-indeterminate(checkbox-primary, @brand-primary);
126 .checkbox-variant-indeterminate(checkbox-danger, @brand-danger);
127 .checkbox-variant-indeterminate(checkbox-info, @brand-info);
128 .checkbox-variant-indeterminate(checkbox-warning, @brand-warning);
129 .checkbox-variant-indeterminate(checkbox-success, @brand-success);
133 // --------------------------------------------------
135 .radio-variant(@parent, @color) {
136 .@{parent} input[type="radio"]{
139 background-color: @color;
144 border-color: @color;
147 background-color: @color;
157 display: inline-block;
158 vertical-align: middle;
164 display: inline-block;
170 border: 1px solid @input-border;
172 background-color: #fff;
173 .transition(border 0.15s ease-in-out);
177 display: inline-block;
186 background-color: @input-color;
189 .transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
190 //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
198 &:focus + label::before{
202 &:checked + label::after{
221 .radio-variant(radio-primary, @brand-primary);
222 .radio-variant(radio-danger, @brand-danger);
223 .radio-variant(radio-info, @brand-info);
224 .radio-variant(radio-warning, @brand-warning);
225 .radio-variant(radio-success, @brand-success);
227 input[type="checkbox"],
228 input[type="radio"] {
229 &.styled:checked + label:after {
230 font-family: @font-family-icon;
231 content: @check-icon;
233 & .styled:checked + label {