Skip to content

Commit b77d720

Browse files
okendokenokendoken
committed
colors
1 parent 902ee2f commit b77d720

File tree

3 files changed

+143
-20
lines changed

3 files changed

+143
-20
lines changed

‎demo/build.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,35 @@
3636
.checkbox input[type=checkbox]:disabled + label:before {
3737
background-color: #eeeeee;
3838
cursor: not-allowed; }
39+
.checkbox.checkbox-circle label:before {
40+
border-radius: 50%; }
41+
42+
.checkbox-primary input[type=checkbox]:checked + label:before {
43+
background-color: #428bca;
44+
border-color: #428bca; }
45+
.checkbox-primary input[type=checkbox]:checked + label:after {
46+
color: #fff; }
47+
48+
.checkbox-danger input[type=checkbox]:checked + label:before {
49+
background-color: #d9534f;
50+
border-color: #d9534f; }
51+
.checkbox-danger input[type=checkbox]:checked + label:after {
52+
color: #fff; }
53+
54+
.checkbox-info input[type=checkbox]:checked + label:before {
55+
background-color: #5bc0de;
56+
border-color: #5bc0de; }
57+
.checkbox-info input[type=checkbox]:checked + label:after {
58+
color: #fff; }
59+
60+
.checkbox-warning input[type=checkbox]:checked + label:before {
61+
background-color: #f0ad4e;
62+
border-color: #f0ad4e; }
63+
.checkbox-warning input[type=checkbox]:checked + label:after {
64+
color: #fff; }
65+
66+
.checkbox-success input[type=checkbox]:checked + label:before {
67+
background-color: #5cb85c;
68+
border-color: #5cb85c; }
69+
.checkbox-success input[type=checkbox]:checked + label:after {
70+
color: #fff; }

‎demo/index.html

Lines changed: 87 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,98 @@
99
</head>
1010
<body>
1111
<div class="container">
12-
<h2>Basic controls</h2>
12+
<h2>Checkboxes</h2>
1313
<form role="form">
1414
<div class="row">
1515
<div class="col-md-4">
16-
<div class="checkbox">
17-
<input id="checkbox1" type="checkbox">
18-
<label for="checkbox1">
19-
Check me out
20-
</label>
21-
</div>
16+
<fieldset>
17+
<legend>
18+
Basic
19+
</legend>
20+
<p>
21+
Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.
22+
</p>
23+
<div class="checkbox">
24+
<input id="checkbox1" type="checkbox">
25+
<label for="checkbox1">
26+
Default
27+
</label>
28+
</div>
29+
<div class="checkbox checkbox-primary">
30+
<input id="checkbox2" type="checkbox" checked>
31+
<label for="checkbox2">
32+
Primary
33+
</label>
34+
</div>
35+
<div class="checkbox checkbox-success">
36+
<input id="checkbox3" type="checkbox">
37+
<label for="checkbox3">
38+
Success
39+
</label>
40+
</div>
41+
<div class="checkbox checkbox-info">
42+
<input id="checkbox4" type="checkbox">
43+
<label for="checkbox4">
44+
Info
45+
</label>
46+
</div>
47+
<div class="checkbox checkbox-warning">
48+
<input id="checkbox5" type="checkbox" checked>
49+
<label for="checkbox5">
50+
Warning
51+
</label>
52+
</div>
53+
<div class="checkbox checkbox-danger">
54+
<input id="checkbox6" type="checkbox" checked>
55+
<label for="checkbox6">
56+
Check me out
57+
</label>
58+
</div>
59+
</fieldset>
2260
</div>
2361
<div class="col-md-4">
24-
<div class="checkbox">
25-
<input id="checkbox7" type="checkbox" disabled>
26-
<label for="checkbox7">
27-
Can't check this
28-
</label>
29-
</div>
30-
<div class="checkbox">
31-
<input id="checkbox8" type="checkbox" disabled checked>
32-
<label for="checkbox8">
33-
This too
34-
</label>
35-
</div>
62+
<fieldset>
63+
<legend>
64+
Circled
65+
</legend>
66+
<p>
67+
<code>.checkbox-circle</code> for roundness.
68+
</p>
69+
<div class="checkbox checkbox-circle">
70+
<input id="checkbox7" type="checkbox">
71+
<label for="checkbox7">
72+
Simply Rounded
73+
</label>
74+
</div>
75+
<div class="checkbox checkbox-info checkbox-circle">
76+
<input id="checkbox8" type="checkbox" checked>
77+
<label for="checkbox8">
78+
Me too
79+
</label>
80+
</div>
81+
</fieldset>
82+
</div>
83+
<div class="col-md-4">
84+
<fieldset>
85+
<legend>
86+
Disabled
87+
</legend>
88+
<p>
89+
Disabled state also supported.
90+
</p>
91+
<div class="checkbox">
92+
<input id="checkbox9" type="checkbox" disabled>
93+
<label for="checkbox9">
94+
Can't check this
95+
</label>
96+
</div>
97+
<div class="checkbox checkbox-success">
98+
<input id="checkbox10" type="checkbox" disabled checked>
99+
<label for="checkbox10">
100+
This too
101+
</label>
102+
</div>
103+
</fieldset>
36104
</div>
37105
</div>
38106
</form>

‎font-awesome-checkbox.scss

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
@mixin checkbox-variant($parent, $color) {
2+
#{$parent} input[type=checkbox]:checked + label{
3+
&:before {
4+
background-color: $color;
5+
border-color: $color;
6+
}
7+
&:after{
8+
color: #fff;
9+
}
10+
}
11+
}
12+
13+
114
.checkbox{
215
label{
316
display: inline-block;
@@ -50,4 +63,14 @@
5063
}
5164

5265
}
53-
}
66+
67+
&.checkbox-circle label:before{
68+
border-radius: 50%;
69+
}
70+
}
71+
72+
@include checkbox-variant('.checkbox-primary', $brand-primary);
73+
@include checkbox-variant('.checkbox-danger', $brand-danger);
74+
@include checkbox-variant('.checkbox-info', $brand-info);
75+
@include checkbox-variant('.checkbox-warning', $brand-warning);
76+
@include checkbox-variant('.checkbox-success', $brand-success);

0 commit comments

Comments
 (0)