Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

allow radios to be displayed as checkboxes (#10) #40

Merged
merged 1 commit into from
May 28, 2015
+273 −226
Merged

allow radios to be displayed as checkboxes (#10) #40

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.sass-cache
68 changes: 49 additions & 19 deletions awesome-bootstrap-checkbox.css
View file
Original file line number Diff line number Diff line change
@@ -35,23 +35,28 @@
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"] {
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
}
.checkbox input[type="checkbox"]:focus + label::before {
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
font-family: "FontAwesome";
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label {
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before {
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
@@ -61,41 +66,57 @@
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before {

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after {
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before {

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after {
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before {

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after {
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before {

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after {
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
color: #fff;
}

.radio {
padding-left: 20px;
}
@@ -164,6 +185,7 @@
.radio.radio-inline {
margin-top: 0;
}

.radio-primary input[type="radio"] + label::after {
background-color: #337ab7;
}
@@ -173,6 +195,7 @@
.radio-primary input[type="radio"]:checked + label::after {
background-color: #337ab7;
}

.radio-danger input[type="radio"] + label::after {
background-color: #d9534f;
}
@@ -182,6 +205,7 @@
.radio-danger input[type="radio"]:checked + label::after {
background-color: #d9534f;
}

.radio-info input[type="radio"] + label::after {
background-color: #5bc0de;
}
@@ -191,6 +215,7 @@
.radio-info input[type="radio"]:checked + label::after {
background-color: #5bc0de;
}

.radio-warning input[type="radio"] + label::after {
background-color: #f0ad4e;
}
@@ -200,6 +225,7 @@
.radio-warning input[type="radio"]:checked + label::after {
background-color: #f0ad4e;
}

.radio-success input[type="radio"] + label::after {
background-color: #5cb85c;
}
@@ -209,13 +235,17 @@
.radio-success input[type="radio"]:checked + label::after {
background-color: #5cb85c;
}
input[type="checkbox"].styled:checked + label:after {

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
font-family: 'FontAwesome';
content: "\f00c";
}
input[type="checkbox"] .styled:checked + label::before {
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
color: #fff;
}
input[type="checkbox"] .styled:checked + label::after {
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
color: #fff;
}
11 changes: 7 additions & 4 deletions awesome-bootstrap-checkbox.less
View file
Original file line number Diff line number Diff line change
@@ -5,7 +5,8 @@
@font-family-icon: 'FontAwesome';

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

input[type="checkbox"]{
input[type="checkbox"],
input[type="radio"]{
opacity: 0;
z-index: 1;

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

input[type="checkbox"] {
input[type="checkbox"],
input[type="radio"] {
&.styled:checked + label:after {
font-family: 'FontAwesome';
content: "\f00c";
@@ -203,4 +206,4 @@ input[type="checkbox"] {
color: #fff;
}
}
}
}
12 changes: 8 additions & 4 deletions awesome-bootstrap-checkbox.scss
View file
Original file line number Diff line number Diff line change
@@ -2,10 +2,12 @@
// Checkboxes
// --------------------------------------------------


$font-family-icon: 'FontAwesome' !default;

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

input[type="checkbox"]{
input[type="checkbox"],
input[type="radio"] {
opacity: 0;
z-index: 1;

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


input[type="checkbox"] {
input[type="checkbox"],
input[type="radio"] {
&.styled:checked + label:after {
font-family: 'FontAwesome';
content: "\f00c";
@@ -204,4 +208,4 @@ input[type="checkbox"] {
color: #fff;
}
}
}
}
377 changes: 179 additions & 198 deletions demo/build.css
View file
Original file line number Diff line number Diff line change
@@ -1,221 +1,202 @@
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"] {
opacity: 0;
z-index: 1;
}
.checkbox input[type="checkbox"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
padding-left: 20px; }
.checkbox label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px; }
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555; }
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1; }
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
font-family: "FontAwesome";
content: "\f00c"; }
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed; }
.checkbox.checkbox-circle label::before {
border-radius: 50%; }
.checkbox.checkbox-inline {
margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before {
border-color: #337ab7; }
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before {
border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
color: #fff; }

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before {
border-color: #5bc0de; }
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before {
border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after {
color: #fff;
}
border-color: #5cb85c; }
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
color: #fff; }

.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
z-index: 1;
}
.radio input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked + label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled + label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled + label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
padding-left: 20px; }
.radio label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px; }
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out; }
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.radio input[type="radio"] {
opacity: 0;
z-index: 1; }
.radio input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.radio input[type="radio"]:checked + label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1); }
.radio input[type="radio"]:disabled + label {
opacity: 0.65; }
.radio input[type="radio"]:disabled + label::before {
cursor: not-allowed; }
.radio.radio-inline {
margin-top: 0; }

.radio-primary input[type="radio"] + label::after {
background-color: #337ab7;
}
background-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::before {
border-color: #337ab7;
}
border-color: #337ab7; }
.radio-primary input[type="radio"]:checked + label::after {
background-color: #337ab7;
}
background-color: #337ab7; }

.radio-danger input[type="radio"] + label::after {
background-color: #d9534f;
}
background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
border-color: #d9534f;
}
border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
background-color: #d9534f;
}
background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
background-color: #5bc0de;
}
background-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::before {
border-color: #5bc0de;
}
border-color: #5bc0de; }
.radio-info input[type="radio"]:checked + label::after {
background-color: #5bc0de;
}
background-color: #5bc0de; }

.radio-warning input[type="radio"] + label::after {
background-color: #f0ad4e;
}
background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
border-color: #f0ad4e;
}
border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
background-color: #f0ad4e;
}
background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
background-color: #5cb85c;
}
background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
border-color: #5cb85c;
}
border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
background-color: #5cb85c;
}
input[type="checkbox"].styled:checked + label:after {
background-color: #5cb85c; }

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
font-family: 'FontAwesome';
content: "\f00c";
}
input[type="checkbox"] .styled:checked + label::before {
color: #fff;
}
input[type="checkbox"] .styled:checked + label::after {
color: #fff;
}
content: "\f00c"; }
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
color: #fff; }
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
color: #fff; }
30 changes: 29 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -215,8 +215,36 @@ <h2>Radios</h2>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<legend>
As Checkboxes
</legend>
<p>
Radios can be made to look like checkboxes.
</p>
<div class="checkbox checkbox">
<input type="radio" name="radio4" id="radio7" value="option1" checked>
<label for="radio7">
Defeault
</label>
</div>
<div class="checkbox checkbox-success">
<input type="radio" name="radio4" id="radio8" value="option2">
<label for="radio8">
Success
</label>
</div>
<div class="checkbox checkbox-danger">
<input type="radio" name="radio4" id="radio9" value="option3">
<label for="radio9">
Danger
</label>
</div>
</fieldset>
</div>
</div>
</form>
</div>
</body>
</html>
</html>