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::before {
19 display: inline-block;
25 border: 1px solid #cccccc;
27 background-color: #fff;
28 -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
29 -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
30 transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
31 .checkbox label::after {
32 display: inline-block;
43 .checkbox input[type="checkbox"] {
45 .checkbox input[type="checkbox"]:checked + label::after {
46 font-family: 'FontAwesome';
48 .checkbox input[type="checkbox"]:disabled + label {
50 .checkbox input[type="checkbox"]:disabled + label::before {
51 background-color: #eeeeee;
52 cursor: not-allowed; }
53 .checkbox.checkbox-circle label::before {
56 .checkbox-primary input[type="checkbox"]:checked + label::before {
57 background-color: #428bca;
58 border-color: #428bca; }
59 .checkbox-primary input[type="checkbox"]:checked + label::after {
62 .checkbox-danger input[type="checkbox"]:checked + label::before {
63 background-color: #d9534f;
64 border-color: #d9534f; }
65 .checkbox-danger input[type="checkbox"]:checked + label::after {
68 .checkbox-info input[type="checkbox"]:checked + label::before {
69 background-color: #5bc0de;
70 border-color: #5bc0de; }
71 .checkbox-info input[type="checkbox"]:checked + label::after {
74 .checkbox-warning input[type="checkbox"]:checked + label::before {
75 background-color: #f0ad4e;
76 border-color: #f0ad4e; }
77 .checkbox-warning input[type="checkbox"]:checked + label::after {
80 .checkbox-success input[type="checkbox"]:checked + label::before {
81 background-color: #5cb85c;
82 border-color: #5cb85c; }
83 .checkbox-success input[type="checkbox"]:checked + label::after {
86 /* before is the outer cicle */
87 /* after is the inner circle.. */
92 display: inline-block;
95 .radio label::before {
97 display: inline-block;
103 border: 1px solid #cccccc;
105 background-color: #fff;
106 -webkit-transition: border 0.15s ease-in-out;
107 -o-transition: border 0.15s ease-in-out;
108 transition: border 0.15s ease-in-out; }
109 .radio label::after {
110 display: inline-block;
119 background-color: #fff;
120 -webkit-transform: scale(0, 0);
121 -ms-transform: scale(0, 0);
122 -o-transform: scale(0, 0);
123 transform: scale(0, 0);
124 -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
125 -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
126 -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
127 transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
129 .radio input[type="radio"] {
132 .radio input[type="radio"]:checked + label::after {
133 -webkit-transform: scale(1, 1);
134 -ms-transform: scale(1, 1);
135 -o-transform: scale(1, 1);
136 transform: scale(1, 1);
137 background-color: #555555;
139 .radio input[type="radio"]:disabled + label {
141 .radio input[type="radio"]:disabled + label::before {
142 cursor: not-allowed; }
144 .radio-primary input[type="radio"] + label::after {
145 background-color: #fff; }
146 .radio-primary input[type="radio"]:checked + label::before {
147 border-color: #428bca; }
148 .radio-primary input[type="radio"]:checked + label::after {
149 background-color: #428bca; }
151 .radio-danger input[type="radio"] + label::after {
152 background-color: #d9534f; }
153 .radio-danger input[type="radio"]:checked + label::before {
154 border-color: #d9534f; }
155 .radio-danger input[type="radio"]:checked + label::after {
156 background-color: #d9534f; }
160 .radio-info input[type="radio"] + label::after {
161 background-color: #fff;
163 .radio-info input[type="radio"]:checked + label::before {
164 border-color: #5bc0de; }
165 .radio-info input[type="radio"]:checked + label::after {
166 background-color: #5bc0de; }
168 .radio-warning input[type="radio"] + label::after {
169 background-color: #fff; }
170 .radio-warning input[type="radio"]:checked + label::before {
171 border-color: #f0ad4e; }
172 .radio-warning input[type="radio"]:checked + label::after {
173 background-color: #f0ad4e; }
175 .radio-success input[type="radio"] + label::after {
176 background-color: #fff; }
177 .radio-success input[type="radio"]:checked + label::before {
178 border-color: #5cb85c; }
179 .radio-success input[type="radio"]:checked + label::after {
180 background-color: #5cb85c; }
182 .checkbox.checkbox-inline,
183 .radio.radio-inline {