diff --git a/src/lib/core/style/_form-common.scss b/src/lib/core/style/_form-common.scss index a46e2e0b9f34..19d0cee24698 100644 --- a/src/lib/core/style/_form-common.scss +++ b/src/lib/core/style/_form-common.scss @@ -1,12 +1,8 @@ - -// Gradient for showing the dashed line when the input is disabled. +// Renders a gradient for showing the dashed line when the input is disabled. // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line // to match the Material Design spec. -$mat-underline-disabled-background-image: - linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%); - -@mixin mat-control-disabled-underline { - background-image: $mat-underline-disabled-background-image; +@mixin mat-control-disabled-underline($color) { + background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%); background-size: 4px 1px; background-repeat: repeat-x; -} \ No newline at end of file +} diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index ed15940be785..73d09e137d00 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -1,5 +1,6 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; +@import '../core/style/form-common'; @import '../core/typography/typography-utils'; @@ -9,14 +10,15 @@ $warn: map-get($theme, warn); $background: map-get($theme, background); $foreground: map-get($theme, foreground); + $is-dark-theme: map-get($theme, is-dark); // Placeholder colors. Required is used for the `*` star shown in the placeholder. - $input-placeholder-color: mat-color($foreground, hint-text); + $input-placeholder-color: mat-color($foreground, secondary-text); $input-floating-placeholder-color: mat-color($primary); $input-required-placeholder-color: mat-color($accent); // Underline colors. - $input-underline-color: mat-color($foreground, divider); + $input-underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42)); $input-underline-color-accent: mat-color($accent); $input-underline-color-warn: mat-color($warn); $input-underline-focused-color: mat-color($primary); @@ -25,6 +27,10 @@ color: $input-placeholder-color; } + .mat-hint { + color: mat-color($foreground, secondary-text); + } + // :focus is applied to the input, but we apply mat-focused to the other elements // that need to listen to it. .mat-focused .mat-input-placeholder { @@ -40,7 +46,7 @@ } .mat-input-element:disabled { - color: mat-color($foreground, disabled-text); + color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42)); } // See mat-input-placeholder-floating mixin in input-container.scss @@ -53,6 +59,10 @@ .mat-input-underline { background-color: $input-underline-color; + + &.mat-disabled { + @include mat-control-disabled-underline($input-underline-color); + } } .mat-input-ripple { diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss index 2c630549db17..7ad002dd239b 100644 --- a/src/lib/input/input-container.scss +++ b/src/lib/input/input-container.scss @@ -1,6 +1,5 @@ @import '../core/style/variables'; @import '../core/style/vendor-prefixes'; -@import '../core/style/form-common'; // Min amount of space between start and end hint. @@ -205,7 +204,6 @@ textarea.mat-input-element { width: 100%; &.mat-disabled { - @include mat-control-disabled-underline(); background-position: 0; background-color: transparent; } diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss index 4033a4716b97..567bf4b73d71 100644 --- a/src/lib/select/_select-theme.scss +++ b/src/lib/select/_select-theme.scss @@ -1,5 +1,6 @@ @import '../core/theming/palette'; @import '../core/theming/theming'; +@import '../core/style/form-common'; @import '../core/typography/typography-utils'; @mixin _mat-select-inner-content-theme($palette) { @@ -20,20 +21,27 @@ $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); + $is-dark-theme: map-get($theme, is-dark); + $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42)); .mat-select-trigger, .mat-select-arrow { - color: mat-color($foreground, hint-text); + color: mat-color($foreground, secondary-text); } .mat-select-underline { - background-color: mat-color($foreground, divider); + background-color: $underline-color; + } + + [aria-disabled='true'] .mat-select-underline { + // Since this is a dotted line, we need to make it slightly darker to get it to stand out. + @include mat-control-disabled-underline($underline-color); } .mat-select-disabled .mat-select-value, .mat-select-arrow, .mat-select-trigger { - color: mat-color($foreground, hint-text); + color: mat-color($foreground, secondary-text); } .mat-select-content, .mat-select-panel-done-animating { diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index d7ca055905d9..fa4d7da7d7be 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -1,6 +1,5 @@ @import '../core/style/menu-common'; @import '../core/style/list-common'; -@import '../core/style/form-common'; @import '../core/style/variables'; @import '../core/style/vendor-prefixes'; @import '../core/a11y/a11y'; @@ -39,7 +38,6 @@ $mat-select-panel-max-height: 256px !default; height: 1px; [aria-disabled='true'] & { - @include mat-control-disabled-underline(); background-color: transparent; background-position: 0 bottom; }