Skip to content

Commit

Permalink
bootstrap 4 beta support, awesome-bootstrap-checkbox v1.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@okendoken
okendoken committed Sep 20, 2017
1 parent 1f11609 commit f656b7b
Show file tree
Hide file tree
Showing 323 changed files with 325 additions and 62,999 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.sass-cache
node_modules
2 changes: 1 addition & 1 deletion LICENSE
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2014-2016 flatlogic.com
Copyright (c) 2014-2017 flatlogic.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
66 changes: 32 additions & 34 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ Awesome Bootstrap Checkbox

[Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**

Now with **[Bootstrap 4 Beta][]** support!

**[Demo][]**

Use
Expand All @@ -17,9 +19,10 @@ Next, everything is based on code convention. Here is checkbox markup from Boots
````html
<form role="form">
...
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
Check me out
</label>
</div>
...
Expand All @@ -30,10 +33,10 @@ We have to alter it a bit:
````html
<form role="form">
...
<div class="checkbox abc-checkbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">
Check me out
<div class="form-check abc-checkbox">
<input class="form-check-input" id="checkbox1" type="checkbox">
<label class="form-check-label" for="checkbox1">
Check me out
</label>
</div>
...
Expand All @@ -56,17 +59,17 @@ It's the same for radios. Markup has to be the following:
````html
<form role="form">
...
<div class="radio abc-radio">
<input type="radio" name="radio2" id="radio3" value="option1">
<label for="radio3">
One
</label>
<div class="form-check abc-radio">
<input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked>
<label class="form-check-label" for="radio1">
One
</label>
</div>
<div class="radio abc-radio">
<input type="radio" name="radio2" id="radio4" value="option2" checked>
<label for="radio4">
Two
</label>
<div class="form-check abc-radio">
<input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2">
<label class="form-check-label" for="radio2">
Two
</label>
</div>
...
</form>
Expand All @@ -79,27 +82,26 @@ You may use `abc-checkbox-primary`, `abc-checkbox-danger`, `abc-radio-info`, etc

`abc-checkbox-circle` is for rounded checkboxes.

`abc-checkbox-single` and `abc-radio-single` for inputs without label text.

Inputs without label text:

````html
<div class="checkbox abc-checkbox">
<input type="checkbox" class="styled" id="singleCheckbox" value="option1" aria-label="Single checkbox One">
<label for="singleCheckbox"></label>
<div class="form-check abc-checkbox">
<input class="form-check-input" type="checkbox" id="singleCheckbox" value="option1" aria-label="Single checkbox One">
<label class="form-check-label" for="singleCheckbox"></label>
</div>
````

Using [Sass][]
----------

As per example in the `demo` folder, to use Font Awesome you'll have to `@import` the following library parts:
As per example in the `demo` folder, to use Awesome Bootstrap Checkbox you'll have to `@import` the following library parts:

````scss
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

@import "../bower_components/Font-Awesome/scss/variables";
@import "../node_modules/Font-Awesome/scss/variables";

@import "../awesome-bootstrap-checkbox";
````
Expand All @@ -121,17 +123,13 @@ $check-icon: "\e013";
}
````

Or for plain CSS, override the `.abc-checkbox` class (and `.styled` class for Opera):
Or for plain CSS, override the `.abc-checkbox` class:
````css
input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after,
.abc-checkbox input[type=checkbox]:checked + label:after {
font-family: 'Glyphicons Halflings';
content: "\e013";
}

