Skip to content

Commit e63b57a

Browse files
DimaSavchenkoDimaSavchenko
committed
Add indeterminate-state in demo
1 parent e14cffc commit e63b57a

File tree

4 files changed

+173
-96
lines changed

4 files changed

+173
-96
lines changed

‎demo/build.css

Lines changed: 160 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,70 @@
11
.checkbox {
22
padding-left: 20px; }
3-
.checkbox label {
4-
display: inline-block;
5-
vertical-align: middle;
6-
position: relative;
3+
.checkbox label {
4+
display: inline-block;
5+
vertical-align: middle;
6+
position: relative;
77
padding-left: 5px; }
8-
.checkbox label::before {
9-
content: "";
10-
display: inline-block;
11-
position: absolute;
12-
width: 17px;
13-
height: 17px;
14-
left: 0;
15-
margin-left: -20px;
16-
border: 1px solid #cccccc;
17-
border-radius: 3px;
18-
background-color: #fff;
19-
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
20-
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
8+
.checkbox label::before {
9+
content: "";
10+
display: inline-block;
11+
position: absolute;
12+
width: 17px;
13+
height: 17px;
14+
left: 0;
15+
margin-left: -20px;
16+
border: 1px solid #cccccc;
17+
border-radius: 3px;
18+
background-color: #fff;
19+
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
20+
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
2121
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
22-
.checkbox label::after {
23-
display: inline-block;
24-
position: absolute;
25-
width: 16px;
26-
height: 16px;
27-
left: 0;
28-
top: 0;
29-
margin-left: -20px;
30-
padding-left: 3px;
31-
padding-top: 1px;
32-
font-size: 11px;
22+
.checkbox label::after {
23+
display: inline-block;
24+
position: absolute;
25+
width: 16px;
26+
height: 16px;
27+
left: 0;
28+
top: 0;
29+
margin-left: -20px;
30+
padding-left: 3px;
31+
padding-top: 1px;
32+
font-size: 11px;
3333
color: #555555; }
34-
.checkbox input[type="checkbox"],
35-
.checkbox input[type="radio"] {
36-
opacity: 0;
34+
.checkbox input[type="checkbox"],
35+
.checkbox input[type="radio"] {
36+
opacity: 0;
3737
z-index: 1; }
38-
.checkbox input[type="checkbox"]:focus + label::before,
39-
.checkbox input[type="radio"]:focus + label::before {
40-
outline: thin dotted;
41-
outline: 5px auto -webkit-focus-ring-color;
38+
.checkbox input[type="checkbox"]:focus + label::before,
39+
.checkbox input[type="radio"]:focus + label::before {
40+
outline: thin dotted;
41+
outline: 5px auto -webkit-focus-ring-color;
4242
outline-offset: -2px; }
43-
.checkbox input[type="checkbox"]:checked + label::after,
44-
.checkbox input[type="radio"]:checked + label::after {
45-
font-family: "FontAwesome";
46-
content: "\f00c"; }
47-
.checkbox input[type="checkbox"]:disabled + label,
48-
.checkbox input[type="radio"]:disabled + label {
43+
.checkbox input[type="checkbox"]:checked + label::after,
44+
.checkbox input[type="radio"]:checked + label::after {
45+
font-family: "FontAwesome";
46+
content: "\f00c";}
47+
.checkbox input[type="checkbox"]:indeterminate + label::after,
48+
.checkbox input[type="radio"]:indeterminate + label::after {
49+
display: block;
50+
content: "";
51+
width: 10px;
52+
height: 3px;
53+
background-color: #555555;
54+
border-radius: 2px;
55+
margin-left: -16.5px;
56+
margin-top: 7px;
57+
}
58+
.checkbox input[type="checkbox"]:disabled + label,
59+
.checkbox input[type="radio"]:disabled + label {
4960
opacity: 0.65; }
50-
.checkbox input[type="checkbox"]:disabled + label::before,
51-
.checkbox input[type="radio"]:disabled + label::before {
52-
background-color: #eeeeee;
61+
.checkbox input[type="checkbox"]:disabled + label::before,
62+
.checkbox input[type="radio"]:disabled + label::before {
63+
background-color: #eeeeee;
5364
cursor: not-allowed; }
54-
.checkbox.checkbox-circle label::before {
65+
.checkbox.checkbox-circle label::before {
5566
border-radius: 50%; }
56-
.checkbox.checkbox-inline {
67+
.checkbox.checkbox-inline {
5768
margin-top: 0; }
5869

5970
.checkbox-primary input[type="checkbox"]:checked + label::before,
@@ -94,65 +105,120 @@
94105
border-color: #5cb85c; }
95106
.checkbox-success input[type="checkbox"]:checked + label::after,
96107
.checkbox-success input[type="radio"]:checked + label::after {
97-
color: #fff; }
108+
color: #fff;}
109+
110+
.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
111+
.checkbox-primary input[type="radio"]:indeterminate + label::before {
112+
background-color: #337ab7;
113+
border-color: #337ab7;
114+
}
115+
116+
.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
117+
.checkbox-primary input[type="radio"]:indeterminate + label::after {
118+
background-color: #fff;
119+
}
120+
121+
.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
122+
.checkbox-danger input[type="radio"]:indeterminate + label::before {
123+
background-color: #d9534f;
124+
border-color: #d9534f;
125+
}
126+
127+
.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
128+
.checkbox-danger input[type="radio"]:indeterminate + label::after {
129+
background-color: #fff;
130+
}
131+
132+
.checkbox-info input[type="checkbox"]:indeterminate + label::before,
133+
.checkbox-info input[type="radio"]:indeterminate + label::before {
134+
background-color: #5bc0de;
135+
border-color: #5bc0de;
136+
}
137+
138+
.checkbox-info input[type="checkbox"]:indeterminate + label::after,
139+
.checkbox-info input[type="radio"]:indeterminate + label::after {
140+
background-color: #fff;
141+
}
142+
143+
.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
144+
.checkbox-warning input[type="radio"]:indeterminate + label::before {
145+
background-color: #f0ad4e;
146+
border-color: #f0ad4e;
147+
}
148+
149+
.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
150+
.checkbox-warning input[type="radio"]:indeterminate + label::after {
151+
background-color: #fff;
152+
}
153+
154+
.checkbox-success input[type="checkbox"]:indeterminate + label::before,
155+
.checkbox-success input[type="radio"]:indeterminate + label::before {
156+
background-color: #5cb85c;
157+
border-color: #5cb85c;
158+
}
159+
160+
.checkbox-success input[type="checkbox"]:indeterminate + label::after,
161+
.checkbox-success input[type="radio"]:indeterminate + label::after {
162+
background-color: #fff;
163+
}
98164

99165
.radio {
100166
padding-left: 20px; }
101-
.radio label {
102-
display: inline-block;
103-
vertical-align: middle;
104-
position: relative;
167+
.radio label {
168+
display: inline-block;
169+
vertical-align: middle;
170+
position: relative;
105171
padding-left: 5px; }
106-
.radio label::before {
107-
content: "";
108-
display: inline-block;
109-
position: absolute;
110-
width: 17px;
111-
height: 17px;
112-
left: 0;
113-
margin-left: -20px;
114-
border: 1px solid #cccccc;
115-
border-radius: 50%;
116-
background-color: #fff;
117-
-webkit-transition: border 0.15s ease-in-out;
118-
-o-transition: border 0.15s ease-in-out;
172+
.radio label::before {
173+
content: "";
174+
display: inline-block;
175+
position: absolute;
176+
width: 17px;
177+
height: 17px;
178+
left: 0;
179+
margin-left: -20px;
180+
border: 1px solid #cccccc;
181+
border-radius: 50%;
182+
background-color: #fff;
183+
-webkit-transition: border 0.15s ease-in-out;
184+
-o-transition: border 0.15s ease-in-out;
119185
transition: border 0.15s ease-in-out; }
120-
.radio label::after {
121-
display: inline-block;
122-
position: absolute;
123-
content: " ";
124-
width: 11px;
125-
height: 11px;
126-
left: 3px;
127-
top: 3px;
128-
margin-left: -20px;
129-
border-radius: 50%;
130-
background-color: #555555;
131-
-webkit-transform: scale(0, 0);
132-
-ms-transform: scale(0, 0);
133-
-o-transform: scale(0, 0);
134-
transform: scale(0, 0);
135-
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
136-
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
137-
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
186+
.radio label::after {
187+
display: inline-block;
188+
position: absolute;
189+
content: " ";
190+
width: 11px;
191+
height: 11px;
192+
left: 3px;
193+
top: 3px;
194+
margin-left: -20px;
195+
border-radius: 50%;
196+
background-color: #555555;
197+
-webkit-transform: scale(0, 0);
198+
-ms-transform: scale(0, 0);
199+
-o-transform: scale(0, 0);
200+
transform: scale(0, 0);
201+
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
202+
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
203+
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
138204
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
139-
.radio input[type="radio"] {
140-
opacity: 0;
205+
.radio input[type="radio"] {
206+
opacity: 0;
141207
z-index: 1; }
142-
.radio input[type="radio"]:focus + label::before {
143-
outline: thin dotted;
144-
outline: 5px auto -webkit-focus-ring-color;
208+
.radio input[type="radio"]:focus + label::before {
209+
outline: thin dotted;
210+
outline: 5px auto -webkit-focus-ring-color;
145211
outline-offset: -2px; }
146-
.radio input[type="radio"]:checked + label::after {
147-
-webkit-transform: scale(1, 1);
148-
-ms-transform: scale(1, 1);
149-
-o-transform: scale(1, 1);
212+
.radio input[type="radio"]:checked + label::after {
213+
-webkit-transform: scale(1, 1);
214+
-ms-transform: scale(1, 1);
215+
-o-transform: scale(1, 1);
150216
transform: scale(1, 1); }
151-
.radio input[type="radio"]:disabled + label {
217+
.radio input[type="radio"]:disabled + label {
152218
opacity: 0.65; }
153-
.radio input[type="radio"]:disabled + label::before {
219+
.radio input[type="radio"]:disabled + label::before {
154220
cursor: not-allowed; }
155-
.radio.radio-inline {
221+
.radio.radio-inline {
156222
margin-top: 0; }
157223

158224
.radio-primary input[type="radio"] + label::after {

‎demo/build.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../bower_components/bootstrap/less/variables";
22
@import "../bower_components/bootstrap/less/mixins";
33

4-
@import "../awesome-bootstrap-checkbox";
4+
@import "../awesome-bootstrap-checkbox.less";
55

66
@import "../bower_components/Font-Awesome/less/variables";

‎demo/build.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33

44
@import "../bower_components/Font-Awesome/scss/variables";
55

6-
@import "../awesome-bootstrap-checkbox";
6+
@import "../awesome-bootstrap-checkbox.scss";

‎demo/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,11 @@ <h2>Checkboxes</h2>
6565
<input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
6666
<label></label>
6767
</div>
68+
<p>Checkboxes with indeterminate state</p>
69+
<div class="checkbox checkbox-primary">
70+
<input id="indeterminateCheckbox" class="styled" type="checkbox" onclick="changeState(this)">
71+
<label></label>
72+
</div>
6873
<p>Inline checkboxes</p>
6974
<div class="checkbox checkbox-inline">
7075
<input type="checkbox" class="styled" id="inlineCheckbox1" value="option1">
@@ -246,5 +251,11 @@ <h2>Radios</h2>
246251
</div>
247252
</form>
248253
</div>
254+
<script type="text/javascript">
255+
function changeState(el) {
256+
if (el.readOnly) el.checked=el.readOnly=false;
257+
else if (!el.checked) el.readOnly=el.indeterminate=true;
258+
}
259+
</script>
249260
</body>
250261
</html>

0 commit comments

Comments
 (0)