From 43b4fecd02a51f9f9d0ca85fcfaaa6828a1dca8e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 13 May 2019 06:45:59 +0200
Subject: [PATCH] fix(checkbox): don't show hover ripples on touch devices
 (#13700)

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/material/checkbox/checkbox.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index 24174c12e37b..87920b573797 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -296,6 +296,16 @@ $_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) {
+    // 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-checkbox-inner-container:hover & {
+      display: none;
+    }
+  }
 }
 
 .mat-checkbox-checkmark {