From 60463a1889b2ff01a30288d61656217b3aa88e58 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 20 Oct 2018 12:18:04 +0200
Subject: [PATCH] fix(radio): 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.

Related to #13675.
---
 src/lib/radio/radio.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index 0d42d63d35ab..02d50f4569c0 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -151,6 +151,16 @@ $mat-radio-ripple-radius: 20px;
   &, .mat-radio-disabled .mat-radio-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-radio-container:hover & {
+      display: none;
+    }
+  }
 }
 
 .mat-radio-input {