From 92f0b134fe0b676eb9b82a328a22d0f9f1fb4d1b Mon Sep 17 00:00:00 2001
From: Furkan <84590614+4Furki4@users.noreply.github.com>
Date: Wed, 26 Jul 2023 00:25:02 +0300
Subject: [PATCH] add: animation for underline and text bg

---
 .../daily-word-and-phrase.component.html      |  5 ++--
 .../daily-word-and-phrase.component.scss      | 26 +++++++++++-----
 src/app/partials/_custom-text.scss            | 30 +++++++++++++++++++
 src/app/partials/_index.scss                  |  3 +-
 src/styles.scss                               |  1 +
 5 files changed, 55 insertions(+), 10 deletions(-)
 create mode 100644 src/app/partials/_custom-text.scss

diff --git a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html
index 109f242..5006e35 100644
--- a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html
+++ b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.html
@@ -4,7 +4,7 @@ <h2 class="card__title">Bir Kelime</h2>
         <div class="card--inner">
             <div class="card__word">
                 <h3>
-                    <a (click)="scrollToTop()" [routerLink]="word.madde">{{word.madde}}</a>
+                    <a class="animatedUnderline" (click)="scrollToTop()" [routerLink]="word.madde">{{word.madde}}</a>
                 </h3>
             </div>
             <div class="card__definition">
@@ -19,7 +19,8 @@ <h2 class="card__title">Bir Deyim-Atasözü</h2>
         <div class="card--inner">
             <div class="card__word">
                 <h3>
-                    <a (click)="scrollToTop()" [routerLink]="phrase.madde">{{phrase.madde}}</a>
+                    <a class="animatedUnderline" (click)="scrollToTop()"
+                        [routerLink]="phrase.madde">{{phrase.madde}}</a>
                 </h3>
             </div>
             <div class="card__definition">
diff --git a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss
index ce02f95..1f82488 100644
--- a/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss
+++ b/src/app/components/main/daily-word-and-phrase/daily-word-and-phrase.component.scss
@@ -20,10 +20,12 @@
         padding-bottom: 10px;
         // font-size: clamp(1.5rem, 5vw, 2.5rem);
         font-weight: 700;
-        background: -webkit-linear-gradient(45deg, var(--primary-purple) 10%, var(--main-color)90%);
+        background: -webkit-linear-gradient(45deg, var(--primary-purple) 10%, var(--gradient-purple)90%);
+        background-size: 300% 300%;
         background-clip: text;
         -webkit-text-fill-color: transparent;
         border-bottom: 2px solid var(--main-bg-color);
+        animation: flowingGradient 2.5s ease infinite;
     }
 
     &__definition {
@@ -31,12 +33,8 @@
     }
 
     &__word a {
-        transition: color 0.5s ease-out;
-        color: var(--main-color);
-
-        &:hover {
-            color: var(--primary-purple);
-        }
+        text-decoration: none;
+        color: var(--primary-purple);
     }
 }
 
@@ -44,4 +42,18 @@
     .daily-word-and-phrase {
         grid-template-columns: repeat(2, minmax(300px, 600px));
     }
+}
+
+@keyframes flowingGradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
 }
\ No newline at end of file
diff --git a/src/app/partials/_custom-text.scss b/src/app/partials/_custom-text.scss
new file mode 100644
index 0000000..73a1383
--- /dev/null
+++ b/src/app/partials/_custom-text.scss
@@ -0,0 +1,30 @@
+.animatedUnderline {
+    display: inline-block;
+    cursor: pointer;
+    position: relative;
+
+    &:hover:after {
+        transform-origin: bottom left;
+        transform: scaleX(1);
+    }
+
+    &:after {
+        content: '';
+        transition: transform 0.5s ease-out;
+        width: 100%;
+        height: 3px;
+        background-color: var(--primary-purple);
+        transform-origin: bottom right;
+        transform: scaleX(0);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+// .animatedUnderline {
+//     @apply inline-block cursor-pointer relative after:content-['']
+//     after:transition-transform after:duration-300
+//     after:ease-out after:w-full after:h-[2px] after:absolute after:bottom-0 after:left-0
+//     after:bg-primary-blue after:origin-bottom-right after:scale-x-0 hover:after:scale-x-100 hover:after:origin-bottom-left
+//   }
\ No newline at end of file
diff --git a/src/app/partials/_index.scss b/src/app/partials/_index.scss
index 54fb723..7e89bca 100644
--- a/src/app/partials/_index.scss
+++ b/src/app/partials/_index.scss
@@ -1,2 +1,3 @@
 @forward "./transitions";
-@forward "./font-families";
\ No newline at end of file
+@forward "./font-families";
+@forward "./custom-text";
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 79d8608..24f9bd9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -15,6 +15,7 @@
     --color-scheme: light;
     --secondary-bg-color: #f5f5f5;
     --primary-purple: #a545ef;
+    --gradient-purple: #6900ba;
     --secondary-purple: #dabfff;
     --font-family: sans-serif;
     --primary-shadow-color: var(--grey);