From 531134c2d19469f33c39035a9072462f82400bad Mon Sep 17 00:00:00 2001
From: Daniel Cortes <daniel.cortes.p159@gmail.com>
Date: Sat, 6 Jun 2020 08:20:59 -0400
Subject: [PATCH] Suave animacion para el bottom-border del cover-caption

---
 src/components/Artist.jsx |  2 +-
 src/styles/main.scss      | 35 +++++++++++++++++++++++++----------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx
index 3524e80..5f2181b 100644
--- a/src/components/Artist.jsx
+++ b/src/components/Artist.jsx
@@ -122,7 +122,7 @@ export const ArtistView = (props) => {
     return (
         <div className='artist-view'>
             <Artist artist={artist}/>
-            <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink}/>
+            {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink}/>}
         </div>
     );
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 25323fc..88fb4a8 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -16,6 +16,8 @@
   --font-4: 1.777em;
   --font-5: 1.333em;
   --font-6: 0.75em;
+
+  --line-width: 2px;
 }
 
 /* Modificación básica de elementos*/
@@ -91,7 +93,7 @@ small, .text_small {
 }
 
 button.button {
-  border: 3px solid var(--accent);
+  border: var(--line-width) solid var(--accent);
   background-color: var(--white);
   padding: .5em 1em;
 
@@ -170,11 +172,11 @@ ul.pagination {
 
       &.active {
         color: var(--accent);
-        border-bottom: 2px solid var(--accent);
+        border-bottom: var(--line-width) solid var(--accent);
       }
 
       &:hover:not(.active) {
-        border-bottom: 2px solid var(--accent);
+        border-bottom: var(--line-width) solid var(--accent);
       }
 
       &:focus {
@@ -209,7 +211,7 @@ ul.entity_list {
   flex-direction: column;
 
   li.artist, li.disc, li.song {
-    border-bottom: 2px var(--gray-1) solid;
+    border-bottom: var(--line-width) var(--gray-1) solid;
     margin-bottom: 1em;
 
     .cover-container {
@@ -224,7 +226,7 @@ ul.entity_list {
 
     &:hover {
       background-color: var(--gray-1);
-      border-bottom: 2px var(--accent) solid;
+      border-bottom: var(--line-width) var(--accent) solid;
     }
 
     a {
@@ -281,11 +283,18 @@ ul.entity_list {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    border-bottom: 3px solid var(--accent);
     margin-top: .5em;
     line-height: 1;
     font-weight: 500;
     max-width: 250px;
+
+    &:after {
+      display: block;
+      content: '';
+      border-bottom: solid var(--line-width) var(--accent);
+      transition: width 250ms ease-in-out;
+      width: 0;
+    }
   }
 }
 
@@ -304,7 +313,7 @@ ul.entity_list {
 ul.tabs {
   display: flex;
   align-items: stretch;
-  border-bottom: 2px var(--gray-1) solid;
+  border-bottom: var(--line-width) var(--gray-1) solid;
   margin: 1rem 0;
 
   li.tab {
@@ -313,11 +322,11 @@ ul.tabs {
     cursor: pointer;
 
     &:hover {
-      border-bottom: 2px var(--gray-2) solid;
+      border-bottom: var(--line-width) var(--gray-2) solid;
     }
 
     &.selected {
-      border-bottom: 2px var(--accent) solid;
+      border-bottom: var(--line-width) var(--accent) solid;
     }
   }
 }
@@ -347,7 +356,7 @@ ul.tabs {
       flex-wrap: wrap;
 
       li {
-        border-bottom: 3px solid var(--accent);
+        border-bottom: var(--line-width) solid var(--accent);
         margin-right: 1em;
         line-height: 1;
         margin-bottom: .5em;
@@ -384,6 +393,12 @@ ul.tabs {
         height: 250px;
 
         cursor: pointer;
+
+        &:hover{
+          .cover-caption figcaption:after {
+            width: 100%;
+          }
+        }
       }
 
       margin-bottom: 3em;