From 1c24583fa7a0eb2ec4bdb2149d17ba0aaf1c3243 Mon Sep 17 00:00:00 2001
From: Alexander Schranz <alexander@sulu.io>
Date: Thu, 21 Mar 2019 15:30:30 +0100
Subject: [PATCH] Add animated link scss mixin

---
 scss/tools/_animation-link.scss | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 scss/tools/_animation-link.scss

diff --git a/scss/tools/_animation-link.scss b/scss/tools/_animation-link.scss
new file mode 100644
index 0000000..855bfca
--- /dev/null
+++ b/scss/tools/_animation-link.scss
@@ -0,0 +1,25 @@
+$animatedLinkColor: currentColor !default;
+$animatedLinkSize: 2px !default;
+$animatedLinkSpeed: 0.25s !default;
+
+@mixin animatedLink($color: $animatedLinkColor, $size: $animatedLinkSize) {
+    &:hover,
+    &:focus {
+        animation-duration: $animatedLinkSpeed;
+        animation-name: linkHoverAnimation;
+        background-image: linear-gradient($color, $color);
+        background-position: left bottom;
+        background-repeat: no-repeat;
+        background-size: 100% $size;
+    }
+}
+
+@keyframes linkHoverAnimation {
+    0% {
+        background-size: 0 $animatedLinkSize;
+    }
+
+    100% {
+        background-size: 100% $animatedLinkSize;
+    }
+}