fix(material-experimental/mdc-list): don't override focus styles with…

… hover (#23840) Fixes that the `:hover` styles were overriding the `:focus` and selected effects of the MDC-based `mat-list-option`.
angular · Nov 15, 2021 · edc2aa3 · edc2aa3
1 parent 8cdd3d7
commit edc2aa3
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/src/material-experimental/mdc-list/_interactive-list-theme.scss
@@ -26,8 +26,8 @@
 
   // MDC still shows focus/selected state if the item is disabled.
   // Just hover styles should not show up for disabled items.
-  .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) {
-    &:hover::before {
+  .mat-mdc-list-item-interactive:not(.mdc-list-item--disabled):not(.mdc-list-item--selected) {
+    &:not(:focus):hover::before {
       opacity: mdc-ripple.states-opacity($active-base-color, hover);
     }
   }