Skip to content

Commit 5e9ee41

Browse files
gaykovgaykov
committed
Merge pull request flatlogic#30 from flatlogic/issue7
Issue flatlogic#7 fixed
2 parents 48387cf + d9210a2 commit 5e9ee41

6 files changed

+419
-291
lines changed

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,13 @@ We have to alter it a bit:
3838
````
3939
That's it. It will work. But it **will not** work if you nest input inside label or put label before input.
4040

41+
If you want to enable **Opera 12** and earlier support just add class `styled` to `input` element:
42+
````
43+
...
44+
<input type="checkbox" id="checkbox1" style="styled">
45+
...
46+
````
47+
4148
Radios
4249
------------
4350

‎awesome-bootstrap-checkbox.css

+175-130
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,221 @@
11
.checkbox {
2-
padding-left: 20px; }
2+
padding-left: 20px;
3+
}
34
.checkbox label {
4-
display: inline-block;
5-
vertical-align: middle;
6-
position: relative;
7-
padding-left: 5px; }
5+
display: inline-block;
6+
vertical-align: middle;
7+
position: relative;
8+
padding-left: 5px;
9+
}
810
.checkbox label::before {
9-
content: "";
10-
display: inline-block;
11-
position: absolute;
12-
width: 17px;
13-
height: 17px;
14-
left: 0;
15-
margin-left: -20px;
16-
border: 1px solid #cccccc;
17-
border-radius: 3px;
18-
background-color: #fff;
19-
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
20-
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
21-
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
11+
content: "";
12+
display: inline-block;
13+
position: absolute;
14+
width: 17px;
15+
height: 17px;
16+
left: 0;
17+
margin-left: -20px;
18+
border: 1px solid #cccccc;
19+
border-radius: 3px;
20+
background-color: #fff;
21+
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
22+
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
23+
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
24+
}
2225
.checkbox label::after {
23-
display: inline-block;
24-
position: absolute;
25-
width: 16px;
26-
height: 16px;
27-
left: 0;
28-
top: 0;
29-
margin-left: -20px;
30-
padding-left: 3px;
31-
padding-top: 1px;
32-
font-size: 11px;
33-
color: #555555; }
26+
display: inline-block;
27+
position: absolute;
28+
width: 16px;
29+
height: 16px;
30+
left: 0;
31+
top: 0;
32+
margin-left: -20px;
33+
padding-left: 3px;
34+
padding-top: 1px;
35+
font-size: 11px;
36+
color: #555555;
37+
}
3438
.checkbox input[type="checkbox"] {
35-
opacity: 0;
36-
z-index: 1; }
39+
opacity: 0;
40+
z-index: 1;
41+
}
3742
.checkbox input[type="checkbox"]:focus + label::before {
38-
outline: thin dotted;
39-
outline: 5px auto -webkit-focus-ring-color;
40-
outline-offset: -2px; }
43+
outline: thin dotted;
44+
outline: 5px auto -webkit-focus-ring-color;
45+
outline-offset: -2px;
46+
}
4147
.checkbox input[type="checkbox"]:checked + label::after {
42-
font-family: 'FontAwesome';
43-
content: "\f00c"; }
48+
font-family: 'FontAwesome';
49+
content: "\f00c";
50+
}
4451
.checkbox input[type="checkbox"]:disabled + label {
45-
opacity: 0.65; }
52+
opacity: 0.65;
53+
}
4654
.checkbox input[type="checkbox"]:disabled + label::before {
47-
background-color: #eeeeee;
48-
cursor: not-allowed; }
55+
background-color: #eeeeee;
56+
cursor: not-allowed;
57+
}
4958
.checkbox.checkbox-circle label::before {
50-
border-radius: 50%; }
59+
border-radius: 50%;
60+
}
5161
.checkbox.checkbox-inline {
52-
margin-top: 0; }
53-
62+
margin-top: 0;
63+
}
5464
.checkbox-primary input[type="checkbox"]:checked + label::before {
55-
background-color: #428bca;
56-
border-color: #428bca; }
65+
background-color: #337ab7;
66+
border-color: #337ab7;
67+
}
5768
.checkbox-primary input[type="checkbox"]:checked + label::after {
58-
color: #fff; }
59-
69+
color: #fff;
70+
}
6071
.checkbox-danger input[type="checkbox"]:checked + label::before {
61-
background-color: #d9534f;
62-
border-color: #d9534f; }
72+
background-color: #d9534f;
73+
border-color: #d9534f;
74+
}
6375
.checkbox-danger input[type="checkbox"]:checked + label::after {
64-
color: #fff; }
65-
76+
color: #fff;
77+
}
6678
.checkbox-info input[type="checkbox"]:checked + label::before {
67-
background-color: #5bc0de;
68-
border-color: #5bc0de; }
79+
background-color: #5bc0de;
80+
border-color: #5bc0de;
81+
}
6982
.checkbox-info input[type="checkbox"]:checked + label::after {
70-
color: #fff; }
71-
83+
color: #fff;
84+
}
7285
.checkbox-warning input[type="checkbox"]:checked + label::before {
73-
background-color: #f0ad4e;
74-
border-color: #f0ad4e; }
86+
background-color: #f0ad4e;
87+
border-color: #f0ad4e;
88+
}
7589
.checkbox-warning input[type="checkbox"]:checked + label::after {
76-
color: #fff; }
77-
90+
color: #fff;
91+
}
7892
.checkbox-success input[type="checkbox"]:checked + label::before {
79-
background-color: #5cb85c;
80-
border-color: #5cb85c; }
93+
background-color: #5cb85c;
94+
border-color: #5cb85c;
95+
}
8196
.checkbox-success input[type="checkbox"]:checked + label::after {
82-
color: #fff; }
83-
97+
color: #fff;
98+
}
8499
.radio {
85-
padding-left: 20px; }
100+
padding-left: 20px;
101+
}
86102
.radio label {
87-
display: inline-block;
88-
vertical-align: middle;
89-
position: relative;
90-
padding-left: 5px; }
103+
display: inline-block;
104+
vertical-align: middle;
105+
position: relative;
106+
padding-left: 5px;
107+
}
91108
.radio label::before {
92-
content: "";
93-
display: inline-block;
94-
position: absolute;
95-
width: 17px;
96-
height: 17px;
97-
left: 0;
98-
margin-left: -20px;
99-
border: 1px solid #cccccc;
100-
border-radius: 50%;
101-
background-color: #fff;
102-
-webkit-transition: border 0.15s ease-in-out;
103-
-o-transition: border 0.15s ease-in-out;
104-
transition: border 0.15s ease-in-out; }
109+
content: "";
110+
display: inline-block;
111+
position: absolute;
112+
width: 17px;
113+
height: 17px;
114+
left: 0;
115+
margin-left: -20px;
116+
border: 1px solid #cccccc;
117+
border-radius: 50%;
118+
background-color: #fff;
119+
-webkit-transition: border 0.15s ease-in-out;
120+
-o-transition: border 0.15s ease-in-out;
121+
transition: border 0.15s ease-in-out;
122+
}
105123
.radio label::after {
106-
display: inline-block;
107-
position: absolute;
108-
content: " ";
109-
width: 11px;
110-
height: 11px;
111-
left: 3px;
112-
top: 3px;
113-
margin-left: -20px;
114-
border-radius: 50%;
115-
background-color: #555555;
116-
-webkit-transform: scale(0, 0);
117-
-ms-transform: scale(0, 0);
118-
-o-transform: scale(0, 0);
119-
transform: scale(0, 0);
120-
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
121-
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
122-
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
123-
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
124+
display: inline-block;
125+
position: absolute;
126+
content: " ";
127+
width: 11px;
128+
height: 11px;
129+
left: 3px;
130+
top: 3px;
131+
margin-left: -20px;
132+
border-radius: 50%;
133+
background-color: #555555;
134+
-webkit-transform: scale(0, 0);
135+
-ms-transform: scale(0, 0);
136+
-o-transform: scale(0, 0);
137+
transform: scale(0, 0);
138+
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
139+
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
140+
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
141+
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
142+
}
124143
.radio input[type="radio"] {
125-
opacity: 0;
126-
z-index: 1; }
144+
opacity: 0;
145+
z-index: 1;
146+
}
127147
.radio input[type="radio"]:focus + label::before {
128-
outline: thin dotted;
129-
outline: 5px auto -webkit-focus-ring-color;
130-
outline-offset: -2px; }
148+
outline: thin dotted;
149+
outline: 5px auto -webkit-focus-ring-color;
150+
outline-offset: -2px;
151+
}
131152
.radio input[type="radio"]:checked + label::after {
132-
-webkit-transform: scale(1, 1);
133-
-ms-transform: scale(1, 1);
134-
-o-transform: scale(1, 1);
135-
transform: scale(1, 1); }
153+
-webkit-transform: scale(1, 1);
154+
-ms-transform: scale(1, 1);
155+
-o-transform: scale(1, 1);
156+
transform: scale(1, 1);
157+
}
136158
.radio input[type="radio"]:disabled + label {
137-
opacity: 0.65; }
159+
opacity: 0.65;
160+
}
138161
.radio input[type="radio"]:disabled + label::before {
139-
cursor: not-allowed; }
162+
cursor: not-allowed;
163+
}
140164
.radio.radio-inline {
141-
margin-top: 0; }
142-
165+
margin-top: 0;
166+
}
143167
.radio-primary input[type="radio"] + label::after {
144-
background-color: #428bca; }
168+
background-color: #337ab7;
169+
}
145170
.radio-primary input[type="radio"]:checked + label::before {
146-
border-color: #428bca; }
171+
border-color: #337ab7;
172+
}
147173
.radio-primary input[type="radio"]:checked + label::after {
148-
background-color: #428bca; }
149-
174+
background-color: #337ab7;
175+
}
150176
.radio-danger input[type="radio"] + label::after {
151-
background-color: #d9534f; }
177+
background-color: #d9534f;
178+
}
152179
.radio-danger input[type="radio"]:checked + label::before {
153-
border-color: #d9534f; }
180+
border-color: #d9534f;
181+
}
154182
.radio-danger input[type="radio"]:checked + label::after {
155-
background-color: #d9534f; }
156-
183+
background-color: #d9534f;
184+
}
157185
.radio-info input[type="radio"] + label::after {
158-
background-color: #5bc0de; }
186+
background-color: #5bc0de;
187+
}
159188
.radio-info input[type="radio"]:checked + label::before {
160-
border-color: #5bc0de; }
189+
border-color: #5bc0de;
190+
}
161191
.radio-info input[type="radio"]:checked + label::after {
162-
background-color: #5bc0de; }
163-
192+
background-color: #5bc0de;
193+
}
164194
.radio-warning input[type="radio"] + label::after {
165-
background-color: #f0ad4e; }
195+
background-color: #f0ad4e;
196+
}
166197
.radio-warning input[type="radio"]:checked + label::before {
167-
border-color: #f0ad4e; }
198+
border-color: #f0ad4e;
199+
}
168200
.radio-warning input[type="radio"]:checked + label::after {
169-
background-color: #f0ad4e; }
170-
201+
background-color: #f0ad4e;
202+
}
171203
.radio-success input[type="radio"] + label::after {
172-
background-color: #5cb85c; }
204+
background-color: #5cb85c;
205+
}
173206
.radio-success input[type="radio"]:checked + label::before {
174-
border-color: #5cb85c; }
207+
border-color: #5cb85c;
208+
}
175209
.radio-success input[type="radio"]:checked + label::after {
176-
background-color: #5cb85c; }
210+
background-color: #5cb85c;
211+
}
212+
input[type="checkbox"].styled:checked + label:after {
213+
font-family: 'FontAwesome';
214+
content: "\f00c";
215+
}
216+
input[type="checkbox"] .styled:checked + label::before {
217+
color: #fff;
218+
}
219+
input[type="checkbox"] .styled:checked + label::after {
220+
color: #fff;
221+
}

‎awesome-bootstrap-checkbox.less

+15
Original file line numberDiff line numberDiff line change
@@ -189,3 +189,18 @@
189189
.radio-variant(radio-info, @brand-info);
190190
.radio-variant(radio-warning, @brand-warning);
191191
.radio-variant(radio-success, @brand-success);
192+
193+
input[type="checkbox"] {
194+
&.styled:checked + label:after {
195+
font-family: 'FontAwesome';
196+
content: "\f00c";
197+
}
198+
& .styled:checked + label {
199+
&::before {
200+
color: #fff;
201+
}
202+
&::after {
203+
color: #fff;
204+
}
205+
}
206+
}

0 commit comments

Comments
 (0)