Disable hover on mobile for ModeSelectButton.

GitOrigin-RevId: 100021e9888e6f822b3abeebe5a9f9e19b983f84
nkzw-tech · Feb 26, 2025 · 0fa2e29 · 0fa2e29
1 parent 078ecbf
commit 0fa2e29
Showing 1 changed file with 27 additions and 19 deletions.
diff --git a/hera/ui/ModeSelectButton.tsx b/hera/ui/ModeSelectButton.tsx
@@ -165,8 +165,28 @@ const style = css`
   }
 
   &:not(.disabled):not(.scale-disabled) {
-    &.hover,
-    &:hover,
+    @media (hover: hover) {
+      &.hover,
+      &:hover {
+        color: ${applyVar('text-color-bright')};
+        transform: scaleX(1.05) scaleY(1.02);
+      }
+
+      &.hover:after,
+      &:hover:after {
+        opacity: 1;
+
+        height: 340%;
+        ${Breakpoints.xs} {
+          height: 280%;
+        }
+
+        ${Breakpoints.sm} {
+          height: 300%;
+        }
+      }
+    }
+
     &:active {
       color: ${applyVar('text-color-bright')};
       transform: scaleX(1.05) scaleY(1.02);
@@ -177,20 +197,6 @@ const style = css`
       transform: scaleX(0.95) scaleY(0.98);
     }
 
-    &.hover:after,
-    &:hover:after {
-      opacity: 1;
-
-      height: 340%;
-      ${Breakpoints.xs} {
-        height: 280%;
-      }
-
-      ${Breakpoints.sm} {
-        height: 300%;
-      }
-    }
-
     &.active:after,
     &:active:after {
       height: 400%;
@@ -276,9 +282,11 @@ const wideStyle = css`
   text-wrap: balance;
 
   &:not(.disabled):not(.scale-disabled) {
-    &.hover:after,
-    &:hover:after {
-      height: 14em;
+    @media (hover: hover) {
+      &.hover:after,
+      &:hover:after {
+        height: 14em;
+      }
     }
 
     &.active:after,