Skip to content

Commit 1a67898

Browse files
committed
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.
1 parent 8ba7148 commit 1a67898

File tree

2 files changed

+5
-4
lines changed

2 files changed

+5
-4
lines changed

src/material/core/theming/_palette.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -705,7 +705,7 @@ $dark-theme-background-palette: (
705705
selected-disabled-button: map.get($grey-palette, 800),
706706
disabled-button-toggle: black,
707707
unselected-chip: map.get($grey-palette, 700),
708-
disabled-list-option: black,
708+
disabled-list-option: rgba(white, 0.12),
709709
tooltip: map.get($grey-palette, 700),
710710
);
711711

src/material/list/_list-theme.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,11 @@
2222
.mat-subheader {
2323
color: theming.get-color-from-palette($foreground, secondary-text);
2424
}
25-
}
2625

27-
.mat-list-item-disabled {
28-
background-color: theming.get-color-from-palette($background, disabled-list-option);
26+
.mat-list-item-disabled {
27+
background-color: theming.get-color-from-palette($background, disabled-list-option);
28+
color: theming.get-color-from-palette($foreground, disabled-text);
29+
}
2930
}
3031

3132
.mat-list-option,

0 commit comments

Comments
 (0)