Skip to content

Commit

Permalink
fix(material/list): fix up disabled list item styles (#18881)
Browse files Browse the repository at this point in the history
Fixes a couple of issues with the list item's disabled styles:
- In dark themes we were setting the disabled styles to black. This looks out of place
since it's not how other components style themselves under dark themes.
- The disabled styles are somewhat similar to the selected styles. These changes also
set the text color to the disabled text color to make it easier to distinguish.

(cherry picked from commit 350ab4d)
  • Loading branch information
crisbeto authored and andrewseguin committed Jan 18, 2022
1 parent a4f6558 commit 439ad2c
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/material/core/theming/_palette.scss
Original file line number Diff line number Diff line change
Expand Up @@ -705,7 +705,7 @@ $dark-theme-background-palette: (
selected-disabled-button: map.get($grey-palette, 800),
disabled-button-toggle: black,
unselected-chip: map.get($grey-palette, 700),
disabled-list-option: black,
disabled-list-option: rgba(white, 0.12),
tooltip: map.get($grey-palette, 700),
);

Expand Down
7 changes: 4 additions & 3 deletions src/material/list/_list-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,11 @@
.mat-subheader {
color: theming.get-color-from-palette($foreground, secondary-text);
}
}

.mat-list-item-disabled {
background-color: theming.get-color-from-palette($background, disabled-list-option);
.mat-list-item-disabled {
background-color: theming.get-color-from-palette($background, disabled-list-option);
color: theming.get-color-from-palette($foreground, disabled-text);
}
}

.mat-list-option,
Expand Down

0 comments on commit 439ad2c

Please sign in to comment.