Skip to content

Commit

Permalink
fix(select,input): inconsistent disabled text color
Browse files Browse the repository at this point in the history
* Fixes the select and input having different disabled text colors since the color isn't based on a palette. Adds a mixin to ensure that they can't get out of sync in the future.
* Fixes the input having the wrong disabled text color (0.38 alpha for light themes and 0.5 for dark ones). It seems like the colors that were used before were in reference to the underline, not the text (see https://material.io/guidelines/components/text-fields.html#text-fields-states).

Fixes angular#7793.
  • Loading branch information
crisbeto committed Oct 14, 2017
1 parent 9673f63 commit 40a9101
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 15 deletions.
8 changes: 8 additions & 0 deletions src/lib/core/style/_form-common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,11 @@
background-size: 4px 1px;
background-repeat: repeat-x;
}

// Determines the text color of a disabled control since the values are not part of a palette.
@mixin mat-control-disabled-text($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);

color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.38));
}
5 changes: 1 addition & 4 deletions src/lib/input/_input-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,8 @@


@mixin mat-input-theme($theme) {
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);

.mat-input-element:disabled {
color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42));
@include mat-control-disabled-text($theme);
}
}

Expand Down
20 changes: 9 additions & 11 deletions src/lib/select/_select-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
$is-dark-theme: map-get($theme, is-dark);

.mat-select-disabled .mat-select-value,
.mat-select-arrow {
color: mat-color($foreground, secondary-text);
}

.mat-select-content, .mat-select-panel-done-animating {
background: mat-color($background, card);
Expand All @@ -25,6 +19,14 @@
color: mat-color($foreground, text);
}

.mat-select-disabled .mat-select-value {
@include mat-control-disabled-text($theme);
}

.mat-select-arrow {
color: mat-color($foreground, secondary-text);
}

.mat-select-panel {
.mat-option.mat-selected:not(.mat-option-multiple) {
background: mat-color($background, hover, 0.12);
Expand All @@ -51,13 +53,9 @@
}

.mat-select.mat-select-disabled .mat-select-arrow {
color: mat-color($foreground, secondary-text);
@include mat-control-disabled-text($theme);
}
}

.mat-select.mat-select-disabled .mat-select-arrow {
color: mat-color($warn);
}
}

@mixin mat-select-typography($config) {
Expand Down

0 comments on commit 40a9101

Please sign in to comment.