Skip to content

Commit da15cb5

Browse files
okendokenokendoken
committed
inline checkboxes
1 parent e50f726 commit da15cb5

File tree

3 files changed

+128
-97
lines changed

3 files changed

+128
-97
lines changed

‎awesome-bootstrap-checkbox.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717

1818
.checkbox{
19+
padding-left: 20px;
1920

2021
label{
2122
display: inline-block;
@@ -73,6 +74,10 @@
7374
&.checkbox-circle label::before{
7475
border-radius: 50%;
7576
}
77+
78+
&.checkbox-inline{
79+
margin-top: 0;
80+
}
7681
}
7782

7883
@include checkbox-variant('.checkbox-primary', $brand-primary);
@@ -104,6 +109,7 @@
104109
}
105110

106111
.radio{
112+
padding-left: 20px;
107113

108114
label{
109115
display: inline-block;
@@ -158,6 +164,10 @@
158164
}
159165

160166
}
167+
168+
&.radio-inline{
169+
margin-top: 0;
170+
}
161171
}
162172

163173
@include radio-variant('.radio-primary', $brand-primary);

‎demo/build.css

Lines changed: 96 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
1-
.checkbox label {
2-
display: inline-block;
3-
position: relative;
4-
padding-left: 5px; }
5-
.checkbox label::before {
6-
content: "";
1+
.checkbox {
2+
padding-left: 20px; }
3+
.checkbox label {
74
display: inline-block;
8-
position: absolute;
9-
width: 17px;
10-
height: 17px;
11-
left: 0;
12-
margin-left: -20px;
13-
border: 1px solid #cccccc;
14-
border-radius: 3px;
15-
background-color: #fff;
16-
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
17-
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
18-
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
19-
.checkbox label::after {
20-
display: inline-block;
21-
position: absolute;
22-
width: 16px;
23-
height: 16px;
24-
left: 0;
25-
top: 0;
26-
margin-left: -20px;
27-
padding-left: 3px;
28-
padding-top: 1px;
29-
font-size: 11px;
30-
color: #555555; }
31-
.checkbox input[type="checkbox"] {
32-
display: none; }
33-
.checkbox input[type="checkbox"]:checked + label::after {
34-
font-family: 'FontAwesome';
35-
content: "\f00c"; }
36-
.checkbox input[type="checkbox"]:disabled + label {
37-
opacity: 0.65; }
38-
.checkbox input[type="checkbox"]:disabled + label::before {
39-
background-color: #eeeeee;
40-
cursor: not-allowed; }
41-
.checkbox.checkbox-circle label::before {
42-
border-radius: 50%; }
5+
position: relative;
6+
padding-left: 5px; }
7+
.checkbox label::before {
8+
content: "";
9+
display: inline-block;
10+
position: absolute;
11+
width: 17px;
12+
height: 17px;
13+
left: 0;
14+
margin-left: -20px;
15+
border: 1px solid #cccccc;
16+
border-radius: 3px;
17+
background-color: #fff;
18+
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
19+
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
20+
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
21+
.checkbox label::after {
22+
display: inline-block;
23+
position: absolute;
24+
width: 16px;
25+
height: 16px;
26+
left: 0;
27+
top: 0;
28+
margin-left: -20px;
29+
padding-left: 3px;
30+
padding-top: 1px;
31+
font-size: 11px;
32+
color: #555555; }
33+
.checkbox input[type="checkbox"] {
34+
display: none; }
35+
.checkbox input[type="checkbox"]:checked + label::after {
36+
font-family: 'FontAwesome';
37+
content: "\f00c"; }
38+
.checkbox input[type="checkbox"]:disabled + label {
39+
opacity: 0.65; }
40+
.checkbox input[type="checkbox"]:disabled + label::before {
41+
background-color: #eeeeee;
42+
cursor: not-allowed; }
43+
.checkbox.checkbox-circle label::before {
44+
border-radius: 50%; }
45+
.checkbox.checkbox-inline {
46+
margin-top: 0; }
4347

4448
.checkbox-primary input[type="checkbox"]:checked + label::before {
4549
background-color: #428bca;
@@ -71,54 +75,58 @@
7175
.checkbox-success input[type="checkbox"]:checked + label::after {
7276
color: #fff; }
7377

74-
.radio label {
75-
display: inline-block;
76-
position: relative;
77-
padding-left: 5px; }
78-
.radio label::before {
79-
content: "";
80-
display: inline-block;
81-
position: absolute;
82-
width: 17px;
83-
height: 17px;
84-
left: 0;
85-
margin-left: -20px;
86-
border: 1px solid #cccccc;
87-
border-radius: 50%;
88-
background-color: #fff;
89-
-webkit-transition: border 0.15s ease-in-out;
90-
-o-transition: border 0.15s ease-in-out;
91-
transition: border 0.15s ease-in-out; }
92-
.radio label::after {
78+
.radio {
79+
padding-left: 20px; }
80+
.radio label {
9381
display: inline-block;
94-
position: absolute;
95-
content: " ";
96-
width: 11px;
97-
height: 11px;
98-
left: 3px;
99-
top: 3px;
100-
margin-left: -20px;
101-
border-radius: 50%;
102-
background-color: #555555;
103-
-webkit-transform: scale(0, 0);
104-
-ms-transform: scale(0, 0);
105-
-o-transform: scale(0, 0);
106-
transform: scale(0, 0);
107-
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
108-
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
109-
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
110-
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
111-
.radio input[type="radio"] {
112-
display: none; }
113-
.radio input[type="radio"]:checked + label::after {
114-
-webkit-transform: scale(1, 1);
115-
-ms-transform: scale(1, 1);
116-
-o-transform: scale(1, 1);
117-
transform: scale(1, 1); }
118-
.radio input[type="radio"]:disabled + label {
119-
opacity: 0.65; }
120-
.radio input[type="radio"]:disabled + label::before {
121-
cursor: not-allowed; }
82+
position: relative;
83+
padding-left: 5px; }
84+
.radio label::before {
85+
content: "";
86+
display: inline-block;
87+
position: absolute;
88+
width: 17px;
89+
height: 17px;
90+
left: 0;
91+
margin-left: -20px;
92+
border: 1px solid #cccccc;
93+
border-radius: 50%;
94+
background-color: #fff;
95+
-webkit-transition: border 0.15s ease-in-out;
96+
-o-transition: border 0.15s ease-in-out;
97+
transition: border 0.15s ease-in-out; }
98+
.radio label::after {
99+
display: inline-block;
100+
position: absolute;
101+
content: " ";
102+
width: 11px;
103+
height: 11px;
104+
left: 3px;
105+
top: 3px;
106+
margin-left: -20px;
107+
border-radius: 50%;
108+
background-color: #555555;
109+
-webkit-transform: scale(0, 0);
110+
-ms-transform: scale(0, 0);
111+
-o-transform: scale(0, 0);
112+
transform: scale(0, 0);
113+
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
114+
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
115+
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
116+
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
117+
.radio input[type="radio"] {
118+
display: none; }
119+
.radio input[type="radio"]:checked + label::after {
120+
-webkit-transform: scale(1, 1);
121+
-ms-transform: scale(1, 1);
122+
-o-transform: scale(1, 1);
123+
transform: scale(1, 1); }
124+
.radio input[type="radio"]:disabled + label {
125+
opacity: 0.65; }
126+
.radio input[type="radio"]:disabled + label::before {
127+
cursor: not-allowed; }
128+
.radio.radio-inline {
129+
margin-top: 0; }
122130

123131
.radio-primary input[type="radio"] + label::after {
124132
background-color: #428bca; }

‎demo/index.html

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,19 @@ <h2>Checkboxes</h2>
5656
Check me out
5757
</label>
5858
</div>
59-
<label class="checkbox-inline">
60-
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
61-
</label>
62-
<label class="checkbox-inline">
63-
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
64-
</label>
65-
<label class="checkbox-inline">
66-
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
67-
</label>
59+
<p>Inline checkboxes</p>
60+
<div class="checkbox checkbox-inline">
61+
<input type="checkbox" id="inlineCheckbox1" value="option1">
62+
<label for="inlineCheckbox1"> Inline One </label>
63+
</div>
64+
<div class="checkbox checkbox-success checkbox-inline">
65+
<input type="checkbox" id="inlineCheckbox2" value="option1" checked>
66+
<label for="inlineCheckbox2"> Inline Two </label>
67+
</div>
68+
<div class="checkbox checkbox-inline">
69+
<input type="checkbox" id="inlineCheckbox3" value="option1">
70+
<label for="inlineCheckbox3"> Inline Three </label>
71+
</div>
6872
</fieldset>
6973
</div>
7074
<div class="col-md-4">
@@ -160,6 +164,15 @@ <h2>Radios</h2>
160164
</div>
161165
</div>
162166
</div>
167+
<p>Inline radios</p>
168+
<div class="radio radio-info radio-inline">
169+
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>
170+
<label for="inlineRadio1"> Inline One </label>
171+
</div>
172+
<div class="radio radio-inline">
173+
<input type="radio" id="inlineRadio2" value="option1" name="radioInline">
174+
<label for="inlineRadio2"> Inline Two </label>
175+
</div>
163176
</fieldset>
164177
</div>
165178
<div class="col-md-4">

0 commit comments

Comments
 (0)