style: animate crumbs to signify ui

agrc · Mar 21, 2024 · ec4b092 · ec4b092
1 parent ffeab7e
commit ec4b092
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/components/data/BreadCrumbs.astro b/src/components/data/BreadCrumbs.astro
@@ -27,7 +27,7 @@ const { product, category, class: className, gradients = 'from-white dark:from-p
   >
   </div>
   <ol
-    class="flex w-full gap-2 overflow-x-auto [-ms-overflow-style:-ms-autohiding-scrollbar] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+    class="animate-shake flex w-full gap-2 overflow-x-auto anim-duration-[1000ms] anim-delay-[1000ms] repeat-[2] [-ms-overflow-style:-ms-autohiding-scrollbar] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
   >
     <li class="relative flex shrink-0 items-center">
       <a

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -18,6 +18,18 @@ export default {
         150: '150px minmax(0, 1fr)',
         '3-150': '150px repeat(2, minmax(0, 1fr))',
       },
+      animation: {
+        shake: 'shake',
+      },
+      keyframes: {
+        shake: {
+          '0%': { transform: 'translateX(0)' },
+          '25%': { transform: 'translateX(.6rem)' },
+          '50%': { transform: 'translateX(-.6rem)' },
+          '75%': { transform: 'translateX(.6rem)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+      },
     },
   },
   plugins: [
-Original file line number
+Diff line change
@@ Expand Up @@
       >
       </div>
       <ol
-        class="flex w-full gap-2 overflow-x-auto [-ms-overflow-style:-ms-autohiding-scrollbar] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        class="animate-shake flex w-full gap-2 overflow-x-auto anim-duration-[1000ms] anim-delay-[1000ms] repeat-[2] [-ms-overflow-style:-ms-autohiding-scrollbar] [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       >
         <li class="relative flex shrink-0 items-center">
           <a
@@ Expand Down @@