diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-07 17:46:34 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-07 19:04:20 +0100 |
| commit | 06d0b7bb010f5ac1b3a0c8117b274a700f7266fe (patch) | |
| tree | f572f73068b92bbfffa3b2a9dde3f4fe668cd09e /src/styles | |
| parent | a385d89dfd6312f2255d1343cea3f63375ce5b39 (diff) | |
chore: add main nav link states
Diffstat (limited to 'src/styles')
| -rw-r--r-- | src/styles/base/_animations.scss | 44 |
1 files changed, 44 insertions, 0 deletions
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%; + } +} |