Skip to content

Commit f656b7b

Browse files
okendokenokendoken
committed
bootstrap 4 beta support, awesome-bootstrap-checkbox v1.0.0
1 parent 1f11609 commit f656b7b

File tree

323 files changed

+325
-62999
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

323 files changed

+325
-62999
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
.sass-cache
2+
node_modules

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2014-2016 flatlogic.com
3+
Copyright (c) 2014-2017 flatlogic.com
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Awesome Bootstrap Checkbox
66

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

9+
Now with **[Bootstrap 4 Beta][]** support!
10+
911
**[Demo][]**
1012

1113
Use
@@ -17,9 +19,10 @@ Next, everything is based on code convention. Here is checkbox markup from Boots
1719
````html
1820
<form role="form">
1921
...
20-
<div class="checkbox">
21-
<label>
22-
<input type="checkbox"> Check me out
22+
<div class="form-check">
23+
<label class="form-check-label">
24+
<input class="form-check-input" type="checkbox">
25+
Check me out
2326
</label>
2427
</div>
2528
...
@@ -30,10 +33,10 @@ We have to alter it a bit:
3033
````html
3134
<form role="form">
3235
...
33-
<div class="checkbox abc-checkbox">
34-
<input type="checkbox" id="checkbox1">
35-
<label for="checkbox1">
36-
Check me out
36+
<div class="form-check abc-checkbox">
37+
<input class="form-check-input" id="checkbox1" type="checkbox">
38+
<label class="form-check-label" for="checkbox1">
39+
Check me out
3740
</label>
3841
</div>
3942
...
@@ -56,17 +59,17 @@ It's the same for radios. Markup has to be the following:
5659
````html
5760
<form role="form">
5861
...
59-
<div class="radio abc-radio">
60-
<input type="radio" name="radio2" id="radio3" value="option1">
61-
<label for="radio3">
62-
One
63-
</label>
62+
<div class="form-check abc-radio">
63+
<input class="form-check-input" type="radio" name="radio1" id="radio1" value="option1" checked>
64+
<label class="form-check-label" for="radio1">
65+
One
66+
</label>
6467
</div>
65-
<div class="radio abc-radio">
66-
<input type="radio" name="radio2" id="radio4" value="option2" checked>
67-
<label for="radio4">
68-
Two
69-
</label>
68+
<div class="form-check abc-radio">
69+
<input class="form-check-input" type="radio" name="radio1" id="radio2" value="option2">
70+
<label class="form-check-label" for="radio2">
71+
Two
72+
</label>
7073
</div>
7174
...
7275
</form>
@@ -79,27 +82,26 @@ You may use `abc-checkbox-primary`, `abc-checkbox-danger`, `abc-radio-info`, etc
7982

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

82-
`abc-checkbox-single` and `abc-radio-single` for inputs without label text.
83-
8485
Inputs without label text:
8586

8687
````html
87-
<div class="checkbox abc-checkbox">
88-
<input type="checkbox" class="styled" id="singleCheckbox" value="option1" aria-label="Single checkbox One">
89-
<label for="singleCheckbox"></label>
88+
<div class="form-check abc-checkbox">
89+
<input class="form-check-input" type="checkbox" id="singleCheckbox" value="option1" aria-label="Single checkbox One">
90+
<label class="form-check-label" for="singleCheckbox"></label>
9091
</div>
9192
````
9293

9394
Using [Sass][]
9495
----------
9596

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

9899
````scss
99-
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
100-
@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
100+
@import "../node_modules/bootstrap/scss/functions";
101+
@import "../node_modules/bootstrap/scss/variables";
102+
@import "../node_modules/bootstrap/scss/mixins";
101103

102-
@import "../bower_components/Font-Awesome/scss/variables";
104+
@import "../node_modules/Font-Awesome/scss/variables";
103105

104106
@import "../awesome-bootstrap-checkbox";
105107
````
@@ -121,17 +123,13 @@ $check-icon: "\e013";
121123
}
122124
````
123125

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

