fix(datepicker): disable calendar hover styles on touch devices (#18876)

Browsers on touch devices show the hover styles on tap which can be confusing for users, because it's the same as the focus styles. These changes disable the hover styles on browsers that don't support hovering.

Author: crisbeto

src/material/datepicker/calendar-body.scss

@@ -90,3 +90,14 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
     text-align: right;
   }
 }
+
+// Disable the hover styles on non-hover devices. Since this is more of a progressive
+// enhancement and not all desktop browsers support this kind of media query, we can't
+// use something like `@media (hover)`.
+@media (hover: none) {
+  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {
+    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
+      background-color: transparent;
+    }
+  }
+}