Change :hover to only apply to hover media devices, to prevent hover …

…effect from sticking when clicking on elements on mobile. Set tap-highlight:transparent
wikjoh · Oct 6, 2024 · bed0896 · bed0896
1 parent b79916d
commit bed0896
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 26 deletions.
diff --git a/css/main.css b/css/main.css
@@ -82,6 +82,7 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 body, input, button, textarea, select {
@@ -1064,8 +1065,10 @@ a {
   color: var(--color-primary);
   text-decoration: none;
 }
-a:hover {
-  color: var(--color-primary);
+@media (hover: hover) {
+  a:hover {
+    color: var(--color-primary);
+  }
 }
 
 .navbar-link {
@@ -1074,9 +1077,11 @@ a:hover {
   opacity: var(--navlink-opacity);
   transition: var(--transition-default);
 }
-.navbar-link:hover {
-  color: var(--color-primary);
-  text-decoration: none;
+@media (hover: hover) {
+  .navbar-link:hover {
+    color: var(--color-primary);
+    text-decoration: none;
+  }
 }
 
 .btn-primary, .btn-contact, .btn-learn-more, .btn-signin {
@@ -1093,10 +1098,12 @@ a:hover {
 .btn-primary span, .btn-contact span, .btn-learn-more span, .btn-signin span {
   color: white;
 }
-.btn-primary:hover, .btn-contact:hover, .btn-learn-more:hover, .btn-signin:hover {
-  background-color: var(--color-gray-600);
-  color: var(--color-white);
-  text-decoration: none;
+@media (hover: hover) {
+  .btn-primary:hover, .btn-contact:hover, .btn-learn-more:hover, .btn-signin:hover {
+    background-color: var(--color-gray-600);
+    color: var(--color-white);
+    text-decoration: none;
+  }
 }
 
 .btn-signin {
@@ -1149,10 +1156,12 @@ a:hover {
   align-items: center;
   transition: var(--transition-default);
 }
-.btn-dl:hover {
-  background-color: var(--color-gray-600);
-  color: var(--color-white);
-  text-decoration: none;
+@media (hover: hover) {
+  .btn-dl:hover {
+    background-color: var(--color-gray-600);
+    color: var(--color-white);
+    text-decoration: none;
+  }
 }
 
 .btn-chevron, .chevron-discovermore {
@@ -1403,8 +1412,10 @@ a:hover {
 .faq-accordion summary span {
   color: var(--color-heading);
 }
-.faq-accordion summary:hover {
-  background-color: var(--color-faqchevronbg);
+@media (hover: hover) {
+  .faq-accordion summary:hover {
+    background-color: var(--color-faqchevronbg);
+  }
 }
 .faq-accordion p {
   padding-inline: 1.5rem;

diff --git a/css/scss/abstracts/mixins/_mixins-buttons.scss b/css/scss/abstracts/mixins/_mixins-buttons.scss
@@ -1,3 +1,5 @@
+@use './mixins-media' as *;
+
 @mixin btn {
   border-radius: 8px;
   border: none;
@@ -12,9 +14,11 @@
   }
 
   &:hover {
-    background-color: var(--color-gray-600);
-    color: var(--color-white);
-    text-decoration: none;
+    @include hover {
+      background-color: var(--color-gray-600);
+      color: var(--color-white);
+      text-decoration: none;
+    }
   }
 }
 

diff --git a/css/scss/abstracts/mixins/_mixins-media.scss b/css/scss/abstracts/mixins/_mixins-media.scss
@@ -6,6 +6,12 @@
 
 @mixin desktop {
   @media (width >= 1400px) {
-    @content
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    @content;
   }
 }
diff --git a/css/scss/base/_reset.scss b/css/scss/base/_reset.scss
@@ -2,4 +2,5 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
diff --git a/css/scss/components/_buttons.scss b/css/scss/components/_buttons.scss
@@ -60,9 +60,11 @@
   transition: var(--transition-default);
 
   &:hover {
-    background-color: var(--color-gray-600);
-    color: var(--color-white);
-    text-decoration: none;
+    @include hover {
+      background-color: var(--color-gray-600);
+      color: var(--color-white);
+      text-decoration: none;
+    }
   }
 }
 

diff --git a/css/scss/components/_faq.scss b/css/scss/components/_faq.scss
@@ -1,3 +1,5 @@
+@use '../abstracts/' as *;
+
 .faq-accordion {
   --_faq-border: 1px solid var(--color-faqoutline);
   margin-top: 3.5rem;
@@ -38,7 +40,9 @@
     }
 
     &:hover {
-      background-color: var(--color-faqchevronbg);
+      @include hover {
+        background-color: var(--color-faqchevronbg);
+      }
     }
 
     /* Hide marker */

diff --git a/css/scss/components/_links.scss b/css/scss/components/_links.scss
@@ -1,9 +1,13 @@
+@use '../abstracts/' as *;
+
 a {
   color: var(--color-primary);
   text-decoration: none;
 
   &:hover {
-    color: var(--color-primary);
+    @include hover {
+      color: var(--color-primary);
+    }
   }
 }
 
@@ -14,7 +18,9 @@ a {
   transition: var(--transition-default);
 
   &:hover {
-    color: var(--color-primary);
-    text-decoration: none;
+    @include hover {
+      color: var(--color-primary);
+      text-decoration: none;
+    }
   }
 }