Skip to content

Commit dfac8f7

Browse files
cjrothcjroth
committed
allow radios to be displayed as checkboxes (flatlogic#10)
1 parent 60e6159 commit dfac8f7

6 files changed

+273
-226
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.sass-cache

‎awesome-bootstrap-checkbox.css

+49-19
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,28 @@
3535
font-size: 11px;
3636
color: #555555;
3737
}
38-
.checkbox input[type="checkbox"] {
38+
.checkbox input[type="checkbox"],
39+
.checkbox input[type="radio"] {
3940
opacity: 0;
4041
z-index: 1;
4142
}
42-
.checkbox input[type="checkbox"]:focus + label::before {
43+
.checkbox input[type="checkbox"]:focus + label::before,
44+
.checkbox input[type="radio"]:focus + label::before {
4345
outline: thin dotted;
4446
outline: 5px auto -webkit-focus-ring-color;
4547
outline-offset: -2px;
4648
}
47-
.checkbox input[type="checkbox"]:checked + label::after {
48-
font-family: 'FontAwesome';
49+
.checkbox input[type="checkbox"]:checked + label::after,
50+
.checkbox input[type="radio"]:checked + label::after {
51+
font-family: "FontAwesome";
4952
content: "\f00c";
5053
}
51-
.checkbox input[type="checkbox"]:disabled + label {
54+
.checkbox input[type="checkbox"]:disabled + label,
55+
.checkbox input[type="radio"]:disabled + label {
5256
opacity: 0.65;
5357
}
54-
.checkbox input[type="checkbox"]:disabled + label::before {
58+
.checkbox input[type="checkbox"]:disabled + label::before,
59+
.checkbox input[type="radio"]:disabled + label::before {
5560
background-color: #eeeeee;
5661
cursor: not-allowed;
5762
}
@@ -61,41 +66,57 @@
6166
.checkbox.checkbox-inline {
6267
margin-top: 0;
6368
}
64-
.checkbox-primary input[type="checkbox"]:checked + label::before {
69+
70+
.checkbox-primary input[type="checkbox"]:checked + label::before,
71+
.checkbox-primary input[type="radio"]:checked + label::before {
6572
background-color: #337ab7;
6673
border-color: #337ab7;
6774
}
68-
.checkbox-primary input[type="checkbox"]:checked + label::after {
75+
.checkbox-primary input[type="checkbox"]:checked + label::after,
76+
.checkbox-primary input[type="radio"]:checked + label::after {
6977
color: #fff;
7078
}
71-
.checkbox-danger input[type="checkbox"]:checked + label::before {
79+
80+
.checkbox-danger input[type="checkbox"]:checked + label::before,
81+
.checkbox-danger input[type="radio"]:checked + label::before {
7282
background-color: #d9534f;
7383
border-color: #d9534f;
7484
}
75-
.checkbox-danger input[type="checkbox"]:checked + label::after {
85+
.checkbox-danger input[type="checkbox"]:checked + label::after,
86+
.checkbox-danger input[type="radio"]:checked + label::after {
7687
color: #fff;
7788
}
78-
.checkbox-info input[type="checkbox"]:checked + label::before {
89+
90+
.checkbox-info input[type="checkbox"]:checked + label::before,
91+
.checkbox-info input[type="radio"]:checked + label::before {
7992
background-color: #5bc0de;
8093
border-color: #5bc0de;
8194
}
82-
.checkbox-info input[type="checkbox"]:checked + label::after {
95+
.checkbox-info input[type="checkbox"]:checked + label::after,
96+
.checkbox-info input[type="radio"]:checked + label::after {
8397
color: #fff;
8498
}
85-
.checkbox-warning input[type="checkbox"]:checked + label::before {
99+
100+
.checkbox-warning input[type="checkbox"]:checked + label::before,
101+
.checkbox-warning input[type="radio"]:checked + label::before {
86102
background-color: #f0ad4e;
87103
border-color: #f0ad4e;
88104
}
89-
.checkbox-warning input[type="checkbox"]:checked + label::after {
105+
.checkbox-warning input[type="checkbox"]:checked + label::after,
106+
.checkbox-warning input[type="radio"]:checked + label::after {
90107
color: #fff;
91108
}
92-
.checkbox-success input[type="checkbox"]:checked + label::before {
109+
110+
.checkbox-success input[type="checkbox"]:checked + label::before,
111+
.checkbox-success input[type="radio"]:checked + label::before {
93112
background-color: #5cb85c;
94113
border-color: #5cb85c;
95114
}
96-
.checkbox-success input[type="checkbox"]:checked + label::after {
115+
.checkbox-success input[type="checkbox"]:checked + label::after,
116+
.checkbox-success input[type="radio"]:checked + label::after {
97117
color: #fff;
98118
}
119+
99120
.radio {
100121
padding-left: 20px;
101122
}
@@ -164,6 +185,7 @@
164185
.radio.radio-inline {
165186
margin-top: 0;
166187
}
188+
167189
.radio-primary input[type="radio"] + label::after {
168190
background-color: #337ab7;
169191
}
@@ -173,6 +195,7 @@
173195
.radio-primary input[type="radio"]:checked + label::after {
174196
background-color: #337ab7;
175197
}
198+
176199
.radio-danger input[type="radio"] + label::after {
177200
background-color: #d9534f;
178201
}
@@ -182,6 +205,7 @@
182205
.radio-danger input[type="radio"]:checked + label::after {
183206
background-color: #d9534f;
184207
}
208+
185209
.radio-info input[type="radio"] + label::after {
186210
background-color: #5bc0de;
187211
}
@@ -191,6 +215,7 @@
191215
.radio-info input[type="radio"]:checked + label::after {
192216
background-color: #5bc0de;
193217
}
218+
194219
.radio-warning input[type="radio"] + label::after {
195220
background-color: #f0ad4e;
196221
}
@@ -200,6 +225,7 @@
200225
.radio-warning input[type="radio"]:checked + label::after {
201226
background-color: #f0ad4e;
202227
}
228+
203229
.radio-success input[type="radio"] + label::after {
204230
background-color: #5cb85c;
205231
}
@@ -209,13 +235,17 @@
209235
.radio-success input[type="radio"]:checked + label::after {
210236
background-color: #5cb85c;
211237
}
212-
input[type="checkbox"].styled:checked + label:after {
238+
239+
input[type="checkbox"].styled:checked + label:after,
240+
input[type="radio"].styled:checked + label:after {
213241
font-family: 'FontAwesome';
214242
content: "\f00c";
215243
}
216-
input[type="checkbox"] .styled:checked + label::before {
244+
input[type="checkbox"] .styled:checked + label::before,
245+
input[type="radio"] .styled:checked + label::before {
217246
color: #fff;
218247
}
219-
input[type="checkbox"] .styled:checked + label::after {
248+
input[type="checkbox"] .styled:checked + label::after,
249+
input[type="radio"] .styled:checked + label::after {
220250
color: #fff;
221251
}

‎awesome-bootstrap-checkbox.less

+7-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
@font-family-icon: 'FontAwesome';
66

77
.checkbox-variant(@parent, @color) {
8-
.@{parent} input[type="checkbox"]:checked + label {
8+
.@{parent} input[type="checkbox"]:checked + label,
9+
.@{parent} input[type="radio"]:checked + label {
910
&::before {
1011
background-color: @color;
1112
border-color: @color;
@@ -55,7 +56,8 @@
5556
}
5657
}
5758

58-
input[type="checkbox"]{
59+
input[type="checkbox"],
60+
input[type="radio"]{
5961
opacity: 0;
6062
z-index: 1;
6163

@@ -190,7 +192,8 @@
190192
.radio-variant(radio-warning, @brand-warning);
191193
.radio-variant(radio-success, @brand-success);
192194

193-
input[type="checkbox"] {
195+
input[type="checkbox"],
196+
input[type="radio"] {
194197
&.styled:checked + label:after {
195198
font-family: 'FontAwesome';
196199
content: "\f00c";
@@ -203,4 +206,4 @@ input[type="checkbox"] {
203206
color: #fff;
204207
}
205208
}
206-
}
209+
}

‎awesome-bootstrap-checkbox.scss

+8-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
// Checkboxes
33
// --------------------------------------------------
44

5+
56
$font-family-icon: 'FontAwesome' !default;
67

78
@mixin checkbox-variant($parent, $color) {
8-
#{$parent} input[type="checkbox"]:checked + label{
9+
#{$parent} input[type="checkbox"]:checked + label,
10+
#{$parent} input[type="radio"]:checked + label {
911
&::before {
1012
background-color: $color;
1113
border-color: $color;
@@ -55,7 +57,8 @@ $font-family-icon: 'FontAwesome' !default;
5557
}
5658
}
5759

58-
input[type="checkbox"]{
60+
input[type="checkbox"],
61+
input[type="radio"] {
5962
opacity: 0;
6063
z-index: 1;
6164

@@ -191,7 +194,8 @@ $font-family-icon: 'FontAwesome' !default;
191194
@include radio-variant('.radio-success', $brand-success);
192195

193196

194-
input[type="checkbox"] {
197+
input[type="checkbox"],
198+
input[type="radio"] {
195199
&.styled:checked + label:after {
196200
font-family: 'FontAwesome';
197201
content: "\f00c";
@@ -204,4 +208,4 @@ input[type="checkbox"] {
204208
color: #fff;
205209
}
206210
}
207-
}
211+
}

0 commit comments

Comments
 (0)