From ef14c286986f9451addeada26ab7b51402aa143f Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 6 Sep 2024 08:17:38 +0200 Subject: [PATCH] fix(material/core): option showing double selected indicator in high contrast mode Fixes that `mat-option` was showing a checkmark and a dot for selected options in high contrast mode. The dot is still necessary if the single selection indicator isn't shown. --- src/material/core/option/option.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss index 6d4641a635af..e067624a0d4f 100644 --- a/src/material/core/option/option.scss +++ b/src/material/core/option/option.scss @@ -157,7 +157,7 @@ $_side-padding: 16px; // In single selection mode, the selected option is indicated by changing its // background color, but that doesn't work in high contrast mode. We add an // alternate indication by rendering out a circle. - &.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after { + &.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after { $size: 10px; content: ''; position: absolute; @@ -170,7 +170,7 @@ $_side-padding: 16px; border-radius: $size; } - [dir='rtl'] &.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after { + [dir='rtl'] &.mdc-list-item--selected:not(:has(.mat-mdc-option-pseudo-checkbox))::after { right: auto; left: $_side-padding; }