From 25eb43f0bda26426aea92b68fdb51c0c1bc3b4db Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 11 Jul 2018 17:05:03 +0200 Subject: [PATCH] fix(expansion-panel): disable hover highlight on non-hover devices (#12080) Disables the expansion panel header's hover if the device doesn't support hovering. This prevents the header from appearing as stuck if the user taps it on a touch device. Relates to #12030. --- src/lib/expansion/_expansion-theme.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/lib/expansion/_expansion-theme.scss b/src/lib/expansion/_expansion-theme.scss index 0a0a713444b..512f36cac6a 100644 --- a/src/lib/expansion/_expansion-theme.scss +++ b/src/lib/expansion/_expansion-theme.scss @@ -25,6 +25,15 @@ } } + // Disable the hover on touch devices since it can appear like it is stuck. We can't use + // `@media (hover)` above, because the desktop support browser support isn't great. + @media (hover: none) { + .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true']) + .mat-expansion-panel-header:hover { + background: mat-color($background, card); + } + } + .mat-expansion-panel-header-title { color: mat-color($foreground, text); }