Skip to content

Commit 0671e05

Browse files
DimaSavchenkoDimaSavchenko
committed
Add indeterminate-state
1 parent 41e85cb commit 0671e05

File tree

4 files changed

+170
-0
lines changed

4 files changed

+170
-0
lines changed

‎awesome-bootstrap-checkbox.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,17 @@
5151
font-family: "FontAwesome";
5252
content: "\f00c";
5353
}
54+
.abc-checkbox input[type="checkbox"]:indeterminate + label::after,
55+
.abc-checkbox input[type="radio"]:indeterminate + label::after {
56+
display: block;
57+
content: "";
58+
width: 10px;
59+
height: 3px;
60+
background-color: #555555;
61+
border-radius: 2px;
62+
margin-left: -16.5px;
63+
margin-top: 7px;
64+
}
5465
.abc-checkbox input[type="checkbox"]:disabled + label,
5566
.abc-checkbox input[type="radio"]:disabled + label {
5667
opacity: 0.65;
@@ -117,6 +128,61 @@
117128
color: #fff;
118129
}
119130

131+
.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::before,
132+
.abc-checkbox-primary input[type="radio"]:indeterminate + label::before {
133+
background-color: #337ab7;
134+
border-color: #337ab7;
135+
}
136+
137+
.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::after,
138+
.abc-checkbox-primary input[type="radio"]:indeterminate + label::after {
139+
background-color: #fff;
140+
}
141+
142+
.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::before,
143+
.abc-checkbox-danger input[type="radio"]:indeterminate + label::before {
144+
background-color: #d9534f;
145+
border-color: #d9534f;
146+
}
147+
148+
.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::after,
149+
.abc-checkbox-danger input[type="radio"]:indeterminate + label::after {
150+
background-color: #fff;
151+
}
152+
153+
.abc-checkbox-info input[type="checkbox"]:indeterminate + label::before,
154+
.abc-checkbox-info input[type="radio"]:indeterminate + label::before {
155+
background-color: #5bc0de;
156+
border-color: #5bc0de;
157+
}
158+
159+
.abc-checkbox-info input[type="checkbox"]:indeterminate + label::after,
160+
.abc-checkbox-info input[type="radio"]:indeterminate + label::after {
161+
background-color: #fff;
162+
}
163+
164+
.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::before,
165+
.abc-checkbox-warning input[type="radio"]:indeterminate + label::before {
166+
background-color: #f0ad4e;
167+
border-color: #f0ad4e;
168+
}
169+
170+
.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::after,
171+
.abc-checkbox-warning input[type="radio"]:indeterminate + label::after {
172+
background-color: #fff;
173+
}
174+
175+
.abc-checkbox-success input[type="checkbox"]:indeterminate + label::before,
176+
.abc-checkbox-success input[type="radio"]:indeterminate + label::before {
177+
background-color: #5cb85c;
178+
border-color: #5cb85c;
179+
}
180+
181+
.abc-checkbox-success input[type="checkbox"]:indeterminate + label::after,
182+
.abc-checkbox-success input[type="radio"]:indeterminate + label::after {
183+
background-color: #fff;
184+
}
185+
120186
.abc-radio {
121187
padding-left: 20px;
122188
}

‎awesome-bootstrap-checkbox.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@ $check-icon: $fa-var-check !default;
2121
}
2222
}
2323

24+
@mixin checkbox-variant-indeterminate($parent, $color) {
25+
#{$parent} input[type="checkbox"]:indeterminate + label,
26+
#{$parent} input[type="radio"]:indeterminate + label {
27+
&::before {
28+
background-color: $color;
29+
border-color: $color;
30+
}
31+
&::after{
32+
background-color: #fff;
33+
}
34+
}
35+
}
2436

2537
.abc-checkbox{
2638
padding-left: 20px;
@@ -74,6 +86,17 @@ $check-icon: $fa-var-check !default;
7486
content: $check-icon;
7587
}
7688

