Skip to content

Commit 212bd0b

Browse files
crisbetojelbourn
authored andcommitted
fix(form-field): unable to distinguish disabled form field in high contrast mode (#12445)
Fixes the disabled form field being indistinguishable from enabled ones in high contrast mode, due to the dotted gradient not being rendered.
1 parent 3580fb5 commit 212bd0b

File tree

2 files changed

+10
-0
lines changed

2 files changed

+10
-0
lines changed

src/lib/form-field/form-field-legacy.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,11 @@ $mat-form-field-legacy-underline-height: 1px !default;
5858
&.mat-form-field-disabled .mat-form-field-underline {
5959
background-position: 0;
6060
background-color: transparent;
61+
62+
@include cdk-high-contrast {
63+
border-top-style: dotted;
64+
border-top-width: 2px;
65+
}
6166
}
6267

6368
&.mat-form-field-invalid:not(.mat-focused) .mat-form-field-ripple {

src/lib/form-field/form-field-standard.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ $mat-form-field-standard-padding-top: 0.75em !default;
4242
&.mat-form-field-disabled .mat-form-field-underline {
4343
background-position: 0;
4444
background-color: transparent;
45+
46+
@include cdk-high-contrast {
47+
border-top-style: dotted;
48+
border-top-width: 2px;
49+
}
4550
}
4651

4752
// Note that we need this specific of a selector because we don't want

0 commit comments

Comments
 (0)