New mediaquery to check if hover is available then only style hover when it is. This solves sticky hover styling on mobile.

2020-02-20 13:33:08 +01:00
parent 6ac6a9b039
commit bc6f706e4a
1 changed files with 8 additions and 1 deletions
--- a/src/components/ui/SeasonedButton.vue
+++ b/src/components/ui/SeasonedButton.vue
@@ -46,9 +46,16 @@ export default {
    padding: 6px 20px 5px 20px;
  }

-  body:not(.touch) &:hover, &:focus, &:active, &.active {
+  &:focus, &:active, &.active {
    background: $text-color;
    color: $background-color;
  }
+
+  @media (hover: hover) {
+    &:hover {
+      background: $text-color;
+      color: $background-color;
+    }
+  }
 }
 </style>