Skip to content

Commit e310e6e

Browse files
okendokenokendoken
committed
rename lib, reorganize css, update readme license
1 parent e50e1f5 commit e310e6e

File tree

7 files changed

+155
-66
lines changed

7 files changed

+155
-66
lines changed

‎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
3+
Copyright (c) 2014 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: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,88 @@
1-
awesome-bootstrap-checkbox
1+
Awesome Bootstrap Checkbox
22
==========================
33

4-
Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.
4+
Font Awesome Bootstrap Checkboxes & Radios plugin. Pure css way to make inputs look prettier. **No javascript**!
5+
6+
**[Demo](#)**
7+
8+
Use
9+
------------
10+
11+
First just include **awesome-bootstrap-checkbox.css** somewhere in your html. Or **awesome-bootstrap-checkbox.scss** if you use sass.
12+
Next everything is based on code convention. Here is checkbox markup from Bootstrap site:
13+
14+
<form role="form">
15+
...
16+
<div class="checkbox">
17+
<label>
18+
<input type="checkbox"> Check me out
19+
</label>
20+
</div>
21+
...
22+
</form>
23+
24+
We have to alter it a bit:
25+
26+
<form role="form">
27+
...
28+
<div class="checkbox">
29+
<input type="checkbox" id="checkbox1">
30+
<label for="checkbox1">
31+
Check me out
32+
</label>
33+
</div>
34+
...
35+
</form>
36+
37+
That's it. It will work. But it **will not** work if you nest input inside label or put label before input.
38+
39+
Radios
40+
------------
41+
42+
It's the same for radios. Markup has to be the following:
43+
44+
<form role="form">
45+
...
46+
<div class="radio">
47+
<input type="radio" name="radio2" id="radio3" value="option1">
48+
<label for="radio3">
49+
One
50+
</label>
51+
</div>
52+
<div class="radio">
53+
<input type="radio" name="radio2" id="radio4" value="option2" checked>
54+
<label for="radio4">
55+
Two
56+
</label>
57+
</div>
58+
...
59+
</form>
60+
61+
Brand Colors
62+
------------
63+
64+
You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors.
65+
66+
`checkbox-circle` is for rounded checkboxes.
67+
68+
Glyphicons way (Opt-out Font Awesome)
69+
------------
70+
71+
If you want to use glyphicons instead of font-awesome then override `.checkbox` class:
72+
73+
.checkbox input[type=checkbox]:checked + label:after {
74+
font-family: 'Glyphicons Halflings';
75+
content: "\e013";
76+
}
77+
.checkbox label:after {
78+
padding-left: 4px;
79+
padding-top: 2px;
80+
font-size: 9px;
81+
}
82+
83+
Credits
84+
------------
85+
86+
Based on [Official Bootstrap Sass port](https://github.com/twbs/bootstrap-sass) and awesome [Font Awesome](https://github.com/FortAwesome/Font-Awesome).
87+
88+
Inspired by [Web Arch Template](http://www.revox.io/webarchv2/form_elements.html)

font-awesome-checkbox.css renamed to awesome-bootstrap-checkbox.css

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.checkbox label {
2-
display: inline-block;
3-
position: relative;
4-
padding-left: 5px; }
5-
.checkbox label:before {
2+
display: inline-block;
3+
position: relative;
4+
padding-left: 5px; }
5+
.checkbox label:before {
66
content: "";
77
display: inline-block;
88
width: 17px;
@@ -15,7 +15,7 @@
1515
background-color: #fff;
1616
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
1717
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
18-
.checkbox label:after {
18+
.checkbox label:after {
1919
display: inline-block;
2020
width: 16px;
2121
height: 16px;
@@ -28,53 +28,53 @@
2828
font-size: 11px;
2929
color: #555555; }
3030
.checkbox input[type=checkbox] {
31-
display: none; }
32-
.checkbox input[type=checkbox]:checked + label:after {
31+
display: none; }
32+
.checkbox input[type=checkbox]:checked + label:after {
3333
font-family: 'FontAwesome';
3434
content: "\f00c"; }
35-
.checkbox input[type=checkbox]:disabled + label {
35+
.checkbox input[type=checkbox]:disabled + label {
3636
opacity: 0.65; }
37-
.checkbox input[type=checkbox]:disabled + label:before {
38-
background-color: #eeeeee;
39-
cursor: not-allowed; }
37+
.checkbox input[type=checkbox]:disabled + label:before {
38+
background-color: #eeeeee;
39+
cursor: not-allowed; }
4040
.checkbox.checkbox-circle label:before {
41-
border-radius: 50%; }
41+
border-radius: 50%; }
4242

4343
.checkbox-primary input[type=checkbox]:checked + label:before {
44-
background-color: #428bca;
45-
border-color: #428bca; }
44+
background-color: #428bca;
45+
border-color: #428bca; }
4646
.checkbox-primary input[type=checkbox]:checked + label:after {
47-
color: #fff; }
47+
color: #fff; }
4848

4949
.checkbox-danger input[type=checkbox]:checked + label:before {
50-
background-color: #d9534f;
51-
border-color: #d9534f; }
50+
background-color: #d9534f;
51+
border-color: #d9534f; }
5252
.checkbox-danger input[type=checkbox]:checked + label:after {
53-
color: #fff; }
53+
color: #fff; }
5454

5555
.checkbox-info input[type=checkbox]:checked + label:before {
56-
background-color: #5bc0de;
57-
border-color: #5bc0de; }
56+
background-color: #5bc0de;
57+
border-color: #5bc0de; }
5858
.checkbox-info input[type=checkbox]:checked + label:after {
59-
color: #fff; }
59+
color: #fff; }
6060

6161
.checkbox-warning input[type=checkbox]:checked + label:before {
62-
background-color: #f0ad4e;
63-
border-color: #f0ad4e; }
62+
background-color: #f0ad4e;
63+
border-color: #f0ad4e; }
6464
.checkbox-warning input[type=checkbox]:checked + label:after {
65-
color: #fff; }
65+
color: #fff; }
6666

6767
.checkbox-success input[type=checkbox]:checked + label:before {
68-
background-color: #5cb85c;
69-
border-color: #5cb85c; }
68+
background-color: #5cb85c;
69+
border-color: #5cb85c; }
7070
.checkbox-success input[type=checkbox]:checked + label:after {
71-
color: #fff; }
71+
color: #fff; }
7272

7373
.radio label {
74-
display: inline-block;
75-
position: relative;
76-
padding-left: 5px; }
77-
.radio label:before {
74+
display: inline-block;
75+
position: relative;
76+
padding-left: 5px; }
77+
.radio label:before {
7878
content: "";
7979
display: inline-block;
8080
width: 17px;
@@ -87,7 +87,7 @@
8787
background-color: #fff;
8888
-webkit-transition: border 0.15s ease-in-out;
8989
transition: border 0.15s ease-in-out; }
90-
.radio label:after {
90+
.radio label:after {
9191
display: inline-block;
9292
content: " ";
9393
width: 11px;
@@ -106,47 +106,47 @@
106106
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
107107
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
108108
.radio input[type=radio] {
109-
display: none; }
110-
.radio input[type=radio]:checked + label:after {
109+
display: none; }
110+
.radio input[type=radio]:checked + label:after {
111111
-webkit-transform: scale(1);
112112
-ms-transform: scale(1);
113113
transform: scale(1); }
114-
.radio input[type=radio]:disabled + label {
114+
.radio input[type=radio]:disabled + label {
115115
opacity: 0.65; }
116-
.radio input[type=radio]:disabled + label:before {
117-
cursor: not-allowed; }
116+
.radio input[type=radio]:disabled + label:before {
117+
cursor: not-allowed; }
118118

119119
.radio-primary input[type=radio] + label:after {
120-
background-color: #428bca; }
120+
background-color: #428bca; }
121121
.radio-primary input[type=radio]:checked + label:before {
122-
border-color: #428bca; }
122+
border-color: #428bca; }
123123
.radio-primary input[type=radio]:checked + label:after {
124-
background-color: #428bca; }
124+
background-color: #428bca; }
125125

126126
.radio-danger input[type=radio] + label:after {
127-
background-color: #d9534f; }
127+
background-color: #d9534f; }
128128
.radio-danger input[type=radio]:checked + label:before {
129-
border-color: #d9534f; }
129+
border-color: #d9534f; }
130130
.radio-danger input[type=radio]:checked + label:after {
131-
background-color: #d9534f; }
131+
background-color: #d9534f; }
132132

133133
.radio-info input[type=radio] + label:after {
134-
background-color: #5bc0de; }
134+
background-color: #5bc0de; }
135135
.radio-info input[type=radio]:checked + label:before {
136-
border-color: #5bc0de; }
136+
border-color: #5bc0de; }
137137
.radio-info input[type=radio]:checked + label:after {
138-
background-color: #5bc0de; }
138+
background-color: #5bc0de; }
139139

140140
.radio-warning input[type=radio] + label:after {
141-
background-color: #f0ad4e; }
141+
background-color: #f0ad4e; }
142142
.radio-warning input[type=radio]:checked + label:before {
143-
border-color: #f0ad4e; }
143+
border-color: #f0ad4e; }
144144
.radio-warning input[type=radio]:checked + label:after {
145-
background-color: #f0ad4e; }
145+
background-color: #f0ad4e; }
146146

147147
.radio-success input[type=radio] + label:after {
148-
background-color: #5cb85c; }
148+
background-color: #5cb85c; }
149149
.radio-success input[type=radio]:checked + label:before {
150-
border-color: #5cb85c; }
150+
border-color: #5cb85c; }
151151
.radio-success input[type=radio]:checked + label:after {
152-
background-color: #5cb85c; }
152+
background-color: #5cb85c; }

font-awesome-checkbox.scss renamed to awesome-bootstrap-checkbox.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@
2525
&:before{
2626
content: "";
2727
display: inline-block;
28+
position: absolute;
2829
width: 17px;
2930
height: 17px;
30-
position: absolute;
3131
left: 0;
3232
margin-left: -20px;
3333
border: 1px solid $input-border;
@@ -38,14 +38,14 @@
3838

3939
&:after{
4040
display: inline-block;
41+
position: absolute;
4142
width: 16px;
4243
height: 16px;
4344
left: 0;
4445
top: 0;
4546
margin-left: -20px;
4647
padding-left: 3px;
4748
padding-top: 1px;
48-
position: absolute;
4949
font-size: 11px;
5050
color: $gray;
5151
}
@@ -104,7 +104,7 @@
104104
}
105105

106106
.radio{
107-
107+
108108
label{
109109
display: inline-block;
110110
position: relative;
@@ -113,9 +113,9 @@
113113
&:before{
114114
content: "";
115115
display: inline-block;
116+
position: absolute;
116117
width: 17px;
117118
height: 17px;
118-
position: absolute;
119119
left: 0;
120120
margin-left: -20px;
121121
border: 1px solid $input-border;
@@ -126,13 +126,13 @@
126126

127127
&:after{
128128
display: inline-block;
129+
position: absolute;
129130
content: " ";
130131
width: 11px;
131132
height: 11px;
132133
left: 3px;
133134
top: 3px;
134135
margin-left: -20px;
135-
position: absolute;
136136
border-radius: 50%;
137137
background-color: $gray;
138138
@include scale(0);

‎demo/build.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
.checkbox label:before {
66
content: "";
77
display: inline-block;
8+
position: absolute;
89
width: 17px;
910
height: 17px;
10-
position: absolute;
1111
left: 0;
1212
margin-left: -20px;
1313
border: 1px solid #cccccc;
@@ -17,14 +17,14 @@
1717
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
1818
.checkbox label:after {
1919
display: inline-block;
20+
position: absolute;
2021
width: 16px;
2122
height: 16px;
2223
left: 0;
2324
top: 0;
2425
margin-left: -20px;
2526
padding-left: 3px;
2627
padding-top: 1px;
27-
position: absolute;
2828
font-size: 11px;
2929
color: #555555; }
3030
.checkbox input[type=checkbox] {
@@ -77,9 +77,9 @@
7777
.radio label:before {
7878
content: "";
7979
display: inline-block;
80+
position: absolute;
8081
width: 17px;
8182
height: 17px;
82-
position: absolute;
8383
left: 0;
8484
margin-left: -20px;
8585
border: 1px solid #cccccc;
@@ -89,13 +89,13 @@
8989
transition: border 0.15s ease-in-out; }
9090
.radio label:after {
9191
display: inline-block;
92+
position: absolute;
9293
content: " ";
9394
width: 11px;
9495
height: 11px;
9596
left: 3px;
9697
top: 3px;
9798
margin-left: -20px;
98-
position: absolute;
9999
border-radius: 50%;
100100
background-color: #555555;
101101
-webkit-transform: scale(0);

0 commit comments

Comments
 (0)