From df2b371d6672ae63f143ec6ac39591b518c24e0b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 1 Aug 2018 16:14:00 +0200 Subject: [PATCH] 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. --- src/lib/form-field/form-field-legacy.scss | 5 +++++ src/lib/form-field/form-field-standard.scss | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/lib/form-field/form-field-legacy.scss b/src/lib/form-field/form-field-legacy.scss index f0be9791b86..77344f0999f 100644 --- 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 index 4910f3efa45..16a8ce349c9 100644 --- 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