From 1a67898e7e92857733cc364d6f815dc1f524bcfd Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 26 Nov 2020 18:39:18 +0100 Subject: [PATCH] fix(material/list): fix up disabled list item styles 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. --- src/material/core/theming/_palette.scss | 2 +- src/material/list/_list-theme.scss | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/material/core/theming/_palette.scss b/src/material/core/theming/_palette.scss index 10fa42bf4553..e2b5faada05c 100644 --- a/src/material/core/theming/_palette.scss +++ b/src/material/core/theming/_palette.scss @@ -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), ); diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 6cbe89e7fe5a..c3721145362b 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -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,