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;
18 .checkbox label::after {
20 display: inline-block;
32 .checkbox input[type="checkbox"] {
35 .checkbox input[type="checkbox"]:checked + label::after {
38 font-family: 'Font Awesome 5 Free';
40 color: $brand-success;
43 .checkbox input[type="checkbox"]:not(:checked) + label::after {
46 font-family: 'Font Awesome 5 Free 400';
50 .checkbox input[type="checkbox"]:disabled + label {
52 .checkbox input[type="checkbox"]:disabled + label::after {
53 color: $gray-lighter !important; /* overrides primary etc.. */
54 cursor: not-allowed; }
55 .checkbox.checkbox-circle label::before {
59 .checkbox-primary input[type="checkbox"]:checked + label::after {
60 color: $brand-primary; }
63 .checkbox-danger input[type="checkbox"]:checked + label::after {
64 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 {