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.

Author: crisbeto

src/lib/checkbox/checkbox.scss

@@ -276,6 +276,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 {