fix(material/datepicker): hover styles not disabled on touch devices (#…

…23915)

When we introduced the date range picker, some selectors in the calendar became much more specific which ended up overriding the styles that disable the hover indication on touch devices.

Now that we don't need to worry about IE, these changes use the `hover` media query to enable hovering only on non-touch devices instead.

Fixes #23904.

(cherry picked from commit 106b8a7)

src/material/datepicker/_datepicker-theme.scss

@@ -42,13 +42,14 @@ $calendar-weekday-table-font-size: 11px !default;
                 theming.get-color-from-palette($palette, default-contrast);
   }
 
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
   .cdk-keyboard-focused .mat-calendar-body-active,
   .cdk-program-focused .mat-calendar-body-active {
-    & > .mat-calendar-body-cell-content {
-      @include _unselected-cell {
-        background-color: theming.get-color-from-palette($palette, 0.3);
-      }
+    @include _highlighted-cell($palette);
+  }
+
+  @media (hover: hover) {
+    .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {
+      @include _highlighted-cell($palette);
     }
   }
 }
@@ -60,6 +61,15 @@ $calendar-weekday-table-font-size: 11px !default;
   }
 }
 
+// Styles for a highlighted calendar cell (e.g. hovered or focused).
+@mixin _highlighted-cell($palette) {
+  & > .mat-calendar-body-cell-content {
+    @include _unselected-cell {
+      background-color: theming.get-color-from-palette($palette, 0.3);
+    }
+  }
+}
+
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $foreground: map.get($config, foreground);

src/material/datepicker/calendar-body.scss

@@ -274,14 +274,3 @@ $calendar-range-end-body-cell-size:
     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;
-    }
-  }
-}