fix(slide-toggle): don't show hover ripples on touch devices

crisbeto · crisbeto · commit 5b59fd4101b9 · 2018-10-20T09:51:10.000+02:00
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.
diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss
@@ -214,6 +214,14 @@ $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) {
+    .mat-slide-toggle-bar:hover & {
+      display: none;
+    }
+  }
 }
 
 /** Custom styling to make the slide-toggle usable in high contrast mode. */

Original file line number	Diff line number	Diff line change
`@@ -214,6 +214,14 @@ $mat-slide-toggle-bar-track-width: $mat-slide-toggle-bar-width - $mat-slide-togg`
`214`	`214`	`&, .mat-slide-toggle.mat-disabled .mat-slide-toggle-bar:hover & {`
`215`	`215`	`opacity: 0;`
`216`	`216`	`}`
	`217`	`+`
	`218`	`+ // Hover styles will be displayed after tapping on touch devices.`
	`219`	`+ // Disable the hover styling if the user's device doesn't support hovering.`
	`220`	`+ @media (hover: none) {`
	`221`	`+ .mat-slide-toggle-bar:hover & {`
	`222`	`+ display: none;`
	`223`	`+ }`
	`224`	`+ }`
`217`	`225`	`}`
`218`	`226`
`219`	`227`	`/** Custom styling to make the slide-toggle usable in high contrast mode. */`