input[type="checkbox"].styled:checked label:after,
input[type="radio"].styled:checked label:after,
.abc-checkbox label:after {
padding-left: 4px;
padding-top: 2px;
Expand All @@ -142,12 +140,12 @@ input[type="radio"].styled:checked label:after,
Credits
------------

Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
Based on the [Bootstrap][] and the awesome [Font Awesome][].


[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/1.0.0-alpha.1/
[Bootstrap]: https://v4-alpha.getbootstrap.com/
[Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
[Bootstrap]: http://getbootstrap.com/
[Bootstrap 4 Beta]: http://getbootstrap.com/
[Font Awesome]: https://github.com/FortAwesome/Font-Awesome
[Glyphicons]: http://getbootstrap.com/components/#glyphicons
[Sass]: http://sass-lang.com/
Expand Down
123 changes: 48 additions & 75 deletions awesome-bootstrap-checkbox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
height: 17px;
top: 2px;
left: 0;
margin-left: -20px;
margin-left: -1.25rem;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
background-color: #fff;
Expand All @@ -30,13 +30,15 @@
height: 16px;
left: 0;
top: 2px;
margin-left: -20px;
margin-left: -1.25rem;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #464a4c; }
color: #495057; }
.abc-checkbox input[type="checkbox"],
.abc-checkbox input[type="radio"] {
position: static;
margin-left: 0;
cursor: pointer;
opacity: 0;
z-index: 1; }
Expand Down Expand Up @@ -64,7 +66,7 @@
opacity: 0.65; }
.abc-checkbox input[type="checkbox"]:disabled + label::before,
.abc-checkbox input[type="radio"]:disabled + label::before {
background-color: #eceeef;
background-color: #e9ecef;
cursor: not-allowed; }
.abc-checkbox input[type="checkbox"]:disabled + label::after,
.abc-checkbox input[type="radio"]:disabled + label::after {
Expand All @@ -76,90 +78,80 @@

.abc-checkbox-primary input[type="checkbox"]:checked + label::before,
.abc-checkbox-primary input[type="radio"]:checked + label::before {
background-color: #0275d8;
border-color: #0275d8; }

background-color: #007bff;
border-color: #007bff; }
.abc-checkbox-primary input[type="checkbox"]:checked + label::after,
.abc-checkbox-primary input[type="radio"]:checked + label::after {
color: #fff; }

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

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

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

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

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

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

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

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

.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.abc-checkbox-primary input[type="radio"]:indeterminate + label::before {
background-color: #0275d8;
border-color: #0275d8; }

background-color: #007bff;
border-color: #007bff; }
.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-primary input[type="radio"]:indeterminate + label::after {
background-color: #fff; }

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

background-color: #dc3545;
border-color: #dc3545; }
.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-danger input[type="radio"]:indeterminate + label::after {
background-color: #fff; }

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

background-color: #17a2b8;
border-color: #17a2b8; }
.abc-checkbox-info input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-info input[type="radio"]:indeterminate + label::after {
background-color: #fff; }

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

background-color: #ffc107;
border-color: #ffc107; }
.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-warning input[type="radio"]:indeterminate + label::after {
background-color: #fff; }

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

background-color: #28a745;
border-color: #28a745; }
.abc-checkbox-success input[type="checkbox"]:indeterminate + label::after,
.abc-checkbox-success input[type="radio"]:indeterminate + label::after {
background-color: #fff; }
Expand Down Expand Up @@ -198,10 +190,12 @@
top: 5px;
margin-left: -20px;
border-radius: 50%;
background-color: #464a4c;
background-color: #495057;
transform: scale(0, 0);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
.abc-radio input[type="radio"] {
position: static;
margin-left: 0;
cursor: pointer;
opacity: 0;
z-index: 1; }
Expand All @@ -221,62 +215,41 @@
margin-top: 0; }

.abc-radio-primary input[type="radio"] + label::after {
background-color: #0275d8; }

background-color: #007bff; }
.abc-radio-primary input[type="radio"]:checked + label::before {
border-color: #0275d8; }

border-color: #007bff; }
.abc-radio-primary input[type="radio"]:checked + label::after {
background-color: #0275d8; }
background-color: #007bff; }

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

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

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

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

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

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

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

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

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

.abc-radio-success input[type="radio"] + label::after {
background-color: #5cb85c; }

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

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

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
font-family: "FontAwesome";
content: ""; }

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; }
background-color: #28a745; }

.has-danger .abc-checkbox label:before, .has-danger .abc-radio label:before {
border-color: #d9534f; }
label .was-validated .form-check-input:invalid .abc-checkbox:before, label
.was-validated .form-check-input:invalid .abc-radio:before, label .form-check-input.is-invalid .abc-checkbox:before, label
.form-check-input.is-invalid .abc-radio:before {
border-color: #dc3545; }

0 comments on commit f656b7b

Please sign in to comment.