From f4857d9e552198715b1b19f82c08968d04fa1cc1 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Thu, 20 Feb 2025 11:20:03 -0600
Subject: [PATCH] Only apply hover effects on desktop
---
src/components/FindexGlobalThreatsViz.vue | 39 +++++++++++------------
1 file changed, 19 insertions(+), 20 deletions(-)
diff --git a/src/components/FindexGlobalThreatsViz.vue b/src/components/FindexGlobalThreatsViz.vue
index a429f4a..77a9360 100644
--- a/src/components/FindexGlobalThreatsViz.vue
+++ b/src/components/FindexGlobalThreatsViz.vue
@@ -232,26 +232,25 @@ $exploitation: #B74F49;
text-decoration: none;
color: white;
}
-.category-button:hover {
- color: var(--color-text);
-}
-.category-button:hover.habitat {
- background-color: $habitat-faded;
- color: $habitat-dark;
-}
-.category-button:hover.pollution {
- background-color: $pollution-faded;
- color: $pollution-dark;
-}
-.category-button:hover.climate-and-weather {
- background-color: $climate-and-weather-faded;
- color: $climate-and-weather-dark;
-}
-.category-button:hover.invasive-species {
- color: white;
-}
-.category-button:hover.exploitation {
- color: white;
+@media (hover: hover) {
+ .category-button.habitat:hover {
+ background-color: $habitat-faded;
+ color: $habitat-dark;
+ }
+ .category-button.pollution:hover {
+ background-color: $pollution-faded;
+ color: $pollution-dark;
+ }
+ .category-button.climate-and-weather:hover {
+ background-color: $climate-and-weather-faded;
+ color: $climate-and-weather-dark;
+ }
+ .category-button.invasive-species:hover {
+ color: white;
+ }
+ .category-button.exploitation:hover {
+ color: white;
+ }
}
.habitat {
text-decoration: underline solid $habitat-faded;
--
GitLab