Skip to content

Commit 1ca3398

Browse files
okendokenokendoken
committed
radios
1 parent b77d720 commit 1ca3398

File tree

7 files changed

+395
-11
lines changed

7 files changed

+395
-11
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "font-awesome-checkbox",
2+
"name": "awesome-bootstrap-checkbox",
33
"version": "0.1.0",
44
"authors": [
55
"okendoken flatlogic.com"

‎demo/bootstrap.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2129,8 +2129,8 @@ input[type="button"].btn-block {
21292129

21302130
@font-face {
21312131
font-family: 'Glyphicons Halflings';
2132-
src: url("bootstrap/glyphicons-halflings-regular.eot");
2133-
src: url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
2132+
src: url("../bower_components/bootstrap-sass/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot");
2133+
src: url("../bower_components/bootstrap-sass/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../bower_components/bootstrap-sass/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../bower_components/bootstrap-sass/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../bower_components/bootstrap-sass/vendor/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
21342134

21352135
.glyphicon {
21362136
position: relative;

‎demo/bootstrap.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
$icon-font-path: '../bower_components/bootstrap-sass/vendor/assets/fonts/bootstrap/';
2+
13
@import "../bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap";

‎demo/build.css

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
padding-left: 3px;
2626
padding-top: 1px;
2727
position: absolute;
28-
font-size: 11px; }
28+
font-size: 11px;
29+
color: #555555; }
2930
.checkbox input[type=checkbox] {
3031
display: none; }
3132
.checkbox input[type=checkbox]:checked + label:after {
@@ -68,3 +69,84 @@
6869
border-color: #5cb85c; }
6970
.checkbox-success input[type=checkbox]:checked + label:after {
7071
color: #fff; }
72+
73+
.radio label {
74+
display: inline-block;
75+
position: relative;
76+
padding-left: 5px; }
77+
.radio label:before {
78+
content: "";
79+
display: inline-block;
80+
width: 17px;
81+
height: 17px;
82+
position: absolute;
83+
left: 0;
84+
margin-left: -20px;
85+
border: 1px solid #cccccc;
86+
border-radius: 50%;
87+
background-color: #fff;
88+
-webkit-transition: border 0.15s ease-in-out;
89+
transition: border 0.15s ease-in-out; }
90+
.radio label:after {
91+
display: inline-block;
92+
content: " ";
93+
width: 11px;
94+
height: 11px;
95+
left: 3px;
96+
top: 3px;
97+
margin-left: -20px;
98+
position: absolute;
99+
border-radius: 50%;
100+
background-color: #555555;
101+
-webkit-transform: scale(0);
102+
-ms-transform: scale(0);
103+
transform: scale(0);
104+
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
105+
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
106+
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
107+
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
108+
.radio input[type=radio] {
109+
display: none; }
110+
.radio input[type=radio]:checked + label:after {
111+
-webkit-transform: scale(1);
112+
-ms-transform: scale(1);
113+
transform: scale(1); }
114+
.radio input[type=radio]:disabled + label {
115+
opacity: 0.65; }
116+
.radio input[type=radio]:disabled + label:before {
117+
cursor: not-allowed; }
118+
119+
.radio-primary input[type=radio] + label:after {
120+
background-color: #428bca; }
121+
.radio-primary input[type=radio]:checked + label:before {
122+
border-color: #428bca; }
123+
.radio-primary input[type=radio]:checked + label:after {
124+
background-color: #428bca; }
125+
126+
.radio-danger input[type=radio] + label:after {
127+
background-color: #d9534f; }
128+
.radio-danger input[type=radio]:checked + label:before {
129+
border-color: #d9534f; }
130+
.radio-danger input[type=radio]:checked + label:after {
131+
background-color: #d9534f; }
132+
133+
.radio-info input[type=radio] + label:after {
134+
background-color: #5bc0de; }
135+
.radio-info input[type=radio]:checked + label:before {
136+
border-color: #5bc0de; }
137+
.radio-info input[type=radio]:checked + label:after {
138+
background-color: #5bc0de; }
139+
140+
.radio-warning input[type=radio] + label:after {
141+
background-color: #f0ad4e; }
142+
.radio-warning input[type=radio]:checked + label:before {
143+
border-color: #f0ad4e; }
144+
.radio-warning input[type=radio]:checked + label:after {
145+
background-color: #f0ad4e; }
146+
147+
.radio-success input[type=radio] + label:after {
148+
background-color: #5cb85c; }
149+
.radio-success input[type=radio]:checked + label:before {
150+
border-color: #5cb85c; }
151+
.radio-success input[type=radio]:checked + label:after {
152+
background-color: #5cb85c; }

‎demo/index.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,79 @@ <h2>Checkboxes</h2>
100100
This too
101101
</label>
102102
</div>
103+
<div class="checkbox checkbox-warning checkbox-circle">
104+
<input id="checkbox11" type="checkbox" disabled checked>
105+
<label for="checkbox11">
106+
And this
107+
</label>
108+
</div>
109+
</fieldset>
110+
</div>
111+
</div>
112+
</form>
113+
<h2>Radios</h2>
114+
<form role="form">
115+
<div class="row">
116+
<div class="col-md-4">
117+
<fieldset>
118+
<legend>
119+
Basic
120+
</legend>
121+
<p>
122+
Supports bootstrap brand colors: <code>.radio-primary</code>, <code>.radio-danger</code> etc.
123+
</p>
124+
<div class="row">
125+
<div class="col-sm-6">
126+
<div class="radio">
127+
<input type="radio" name="radio1" id="radio1" value="option1" checked>
128+
<label for="radio1">
129+
Small
130+
</label>
131+
</div>
132+
<div class="radio">
133+
<input type="radio" name="radio1" id="radio2" value="option2">
134+
<label for="radio2">
135+
Big
136+
</label>
137+
</div>
138+
</div>
139+
<div class="col-sm-6">
140+
<div class="radio radio-danger">
141+
<input type="radio" name="radio2" id="radio3" value="option1">
142+
<label for="radio3">
143+
Next
144+
</label>
145+
</div>
146+
<div class="radio radio-danger">
147+
<input type="radio" name="radio2" id="radio4" value="option2" checked>
148+
<label for="radio4">
149+
One
150+
</label>
151+
</div>
152+
</div>
153+
</div>
154+
</fieldset>
155+
</div>
156+
<div class="col-md-4">
157+
<fieldset>
158+
<legend>
159+
Disabled
160+
</legend>
161+
<p>
162+
Disabled state also supported.
163+
</p>
164+
<div class="radio radio-danger">
165+
<input type="radio" name="radio3" id="radio5" value="option1" disabled>
166+
<label for="radio5">
167+
Next
168+
</label>
169+
</div>
170+
<div class="radio">
171+
<input type="radio" name="radio3" id="radio6" value="option2" checked disabled>
172+
<label for="radio6">
173+
One
174+
</label>
175+
</div>
103176
</fieldset>
104177
</div>
105178
</div>

‎font-awesome-checkbox.css

Lines changed: 143 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,152 @@
11
.checkbox label {
2-
position: relative; }
3-
.checkbox label:before {
2+
display: inline-block;
3+
position: relative;
4+
padding-left: 5px; }
5+
.checkbox label:before {
46
content: "";
57
display: inline-block;
68
width: 17px;
79
height: 17px;
810
position: absolute;
911
left: 0;
10-
top: 1.4px;
11-
border: 1px solid #C2C6CB;
12+
margin-left: -20px;
13+
border: 1px solid #cccccc;
1214
border-radius: 3px;
13-
transition: border 0.2s linear 0s,color 0.2s linear 0s; }
15+
background-color: #fff;
16+
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
17+
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
18+
.checkbox label:after {
19+
display: inline-block;
20+
width: 16px;
21+
height: 16px;
22+
left: 0;
23+
top: 0;
24+
margin-left: -20px;
25+
padding-left: 3px;
26+
padding-top: 1px;
27+
position: absolute;
28+
font-size: 11px;
29+
color: #555555; }
1430
.checkbox input[type=checkbox] {
15-
display: none; }
31+
display: none; }
32+
.checkbox input[type=checkbox]:checked + label:after {
33+
font-family: 'FontAwesome';
34+
content: "\f00c"; }
35+
.checkbox input[type=checkbox]:disabled + label {
36+
opacity: 0.65; }
37+
.checkbox input[type=checkbox]:disabled + label:before {
38+
background-color: #eeeeee;
39+
cursor: not-allowed; }
40+
.checkbox.checkbox-circle label:before {
41+
border-radius: 50%; }
42+
43+
.checkbox-primary input[type=checkbox]:checked + label:before {
44+
background-color: #428bca;
45+
border-color: #428bca; }
46+
.checkbox-primary input[type=checkbox]:checked + label:after {
47+
color: #fff; }
48+
49+
.checkbox-danger input[type=checkbox]:checked + label:before {
50+
background-color: #d9534f;
51+
border-color: #d9534f; }
52+
.checkbox-danger input[type=checkbox]:checked + label:after {
53+
color: #fff; }
54+
55+
.checkbox-info input[type=checkbox]:checked + label:before {
56+
background-color: #5bc0de;
57+
border-color: #5bc0de; }
58+
.checkbox-info input[type=checkbox]:checked + label:after {
59+
color: #fff; }
60+
61+
.checkbox-warning input[type=checkbox]:checked + label:before {
62+
background-color: #f0ad4e;
63+
border-color: #f0ad4e; }
64+
.checkbox-warning input[type=checkbox]:checked + label:after {
65+
color: #fff; }
66+
67+
.checkbox-success input[type=checkbox]:checked + label:before {
68+
background-color: #5cb85c;
69+
border-color: #5cb85c; }
70+
.checkbox-success input[type=checkbox]:checked + label:after {
71+
color: #fff; }
72+
73+
.radio label {
74+
display: inline-block;
75+
position: relative;
76+
padding-left: 5px; }
77+
.radio label:before {
78+
content: "";
79+
display: inline-block;
80+
width: 17px;
81+
height: 17px;
82+
position: absolute;
83+
left: 0;
84+
margin-left: -20px;
85+
border: 1px solid #cccccc;
86+
border-radius: 50%;
87+
background-color: #fff;
88+
-webkit-transition: border 0.15s ease-in-out;
89+
transition: border 0.15s ease-in-out; }
90+
.radio label:after {
91+
display: inline-block;
92+
content: " ";
93+
width: 11px;
94+
height: 11px;
95+
left: 3px;
96+
top: 3px;
97+
margin-left: -20px;
98+
position: absolute;
99+
border-radius: 50%;
100+
background-color: #555555;
101+
-webkit-transform: scale(0);
102+
-ms-transform: scale(0);
103+
transform: scale(0);
104+
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
105+
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
106+
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
107+
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
108+
.radio input[type=radio] {
109+
display: none; }
110+
.radio input[type=radio]:checked + label:after {
111+
-webkit-transform: scale(1);
112+
-ms-transform: scale(1);
113+
transform: scale(1); }
114+
.radio input[type=radio]:disabled + label {
115+
opacity: 0.65; }
116+
.radio input[type=radio]:disabled + label:before {
117+
cursor: not-allowed; }
118+
119+
.radio-primary input[type=radio] + label:after {
120+
background-color: #428bca; }
121+
.radio-primary input[type=radio]:checked + label:before {
122+
border-color: #428bca; }
123+
.radio-primary input[type=radio]:checked + label:after {
124+
background-color: #428bca; }
125+
126+
.radio-danger input[type=radio] + label:after {
127+
background-color: #d9534f; }
128+
.radio-danger input[type=radio]:checked + label:before {
129+
border-color: #d9534f; }
130+
.radio-danger input[type=radio]:checked + label:after {
131+
background-color: #d9534f; }
132+
133+
.radio-info input[type=radio] + label:after {
134+
background-color: #5bc0de; }
135+
.radio-info input[type=radio]:checked + label:before {
136+
border-color: #5bc0de; }
137+
.radio-info input[type=radio]:checked + label:after {
138+
background-color: #5bc0de; }
139+
140+
.radio-warning input[type=radio] + label:after {
141+
background-color: #f0ad4e; }
142+
.radio-warning input[type=radio]:checked + label:before {
143+
border-color: #f0ad4e; }
144+
.radio-warning input[type=radio]:checked + label:after {
145+
background-color: #f0ad4e; }
146+
147+
.radio-success input[type=radio] + label:after {
148+
background-color: #5cb85c; }
149+
.radio-success input[type=radio]:checked + label:before {
150+
border-color: #5cb85c; }
151+
.radio-success input[type=radio]:checked + label:after {
152+
background-color: #5cb85c; }

0 commit comments

Comments
 (0)