Skip to content

Commit b911453

Browse files
DimaSavchenkoDimaSavchenko
committed
Merge pull request #64 from flatlogic/feature/indeterminate-state
Indeterminate state
2 parents 09d56b2 + e63b57a commit b911453

File tree

7 files changed

+301
-96
lines changed

7 files changed

+301
-96
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+
.checkbox input[type="checkbox"]:indeterminate + label::after,
55+
.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
.checkbox input[type="checkbox"]:disabled + label,
5566
.checkbox input[type="radio"]:disabled + label {
5667
opacity: 0.65;
@@ -117,6 +128,61 @@
117128
color: #fff;
118129
}
119130

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

‎awesome-bootstrap-checkbox.less

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,19 @@
1919
}
2020
}
2121

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

2336
.checkbox{
2437
padding-left: 20px;
@@ -72,6 +85,17 @@
7285
content: @check-icon;
7386
}
7487

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

@@ -98,6 +122,12 @@
98122
.checkbox-variant(checkbox-warning, @brand-warning);
99123
.checkbox-variant(checkbox-success, @brand-success);
100124

125+
.checkbox-variant-indeterminate(checkbox-primary, @brand-primary);
126+
.checkbox-variant-indeterminate(checkbox-danger, @brand-danger);
127+
.checkbox-variant-indeterminate(checkbox-info, @brand-info);
128+
.checkbox-variant-indeterminate(checkbox-warning, @brand-warning);
129+
.checkbox-variant-indeterminate(checkbox-success, @brand-success);
130+
101131
//
102132
// Radios
103133
// --------------------------------------------------

‎awesome-bootstrap-checkbox.scss

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

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

2438
.checkbox{
2539
padding-left: 20px;
@@ -73,6 +87,17 @@ $check-icon: $fa-var-check !default;
7387
content: $check-icon;
7488
}
7589

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

@@ -99,6 +124,13 @@ $check-icon: $fa-var-check !default;
99124
@include checkbox-variant('.checkbox-warning', $brand-warning);
100125
@include checkbox-variant('.checkbox-success', $brand-success);
101126

127+
128+
@include checkbox-variant-indeterminate('.checkbox-primary', $brand-primary);
129+
@include checkbox-variant-indeterminate('.checkbox-danger', $brand-danger);
130+
@include checkbox-variant-indeterminate('.checkbox-info', $brand-info);
131+
@include checkbox-variant-indeterminate('.checkbox-warning', $brand-warning);
132+
@include checkbox-variant-indeterminate('.checkbox-success', $brand-success);
133+
102134
//
103135
// Radios
104136
// --------------------------------------------------

0 commit comments

Comments
 (0)