89+
&:indeterminate + label::after{
90+
display: block;
91+
content: "";
92+
width: 10px;
93+
height: 3px;
94+
background-color: #555555;
95+
border-radius: 2px;
96+
margin-left: -16.5px;
97+
margin-top: 7px;
98+
}
99+
77100
&:disabled + label{
78101
opacity: 0.65;
79102

@@ -100,6 +123,13 @@ $check-icon: $fa-var-check !default;
100123
@include checkbox-variant('.abc-checkbox-warning', $brand-warning);
101124
@include checkbox-variant('.abc-checkbox-success', $brand-success);
102125

126+
127+
@include checkbox-variant-indeterminate('.abc-checkbox-primary', $brand-primary);
128+
@include checkbox-variant-indeterminate('.abc-checkbox-danger', $brand-danger);
129+
@include checkbox-variant-indeterminate('.abc-checkbox-info', $brand-info);
130+
@include checkbox-variant-indeterminate('.abc-checkbox-warning', $brand-warning);
131+
@include checkbox-variant-indeterminate('.abc-checkbox-success', $brand-success);
132+
103133
//
104134
// Radios
105135
// --------------------------------------------------

‎demo/build.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,18 @@
5151
font-family: "FontAwesome";
5252
content: "\f00c";
5353
}
54+
55+
.abc-checkbox input[type="checkbox"]:indeterminate + label::after,
56+
.abc-checkbox input[type="radio"]:indeterminate + label::after {
57+
display: block;
58+
content: "";
59+
width: 10px;
60+
height: 3px;
61+
background-color: #555555;
62+
border-radius: 2px;
63+
margin-left: -16.5px;
64+
margin-top: 7px;
65+
}
5466
.abc-checkbox input[type="checkbox"]:disabled + label,
5567
.abc-checkbox input[type="radio"]:disabled + label {
5668
opacity: 0.65;
@@ -117,6 +129,57 @@
117129
color: #fff;
118130
}
119131

132+
.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::before,
133+
.abc-checkbox-primary input[type="radio"]:indeterminate + label::before {
134+
background-color: #337ab7;
135+
border-color: #337ab7;
136+
}
137+
.abc-checkbox-primary input[type="checkbox"]:indeterminate + label::after,
138+
.abc-checkbox-primary input[type="radio"]:indeterminate + label::after {
139+
color: #fff;
140+
}
141+
142+
.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::before,
143+
.abc-checkbox-danger input[type="radio"]:indeterminate + label::before {
144+
background-color: #d9534f;
145+
border-color: #d9534f;
146+
}
147+
.abc-checkbox-danger input[type="checkbox"]:indeterminate + label::after,
148+
.abc-checkbox-danger input[type="radio"]:indeterminate + label::after {
149+
color: #fff;
150+
}
151+
152+
.abc-checkbox-info input[type="checkbox"]:indeterminate + label::before,
153+
.abc-checkbox-info input[type="radio"]:indeterminate + label::before {
154+
background-color: #5bc0de;
155+
border-color: #5bc0de;
156+
}
157+
.abc-checkbox-info input[type="checkbox"]:indeterminate + label::after,
158+
.abc-checkbox-info input[type="radio"]:indeterminate + label::after {
159+
color: #fff;
160+
}
161+
162+
.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::before,
163+
.abc-checkbox-warning input[type="radio"]:indeterminate + label::before {
164+
background-color: #f0ad4e;
165+
border-color: #f0ad4e;
166+
}
167+
.abc-checkbox-warning input[type="checkbox"]:indeterminate + label::after,
168+
.abc-checkbox-warning input[type="radio"]:indeterminate + label::after {
169+
color: #fff;
170+
}
171+
172+
.abc-checkbox-success input[type="checkbox"]:indeterminate + label::before,
173+
.abc-checkbox-success input[type="radio"]:indeterminate + label::before {
174+
background-color: #5cb85c;
175+
border-color: #5cb85c;
176+
}
177+
178+
.abc-checkbox-success input[type="checkbox"]:indeterminate + label::after,
179+
.abc-checkbox-success input[type="radio"]:indeterminate + label::after {
180+
background-color: #fff;
181+
}
182+
120183
.abc-radio {
121184
padding-left: 20px;
122185
}

‎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 abc-checkbox abc-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 abc-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)