Skip to content

Commit 8a1cf8c

Browse files
authored
fix(material/checkbox): disabled state not distinguishable in high contrast mode (#25788)
Fixes that disabled checkboxes aren't distinguishable from enabled ones in high contrast mode. I also fixed an issue where the checkmark wasn't visible, but I suspect that it's only a problem when emulating on a Chromium browser.
1 parent 87eb708 commit 8a1cf8c

File tree

1 file changed

+12
-0
lines changed

1 file changed

+12
-0
lines changed

src/material/checkbox/checkbox.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '@angular/cdk';
12
@use '@material/checkbox/checkbox' as mdc-checkbox;
23
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
34
@use '@material/form-field' as mdc-form-field;
@@ -98,6 +99,17 @@
9899
}
99100
}
100101

102+
@include cdk.high-contrast(active, off) {
103+
&.mat-mdc-checkbox-disabled {
104+
opacity: 0.5;
105+
}
106+
107+
.mdc-checkbox__checkmark {
108+
--mdc-checkbox-selected-checkmark-color: CanvasText;
109+
--mdc-checkbox-disabled-selected-checkmark-color: CanvasText;
110+
}
111+
}
112+
101113
@include _ripple-base-styles();
102114
}
103115

0 commit comments

Comments
 (0)