3 * From https://github.com/flatlogic/awesome-bootstrap-checkbox
6 .checkbox label.box-label {
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;
31 .checkbox input[type="checkbox"] {
34 .checkbox input[type="checkbox"]:checked + label::after {
37 font-family: 'Font Awesome 5 Free 400';
39 color: @brand-success;
41 .checkbox input[type="checkbox"]:not(:checked) + label::after {
44 font-family: 'Font Awesome 5 Free 400';
48 .checkbox input[type="checkbox"]:disabled + label {
50 .checkbox input[type="checkbox"]:disabled + label::before {
51 background-color: @gray-lighter;
52 cursor: not-allowed; }
53 .checkbox.checkbox-circle label::before {
56 .checkbox-primary input[type="checkbox"]:checked + label::after {
57 background-color: @brand-primary;
58 border-color: @brand-primary; }
59 .checkbox-primary input[type="checkbox"]:checked + label::after {
62 .checkbox-danger input[type="checkbox"]:checked + label::after {
63 background-color: @brand-danger;
64 border-color: @brand-danger; }
65 .checkbox-danger input[type="checkbox"]:checked + label::after {
68 .checkbox-info input[type="checkbox"]:checked + label::after
70 background-color: @brand-info;
71 border-color: @brand-info;
73 .checkbox-info input[type="checkbox"]:checked + label::after
78 .checkbox-warning input[type="checkbox"]:checked + label::after {
79 background-color: @brand-warning;
80 border-color: @brand-warning; }
81 .checkbox-warning input[type="checkbox"]:checked + label::after {
84 .checkbox-success input[type="checkbox"]:checked + label::after {
85 background-color: @brand-success;
86 border-color: @brand-success; }
87 .checkbox-success input[type="checkbox"]:checked + label::after {
90 /* before is the outer cicle */
91 /* after is the inner circle.. */
96 display: inline-block;
99 .radio label::before {
101 display: inline-block;
107 border: 1px solid @gray-light;
109 background-color: @body-bg;
110 -webkit-transition: border 0.15s ease-in-out;
111 -o-transition: border 0.15s ease-in-out;
112 transition: border 0.15s ease-in-out; }
113 .radio label::after {
114 display: inline-block;
123 background-color: @body-bg;
124 -webkit-transform: scale(0, 0);
125 -ms-transform: scale(0, 0);
126 -o-transform: scale(0, 0);
127 transform: scale(0, 0);
128 -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
129 -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
130 -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
131 transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
133 .radio input[type="radio"] {
136 .radio input[type="radio"]:checked + label::after {
137 -webkit-transform: scale(1, 1);
138 -ms-transform: scale(1, 1);
139 -o-transform: scale(1, 1);
140 transform: scale(1, 1);
141 background-color: @gray;
143 .radio input[type="radio"]:disabled + label {
145 .radio input[type="radio"]:disabled + label::after {
146 cursor: not-allowed; }
148 .radio-primary input[type="radio"] + label::after {
149 background-color: @body-bg; }
150 .radio-primary input[type="radio"]:checked + label::after {
151 border-color: @brand-primary; }
152 .radio-primary input[type="radio"]:checked + label::after {
153 background-color: @brand-primary; }
155 .radio-danger input[type="radio"] + label::after {
156 background-color: @brand-danger; }
157 .radio-danger input[type="radio"]:checked + label::after {
158 border-color: @brand-danger; }
159 .radio-danger input[type="radio"]:checked + label::after {
160 background-color: @brand-danger; }
164 .radio-info input[type="radio"] + label::after {
165 background-color: @body-bg;
167 .radio-info input[type="radio"]:checked + label::after {
168 border-color: @brand-info; }
169 .radio-info input[type="radio"]:checked + label::after {
170 background-color: @brand-info; }
172 .radio-warning input[type="radio"] + label::after {
173 background-color: @body-bg; }
174 .radio-warning input[type="radio"]:checked + label::after {
175 border-color: @brand-warning; }
176 .radio-warning input[type="radio"]:checked + label::after {
177 background-color: @brand-warning; }
179 .radio-success input[type="radio"] + label::after {
180 background-color: @body-bg; }
181 .radio-success input[type="radio"]:checked + label::after {
182 border-color: @brand-success; }
183 .radio-success input[type="radio"]:checked + label::after {
184 background-color: @brand-success; }
186 .checkbox.checkbox-inline,
187 .radio.radio-inline {
191 .form-group.checkbox {