133-
input[type="checkbox"].styled:checked label:after,
134-
input[type="radio"].styled:checked label:after,
135133
.abc-checkbox label:after {
136134
padding-left: 4px;
137135
padding-top: 2px;
@@ -142,12 +140,12 @@ input[type="radio"].styled:checked label:after,
142140
Credits
143141
------------
144142

145-
Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
143+
Based on the [Bootstrap][] and the awesome [Font Awesome][].
146144

147145

148146
[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/1.0.0-alpha.1/
149-
[Bootstrap]: https://v4-alpha.getbootstrap.com/
150-
[Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
147+
[Bootstrap]: http://getbootstrap.com/
148+
[Bootstrap 4 Beta]: http://getbootstrap.com/
151149
[Font Awesome]: https://github.com/FortAwesome/Font-Awesome
152150
[Glyphicons]: http://getbootstrap.com/components/#glyphicons
153151
[Sass]: http://sass-lang.com/

‎awesome-bootstrap-checkbox.css

Lines changed: 48 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
height: 17px;
1818
top: 2px;
1919
left: 0;
20-
margin-left: -20px;
20+
margin-left: -1.25rem;
2121
border: 1px solid rgba(0, 0, 0, 0.15);
2222
border-radius: 3px;
2323
background-color: #fff;
@@ -30,13 +30,15 @@
3030
height: 16px;
3131
left: 0;
3232
top: 2px;
33-
margin-left: -20px;
33+
margin-left: -1.25rem;
3434
padding-left: 3px;
3535
padding-top: 1px;
3636
font-size: 11px;
37-
color: #464a4c; }
37+
color: #495057; }
3838
.abc-checkbox input[type="checkbox"],
3939
.abc-checkbox input[type="radio"] {
40+
position: static;
41+
margin-left: 0;
4042
cursor: pointer;
4143
opacity: 0;
4244
z-index: 1; }
@@ -64,7 +66,7 @@
6466
opacity: 0.65; }
6567
.abc-checkbox input[type="checkbox"]:disabled + label::before,
6668
.abc-checkbox input[type="radio"]:disabled + label::before {
67-
background-color: #eceeef;
69+
background-color: #e9ecef;
6870
cursor: not-allowed; }
6971
.abc-checkbox input[type="checkbox"]:disabled + label::after,
7072
.abc-checkbox input[type="radio"]:disabled + label::after {
@@ -76,90 +78,80 @@
7678

7779
.abc-checkbox-primary input[type="checkbox"]:checked + label::before,
7880
.abc-checkbox-primary input[type="radio"]:checked + label::before {
79-
background-color: #0275d8;
80-
border-color: #0275d8; }
81-
81+
background-color: #007bff;
82+
border-color: #007bff; }
8283
.abc-checkbox-primary input[type="checkbox"]:checked + label::after,
8384
.abc-checkbox-primary input[type="radio"]:checked + label::after {
8485
color: #fff; }
8586

8687
.abc-checkbox-danger input[type="checkbox"]:checked + label::before,
8788
.abc-checkbox-danger input[type="radio"]:checked + label::before {
88-
background-color: #d9534f;
89-
border-color: #d9534f; }
90-
89+
background-color: #dc3545;
90+
border-color: #dc3545; }
9191
.abc-checkbox-danger input[type="checkbox"]:checked + label::after,
9292
.abc-checkbox-danger input[type="radio"]:checked + label::after {
9393
color: #fff; }
9494

9595
.abc-checkbox-info input[type="checkbox"]:checked + label::before,
9696
.abc-checkbox-info input[type="radio"]:checked + label::before {
97-
background-color: #5bc0de;
98-
border-color: #5bc0de; }
99-
97+
background-color: #17a2b8;
98+
border-color: #17a2b8; }
10099
.abc-checkbox-info input[type="checkbox"]:checked + label::after,
101100
.abc-checkbox-info input[type="radio"]:checked + label::after {
102101
color: #fff; }
103102

104103
.abc-checkbox-warning input[type="checkbox"]:checked + label::before,
105104
.abc-checkbox-warning input[type="radio"]:checked + label::before {
106-
background-color: #f0ad4e;
107-
border-color: #f0ad4e; }
108-
105+
background-color: #ffc107;
106+
border-color: #ffc107; }
109107
.abc-checkbox-warning input[type="checkbox"]:checked + label::after,
110108
.abc-checkbox-warning input[type="radio"]:checked + label::after {
111109
color: #fff; }
112110

113111
.abc-checkbox-success input[type="checkbox"]:checked + label::before,
114112
.abc-checkbox-success input[type="radio"]:checked + label::before {
115-
background-color: #5cb85c;
116-
border-color: #5cb85c; }
117-
113+
background-color: #28a745;
114+
border-color: #28a745; }
118115
.abc-checkbox-success input[type="checkbox"]:checked + label::after,
119116
.abc-checkbox-success input[type="radio"]:checked + label::after {
120117
color: #fff; }
121118

122119
.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::before,
123120
.abc-checkbox-primary input[type="radio"]:indeterminate + label::before {
124-
background-color: #0275d8;
125-
border-color: #0275d8; }
126-
121+
background-color: #007bff;
122+
border-color: #007bff; }
127123
.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::after,
128124
.abc-checkbox-primary input[type="radio"]:indeterminate + label::after {
129125
background-color: #fff; }
130126

131127
.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::before,
132128
.abc-checkbox-danger input[type="radio"]:indeterminate + label::before {
133-
background-color: #d9534f;
134-
border-color: #d9534f; }
135-
129+
background-color: #dc3545;
130+
border-color: #dc3545; }
136131
.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::after,
137132
.abc-checkbox-danger input[type="radio"]:indeterminate + label::after {
138133
background-color: #fff; }
139134

140135
.abc-checkbox-info input[type="checkbox"]:indeterminate + label::before,
141136
.abc-checkbox-info input[type="radio"]:indeterminate + label::before {
142-
background-color: #5bc0de;
143-
border-color: #5bc0de; }
144-
137+
background-color: #17a2b8;
138+
border-color: #17a2b8; }
145139
.abc-checkbox-info input[type="checkbox"]:indeterminate + label::after,
146140
.abc-checkbox-info input[type="radio"]:indeterminate + label::after {
147141
background-color: #fff; }
148142

149143
.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::before,
150144
.abc-checkbox-warning input[type="radio"]:indeterminate + label::before {
151-
background-color: #f0ad4e;
152-
border-color: #f0ad4e; }
153-
145+
background-color: #ffc107;
146+
border-color: #ffc107; }
154147
.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::after,
155148
.abc-checkbox-warning input[type="radio"]:indeterminate + label::after {
156149
background-color: #fff; }
157150

158151
.abc-checkbox-success input[type="checkbox"]:indeterminate + label::before,
159152
.abc-checkbox-success input[type="radio"]:indeterminate + label::before {
160-
background-color: #5cb85c;
161-
border-color: #5cb85c; }
162-
153+
background-color: #28a745;
154+
border-color: #28a745; }
163155
.abc-checkbox-success input[type="checkbox"]:indeterminate + label::after,
164156
.abc-checkbox-success input[type="radio"]:indeterminate + label::after {
165157
background-color: #fff; }
@@ -198,10 +190,12 @@
198190
top: 5px;
199191
margin-left: -20px;
200192
border-radius: 50%;
201-
background-color: #464a4c;
193+
background-color: #495057;
202194
transform: scale(0, 0);
203195
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
204196
.abc-radio input[type="radio"] {
197+
position: static;
198+
margin-left: 0;
205199
cursor: pointer;
206200
opacity: 0;
207201
z-index: 1; }
@@ -221,62 +215,41 @@
221215
margin-top: 0; }
222216

223217
.abc-radio-primary input[type="radio"] + label::after {
224-
background-color: #0275d8; }
225-
218+
background-color: #007bff; }
226219
.abc-radio-primary input[type="radio"]:checked + label::before {
227-
border-color: #0275d8; }
228-
220+
border-color: #007bff; }
229221
.abc-radio-primary input[type="radio"]:checked + label::after {
230-
background-color: #0275d8; }
222+
background-color: #007bff; }
231223

232224
.abc-radio-danger input[type="radio"] + label::after {
233-
background-color: #d9534f; }
234-
225+
background-color: #dc3545; }
235226
.abc-radio-danger input[type="radio"]:checked + label::before {
236-
border-color: #d9534f; }
237-
227+
border-color: #dc3545; }
238228
.abc-radio-danger input[type="radio"]:checked + label::after {
239-
background-color: #d9534f; }
229+
background-color: #dc3545; }
240230

241231
.abc-radio-info input[type="radio"] + label::after {
242-
background-color: #5bc0de; }
243-
232+
background-color: #17a2b8; }
244233
.abc-radio-info input[type="radio"]:checked + label::before {
245-
border-color: #5bc0de; }
246-
234+
border-color: #17a2b8; }
247235
.abc-radio-info input[type="radio"]:checked + label::after {
248-
background-color: #5bc0de; }
236+
background-color: #17a2b8; }
249237

250238
.abc-radio-warning input[type="radio"] + label::after {
251-
background-color: #f0ad4e; }
252-
239+
background-color: #ffc107; }
253240
.abc-radio-warning input[type="radio"]:checked + label::before {
254-
border-color: #f0ad4e; }
255-
241+
border-color: #ffc107; }
256242
.abc-radio-warning input[type="radio"]:checked + label::after {
257-
background-color: #f0ad4e; }
243+
background-color: #ffc107; }
258244

259245
.abc-radio-success input[type="radio"] + label::after {
260-
background-color: #5cb85c; }
261-
246+
background-color: #28a745; }
262247
.abc-radio-success input[type="radio"]:checked + label::before {
263-
border-color: #5cb85c; }
264-
248+
border-color: #28a745; }
265249
.abc-radio-success input[type="radio"]:checked + label::after {
266-
background-color: #5cb85c; }
267-
268-
input[type="checkbox"].styled:checked + label:after,
269-
input[type="radio"].styled:checked + label:after {
270-
font-family: "FontAwesome";
271-
content: ""; }
272-
273-
input[type="checkbox"] .styled:checked + label::before,
274-
input[type="radio"] .styled:checked + label::before {
275-
color: #fff; }
276-
277-
input[type="checkbox"] .styled:checked + label::after,
278-
input[type="radio"] .styled:checked + label::after {
279-
color: #fff; }
250+
background-color: #28a745; }
280251

281-
.has-danger .abc-checkbox label:before, .has-danger .abc-radio label:before {
282-
border-color: #d9534f; }
252+
label .was-validated .form-check-input:invalid .abc-checkbox:before, label
253+
.was-validated .form-check-input:invalid .abc-radio:before, label .form-check-input.is-invalid .abc-checkbox:before, label
254+
.form-check-input.is-invalid .abc-radio:before {
255+
border-color: #dc3545; }

0 commit comments

Comments
 (0)