fix(form-field): unable to distinguish disabled form field in high co…

…ntrast mode (#12445) Fixes the disabled form field being indistinguishable from enabled ones in high contrast mode, due to the dotted gradient not being rendered.
angular · Aug 1, 2018 · df2b371 · df2b371
1 parent db8f83d
commit df2b371
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/lib/form-field/form-field-legacy.scss b/src/lib/form-field/form-field-legacy.scss
@@ -58,6 +58,11 @@ $mat-form-field-legacy-underline-height: 1px !default;
   &.mat-form-field-disabled .mat-form-field-underline {
     background-position: 0;
     background-color: transparent;
+
+    @include cdk-high-contrast {
+      border-top-style: dotted;
+      border-top-width: 2px;
+    }
   }
 
   &.mat-form-field-invalid:not(.mat-focused) .mat-form-field-ripple {

diff --git a/src/lib/form-field/form-field-standard.scss b/src/lib/form-field/form-field-standard.scss
@@ -42,6 +42,11 @@ $mat-form-field-standard-padding-top: 0.75em !default;
   &.mat-form-field-disabled .mat-form-field-underline {
     background-position: 0;
     background-color: transparent;
+
+    @include cdk-high-contrast {
+      border-top-style: dotted;
+      border-top-width: 2px;
+    }
   }
 
   // Note that we need this specific of a selector because we don't want