From 31d456460ecdb83beaef150d1ead6f3976f325b2 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 20 Oct 2018 09:47:12 +0200
Subject: [PATCH] fix(checkbox): don't show hover ripples on touch devices

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.

Fixes #13675.
---
 src/lib/checkbox/checkbox.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index b1cb567b1869..8ddf52671e50 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -276,6 +276,14 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   &, .mat-checkbox.mat-disabled .mat-checkbox-inner-container: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-checkbox-inner-container:hover & {
+      display: none;
+    }
+  }
 }
 
 .mat-checkbox-checkmark {