fix(navigation): remove tap highligt color

MrMissx · Sep 14, 2023 · e4cd8e5 · e4cd8e5
1 parent 582b624
commit e4cd8e5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,9 +1,9 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");
+
 html {
   scroll-behavior: smooth;
 }
@@ -19,6 +19,19 @@ html {
     @apply text-zinc-900;
     @apply dark:text-zinc-100;
   }
+
+  .nav-button {
+    -webkit-tap-highlight-color: transparent;
+    @apply hover:scale-125;
+    @apply transform;
+    @apply transition-all;
+    @apply duration-300;
+    @apply ease-in-out;
+    @apply text-zinc-500;
+    @apply dark:text-zinc-400;
+    @apply hover:text-zinc-700;
+    @apply hover:dark:text-zinc-200;
+  }
 }
 
 ::-webkit-scrollbar {

diff --git a/src/lib/components/HelperButton.svelte b/src/lib/components/HelperButton.svelte
@@ -31,7 +31,7 @@
 <button
   use:clickOutside={() => (helperActive = false)}
   on:click|preventDefault={() => (helperActive = !helperActive)}
-  class="fixed bottom-5 right-5 text-zinc-500 dark:text-zinc-400 hover:scale-125 transform transition-all duration-200 ease-in-out"
+  class="fixed bottom-5 right-5 nav-button"
   aria-label="more info"
 >
   <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 24 24">

diff --git a/src/lib/components/NavigationButton.svelte b/src/lib/components/NavigationButton.svelte
@@ -45,7 +45,7 @@
     <button
       disabled={navButtonDisabled[0]}
       id="prev"
-      class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 hover:dark:text-zinc-200 w-7 h-w-7 hover:scale-125 transform transition-all duration-300 ease-in-out"
+      class="w-7 h-w-7 nav-button"
       aria-label="back to top"
       on:click={() => scrollTo("prev")}
     >
@@ -54,7 +54,7 @@
     <button
       disabled={navButtonDisabled[1]}
       id="next"
-      class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 hover:dark:text-zinc-200 w-7 h-w-7 hover:scale-125 transform transition-all duration-300 ease-in-out"
+      class="w-7 h-w-7 nav-button"
       aria-label="back to top"
       on:click={() => scrollTo("next")}
     >

diff --git a/src/lib/components/ScrollHome.svelte b/src/lib/components/ScrollHome.svelte
@@ -15,7 +15,7 @@
 
 <button
   class:hidden
-  class="fixed z-50 left-5 bottom-8 w-8 md:w-10 h-8 md:h-10 text-zinc-500 dark:text-zinc-400 hover:scale-125 transform transition-all duration-300 ease-in-out"
+  class="fixed z-50 left-5 bottom-5 w-8 md:w-10 h-8 md:h-10 nav-button"
   aria-label="back to top"
   on:click={redirectHome}
 >