From 06d0b7bb010f5ac1b3a0c8117b274a700f7266fe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 7 Jan 2022 17:46:34 +0100
Subject: chore: add main nav link states

---
 src/styles/base/_animations.scss | 44 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

(limited to 'src/styles/base/_animations.scss')

diff --git a/src/styles/base/_animations.scss b/src/styles/base/_animations.scss
index 903645f..3485729 100644
--- a/src/styles/base/_animations.scss
+++ b/src/styles/base/_animations.scss
@@ -1,3 +1,5 @@
+@use "@styles/abstracts/functions" as fun;
+
 @keyframes pulse {
   from {
     transform: scale(1);
@@ -11,3 +13,45 @@
     transform: scale(1);
   }
 }
+
+@keyframes draw-borders {
+  0% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%;
+  }
+
+  25% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%;
+  }
+
+  50% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 0% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%;
+  }
+
+  75% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 0%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%;
+  }
+
+  100% {
+    background-position: top left, top right, bottom right, bottom left;
+    background-size: 100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%,
+      100% var(--draw-border-width, fun.convert-px(3)),
+      var(--draw-border-width, fun.convert-px(3)) 100%;
+  }
+}
-- 
cgit v1.2.3