skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(expansion-panel): disable hover highlight on non-hover devices (#12080)

Browse Source 
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.
This commit is contained in:
Kristiyan Kostadinov
2018-07-11 17:05:03 +02:00
committed by Jeremy Elbourn
parent 8e2ff1fbeb
commit 25eb43f0bd
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/expansion/_expansion-theme.scss
+9
View File
@@ -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);
}