3 * From https://github.com/flatlogic/awesome-bootstrap-checkbox
10 -webkit-touch-callout: none;
11 -webkit-user-select: none;
12 -khtml-user-select: none;
13 -moz-user-select: none;
14 -ms-user-select: none;
17 .checkbox label::after {
18 display: inline-block;
29 .checkbox input[type="checkbox"] {
31 .checkbox input[type="checkbox"]:checked + label::after {
34 font-family: 'Font Awesome 5 Free 400';
36 color: @brand-success;
38 .checkbox input[type="checkbox"]:not(:checked) + label::after {
41 font-family: 'Font Awesome 5 Free 400';
45 .checkbox input[type="checkbox"]:disabled + label {
47 .checkbox input[type="checkbox"]:disabled + label::before {
48 background-color: @gray-lighter;
49 cursor: not-allowed; }
50 .checkbox.checkbox-circle label::before {
53 .checkbox-primary input[type="checkbox"]:checked + label::before {
54 background-color: @brand-primary;
55 border-color: @brand-primary; }
56 .checkbox-primary input[type="checkbox"]:checked + label::after {
59 .checkbox-danger input[type="checkbox"]:checked + label::before {
60 background-color: @brand-danger;
61 border-color: @brand-danger; }
62 .checkbox-danger input[type="checkbox"]:checked + label::after {
65 .checkbox-info input[type="checkbox"]:checked + label::before {
66 background-color: @brand-info;
67 border-color: @brand-info; }
68 .checkbox-info input[type="checkbox"]:checked + label::after {
71 .checkbox-warning input[type="checkbox"]:checked + label::before {
72 background-color: @brand-warning;
73 border-color: @brand-warning; }
74 .checkbox-warning input[type="checkbox"]:checked + label::after {
77 .checkbox-success input[type="checkbox"]:checked + label::before {
78 background-color: @brand-success;
79 border-color: @brand-success; }
80 .checkbox-success input[type="checkbox"]:checked + label::after {
83 /* before is the outer cicle */
84 /* after is the inner circle.. */
89 display: inline-block;
92 .radio label::before {
94 display: inline-block;
100 border: 1px solid @gray-light;
102 background-color: @body-bg;
103 -webkit-transition: border 0.15s ease-in-out;
104 -o-transition: border 0.15s ease-in-out;
105 transition: border 0.15s ease-in-out; }
106 .radio label::after {
107 display: inline-block;
116 background-color: @body-bg;
117 -webkit-transform: scale(0, 0);
118 -ms-transform: scale(0, 0);
119 -o-transform: scale(0, 0);
120 transform: scale(0, 0);
121 -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
122 -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
123 -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
124 transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
126 .radio input[type="radio"] {
129 .radio input[type="radio"]:checked + label::after {
130 -webkit-transform: scale(1, 1);
131 -ms-transform: scale(1, 1);
132 -o-transform: scale(1, 1);
133 transform: scale(1, 1);
134 background-color: @gray;
136 .radio input[type="radio"]:disabled + label {
138 .radio input[type="radio"]:disabled + label::before {
139 cursor: not-allowed; }
141 .radio-primary input[type="radio"] + label::after {
142 background-color: @body-bg; }
143 .radio-primary input[type="radio"]:checked + label::before {
144 border-color: @brand-primary; }
145 .radio-primary input[type="radio"]:checked + label::after {
146 background-color: @brand-primary; }
148 .radio-danger input[type="radio"] + label::after {
149 background-color: @brand-danger; }
150 .radio-danger input[type="radio"]:checked + label::before {
151 border-color: @brand-danger; }
152 .radio-danger input[type="radio"]:checked + label::after {
153 background-color: @brand-danger; }
157 .radio-info input[type="radio"] + label::after {
158 background-color: @body-bg;
160 .radio-info input[type="radio"]:checked + label::before {
161 border-color: @brand-info; }
162 .radio-info input[type="radio"]:checked + label::after {
163 background-color: @brand-info; }
165 .radio-warning input[type="radio"] + label::after {
166 background-color: @body-bg; }
167 .radio-warning input[type="radio"]:checked + label::before {
168 border-color: @brand-warning; }
169 .radio-warning input[type="radio"]:checked + label::after {
170 background-color: @brand-warning; }
172 .radio-success input[type="radio"] + label::after {
173 background-color: @body-bg; }
174 .radio-success input[type="radio"]:checked + label::before {
175 border-color: @brand-success; }
176 .radio-success input[type="radio"]:checked + label::after {
177 background-color: @brand-success; }
179 .checkbox.checkbox-inline,
180 .radio.radio-inline {