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(slide-toggle): don't show hover ripples on touch devices (#13702)

Browse Source 
On touch devices `:hover` styling persists after the user has tapped. These changes hide the persistent ripple if the user isn't able to hover, in order to avoid confusion with the other ripples.

Related to #13675.
This commit is contained in:
Kristiyan Kostadinov
2018-10-23 18:16:04 +02:00
committed by mmalerba
parent efe53a0999
commit e8f8d079fa
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/slide-toggle/slide-toggle.scss
+10
View File
@@ -214,6 +214,16 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg
&, .mat-slide-toggle.mat-disabled .mat-slide-toggle-bar:hover & {
opacity: 0;
}
// Hover styles will be displayed after tapping on touch devices.
// Disable the hover styling if the user's device doesn't support hovering.
@media (hover: none) {
// Note that we only negate the `:hover` rather than setting it to always be `display: none`,
// in order to maintain the focus indication for hybrid touch + keyboard devices.
.mat-slide-toggle-bar:hover & {
display: none;
}
}
}
/** Custom styling to make the slide-toggle usable in high contrast mode. */