Skip to content

Commit da7b2d8

Browse files
authored
Merge pull request #619 from vhrmo/disabled-checkbox-styling-fix
fix(_checkboxes): gray out when disabled
2 parents d2f0d3f + 1f12267 commit da7b2d8

File tree

1 file changed

+11
-9
lines changed

1 file changed

+11
-9
lines changed

sass/components/forms/_checkboxes.scss

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,11 @@
4444
}
4545

4646
&:not(:checked):disabled + span:not(.lever):before {
47-
border: none;
48-
background-color: var(--md-sys-color-on-surface);
47+
border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
48+
}
49+
50+
&:disabled + span:not(.lever) {
51+
color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
4952
}
5053

5154
// Focused styles
@@ -74,8 +77,8 @@
7477
}
7578

7679
&:disabled + span:before {
77-
border-right: 2px solid var(--md-sys-color-on-surface);
78-
border-bottom: 2px solid var(--md-sys-color-on-surface);
80+
border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
81+
border-bottom: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
7982
}
8083
}
8184

@@ -97,7 +100,7 @@
97100

98101
// Disabled indeterminate
99102
&:disabled + span:not(.lever):before {
100-
border-right: 2px solid var(--md-sys-color-on-surface);
103+
border-right: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
101104
background-color: transparent;
102105
}
103106
}
@@ -184,16 +187,15 @@
184187
}
185188

186189
&:disabled:not(:checked) + span:not(.lever):after {
187-
border-color: transparent;
188-
background-color: var(--md-sys-color-on-surface);
190+
border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
189191
}
190192

191193
&:disabled:checked + span:not(.lever):before {
192194
background-color: transparent;
193195
}
194196

195197
&:disabled:checked + span:not(.lever):after {
196-
background-color: var(--md-sys-color-on-surface);
197-
border-color: var(--md-sys-color-on-surface);
198+
background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
199+
border: none;
198200
}
199201
}

0 commit comments

Comments
 (0)