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'; /* change the font - uses the filled one */
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 {
51 .checkbox input[type="checkbox"]:disabled + label::after {
56 .checkbox.checkbox-circle label::before {
60 .checkbox-primary input[type="checkbox"]:checked + label::after {
61 color: @brand-primary; }
64 .checkbox-danger input[type="checkbox"]:checked + label::after {
65 color: @brand-danger; }
67 .checkbox-info input[type="checkbox"]:checked + label::after {
71 .checkbox-warning input[type="checkbox"]:checked + label::after {
72 color: @brand-warning; }
75 .checkbox-success input[type="checkbox"]:checked + label::after {
76 color: @brand-success;}
78 /* before is the outer cicle */
79 /* after is the inner circle.. */
84 display: inline-block;
87 .radio label::before {
89 display: inline-block;
95 border: 1px solid @gray-light;
97 background-color: @body-bg;
98 -webkit-transition: border 0.15s ease-in-out;
99 -o-transition: border 0.15s ease-in-out;
100 transition: border 0.15s ease-in-out; }
101 .radio label::after {
102 display: inline-block;
111 background-color: @body-bg;
112 -webkit-transform: scale(0, 0);
113 -ms-transform: scale(0, 0);
114 -o-transform: scale(0, 0);
115 transform: scale(0, 0);
116 -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
117 -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
118 -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
119 transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
121 .radio input[type="radio"] {
124 .radio input[type="radio"]:checked + label::after {
125 -webkit-transform: scale(1, 1);
126 -ms-transform: scale(1, 1);
127 -o-transform: scale(1, 1);
128 transform: scale(1, 1);
129 background-color: @gray;
131 .radio input[type="radio"]:disabled + label {
133 .radio input[type="radio"]:disabled + label::before {
134 cursor: not-allowed; }
136 .radio-primary input[type="radio"] + label::after {
137 background-color: @body-bg; }
138 .radio-primary input[type="radio"]:checked + label::before {
139 border-color: @brand-primary; }
140 .radio-primary input[type="radio"]:checked + label::after {
141 background-color: @brand-primary; }
143 .radio-danger input[type="radio"] + label::after {
144 background-color: @brand-danger; }
145 .radio-danger input[type="radio"]:checked + label::before {
146 border-color: @brand-danger; }
147 .radio-danger input[type="radio"]:checked + label::after {
148 background-color: @brand-danger; }
152 .radio-info input[type="radio"] + label::after {
153 background-color: @body-bg;
155 .radio-info input[type="radio"]:checked + label::before {
156 border-color: @brand-info; }
157 .radio-info input[type="radio"]:checked + label::after {
158 background-color: @brand-info; }
160 .radio-warning input[type="radio"] + label::after {
161 background-color: @body-bg; }
162 .radio-warning input[type="radio"]:checked + label::before {
163 border-color: @brand-warning; }
164 .radio-warning input[type="radio"]:checked + label::after {
165 background-color: @brand-warning; }
167 .radio-success input[type="radio"] + label::after {
168 background-color: @body-bg; }
169 .radio-success input[type="radio"]:checked + label::before {
170 border-color: @brand-success; }
171 .radio-success input[type="radio"]:checked + label::after {
172 background-color: @brand-success; }
174 .checkbox.checkbox-inline,
175 .radio.radio-inline {
179 .form-group.checkbox {