fix: make hover not stick on mobile

scriptcoded · scriptcoded · commit b58a79ade7ac · 2026-01-11T12:42:52.000+01:00
diff --git a/.changeset/smooth-actors-serve.md b/.changeset/smooth-actors-serve.md
@@ -0,0 +1,5 @@
+---
+"@scouterna/ui-webc": patch
+---
+
+Make hover not stick on mobile.
diff --git a/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.css b/packages/ui-webc/src/components/bottom-bar-item/bottom-bar-item.css
@@ -15,8 +15,10 @@
   cursor: pointer;
 }
 
-.button:hover {
-  background-color: var(--color-neutral-50);
+@media (hover: hover) {
+  .button:hover {
+    background-color: var(--color-neutral-50);
+  }
 }
 
 .button.active {
diff --git a/packages/ui-webc/src/components/button/button.css b/packages/ui-webc/src/components/button/button.css
@@ -64,8 +64,10 @@ scout-button {
     background-color: var(--color-background-brand-base);
     color: var(--color-text-brand-inverse);
 
-    &:hover {
-      background-color: var(--color-background-brand-hovered);
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-background-brand-hovered);
+      }
     }
 
     &:active {
@@ -78,8 +80,10 @@ scout-button {
     border-color: var(--color-background-brand-subtle-base);
     color: var(--color-text-brand-base);
 
-    &:hover {
-      background-color: var(--color-background-brand-subtle-hovered);
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-background-brand-subtle-hovered);
+      }
     }
 
     &:active {
@@ -92,8 +96,10 @@ scout-button {
     border-color: transparent;
     color: var(--color-text-brand-base);
 
-    &:hover {
-      background-color: var(--color-background-brand-subtle-hovered);
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-background-brand-subtle-hovered);
+      }
     }
 
     &:active {
@@ -105,8 +111,10 @@ scout-button {
     background-color: var(--color-background-caution-bold-base);
     color: var(--color-text-caution-bold-base);
 
-    &:hover {
-      background-color: var(--color-background-caution-bold-hovered);
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-background-caution-bold-hovered);
+      }
     }
 
     &:active {
@@ -118,8 +126,10 @@ scout-button {
     background-color: var(--color-background-danger-bold-base);
     color: var(--color-text-danger-bold-base);
 
-    &:hover {
-      background-color: var(--color-background-danger-bold-hovered);
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-background-danger-bold-hovered);
+      }
     }
 
     &:active {
diff --git a/packages/ui-webc/src/components/checkbox/checkbox.css b/packages/ui-webc/src/components/checkbox/checkbox.css
@@ -12,20 +12,25 @@
   position: relative;
 }
 
-.checkbox:hover {
-  border: 2px solid var(--color-gray-400);
-  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);
-  cursor: pointer;
+@media (hover: hover) {
+  .checkbox:hover {
+    border: 2px solid var(--color-gray-400);
+    box-shadow: inset 0px 0px 5px 5px
+      var(--color-background-brand-subtle-hovered);
+    cursor: pointer;
+  }
 }
 
 .checkbox:active {
   background-color: var(--color-background-brand-subtle-pressed);
 }
 
-.checkbox:checked:hover {
-  background-color: var(--color-background-brand-hovered);
-  border-color: var(--color-background-brand-hovered);
-  box-shadow: none;
+@media (hover: hover) {
+  .checkbox:checked:hover {
+    background-color: var(--color-background-brand-hovered);
+    border-color: var(--color-background-brand-hovered);
+    box-shadow: none;
+  }
 }
 
 .checkbox:checked {
diff --git a/packages/ui-webc/src/components/link/link.css b/packages/ui-webc/src/components/link/link.css
@@ -7,11 +7,15 @@ button {
   color: var(--color-text-brand-base);
   text-decoration: none;
 }
-a:hover,
-button:hover {
-  text-decoration: underline;
-  color: var(--color-background-brand-hover);
+
+@media (hover: hover) {
+  a:hover,
+  button:hover {
+    text-decoration: underline;
+    color: var(--color-background-brand-hover);
+  }
 }
+
 a:active,
 button:active {
   color: var(--color-background-brand-pressed);
diff --git a/packages/ui-webc/src/components/list-view-item/list-view-item.css b/packages/ui-webc/src/components/list-view-item/list-view-item.css
@@ -16,8 +16,10 @@
   text-decoration: none;
 }
 
-.button:hover {
-  background-color: var(--color-background-brand-subtle-hovered);
+@media (hover: hover) {
+  .button:hover {
+    background-color: var(--color-background-brand-subtle-hovered);
+  }
 }
 
 .prefix-icon,
diff --git a/packages/ui-webc/src/components/radio-button/radio-button.css b/packages/ui-webc/src/components/radio-button/radio-button.css
@@ -12,23 +12,28 @@
   position: relative;
 }
 
-.radio:hover {
-  border: 2px solid var(--color-gray-400);
-  box-shadow: inset 0px 0px 5px 5px var(--color-background-brand-subtle-hovered);
-  cursor: pointer;
+@media (hover: hover) {
+  .radio:hover {
+    border: 2px solid var(--color-gray-400);
+    box-shadow: inset 0px 0px 5px 5px
+      var(--color-background-brand-subtle-hovered);
+    cursor: pointer;
+  }
 }
 
 .radio:active {
   background-color: var(--color-background-brand-subtle-pressed);
 }
 
-.radio:checked:hover {
-  border-color: var(--color-background-brand-hovered);
-  box-shadow: none;
-}
+@media (hover: hover) {
+  .radio:checked:hover {
+    border-color: var(--color-background-brand-hovered);
+    box-shadow: none;
+  }
 
-.radio:checked:hover::before {
-  background-color: var(--color-background-brand-hovered);
+  .radio:checked:hover::before {
+    background-color: var(--color-background-brand-hovered);
+  }
 }
 
 .radio:checked {
diff --git a/packages/ui-webc/src/components/select/select.css b/packages/ui-webc/src/components/select/select.css
@@ -19,8 +19,10 @@
   cursor: pointer;
 }
 
-.select:hover:not(:disabled) {
-  border-color: var(--color-gray-400);
+@media (hover: hover) {
+  .select:hover:not(:disabled) {
+    border-color: var(--color-gray-400);
+  }
 }
 
 .select:focus {
diff --git a/packages/ui-webc/src/components/switch/switch.css b/packages/ui-webc/src/components/switch/switch.css
@@ -18,10 +18,12 @@
   --switch-ball-size: calc(var(--spacing-5) - var(--switch-ball-padding) * 2);
 }
 
-.switch:hover {
-  transition-property: none;
-  border-color: var(--color-gray-400);
-  background-color: var(--color-background-brand-subtle-hovered);
+@media (hover: hover) {
+  .switch:hover {
+    transition-property: none;
+    border-color: var(--color-gray-400);
+    background-color: var(--color-background-brand-subtle-hovered);
+  }
 }
 
 .switch:active {
@@ -32,8 +34,10 @@
   border-color: var(--color-background-brand-base);
 }
 
-.switch:hover::before {
-  background-color: var(--color-gray-400);
+@media (hover: hover) {
+  .switch:hover::before {
+    background-color: var(--color-gray-400);
+  }
 }
 
 .switch::before {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@scouterna/ui-webc": patch
 +---
++
 +Make hover not stick on mobile.
Original file line number	Diff line number	Diff line change
`@@ -15,8 +15,10 @@`
`15`	`15`	`cursor: pointer;`
`16`	`16`	`}`
`17`	`17`
`18`		`-.button:hover {`
`19`		`- background-color: var(--color-neutral-50);`
	`18`	`+@media (hover: hover) {`
	`19`	`+ .button:hover {`
	`20`	`+ background-color: var(--color-neutral-50);`
	`21`	`+ }`
`20`	`22`	`}`
`21`	`23`
`22`	`24`	`.button.active {`
Original file line number	Diff line number	Diff line change
`@@ -16,8 +16,10 @@`
`16`	`16`	`text-decoration: none;`
`17`	`17`	`}`
`18`	`18`
`19`		`-.button:hover {`
`20`		`- background-color: var(--color-background-brand-subtle-hovered);`
	`19`	`+@media (hover: hover) {`
	`20`	`+ .button:hover {`
	`21`	`+ background-color: var(--color-background-brand-subtle-hovered);`
	`22`	`+ }`
`21`	`23`	`}`
`22`	`24`
`23`	`25`	`.prefix-icon,`
Original file line number	Diff line number	Diff line change
`@@ -19,8 +19,10 @@`
`19`	`19`	`cursor: pointer;`
`20`	`20`	`}`
`21`	`21`
`22`		`-.select:hover:not(:disabled) {`
`23`		`- border-color: var(--color-gray-400);`
	`22`	`+@media (hover: hover) {`
	`23`	`+ .select:hover:not(:disabled) {`
	`24`	`+ border-color: var(--color-gray-400);`
	`25`	`+ }`
`24`	`26`	`}`
`25`	`27`
`26`	`28`	`.select:focus {`