skrd/musiclist-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Suave animacion para el bottom-border del cover-caption

Browse Source
This commit is contained in:
Daniel Cortes
2020-06-06 08:20:59 -04:00
parent 7b398aa752
commit 531134c2d1
2 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Artist.jsx
View File

@@ -122,7 +122,7 @@ export const ArtistView = (props) => {
return ( return (
<div className='artist-view'> <div className='artist-view'>
<Artist artist={artist}/> <Artist artist={artist}/>
<Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink}/> {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink}/>}
</div> </div>
); );
} }

35
src/styles/main.scss
View File

@@ -16,6 +16,8 @@
--font-4: 1.777em; --font-4: 1.777em;
--font-5: 1.333em; --font-5: 1.333em;
--font-6: 0.75em; --font-6: 0.75em;
--line-width: 2px;
} }
/* Modificación básica de elementos*/ /* Modificación básica de elementos*/
@@ -91,7 +93,7 @@ small, .text_small {
} }
button.button { button.button {
border: 3px solid var(--accent); border: var(--line-width) solid var(--accent);
background-color: var(--white); background-color: var(--white);
padding: .5em 1em; padding: .5em 1em;
@@ -170,11 +172,11 @@ ul.pagination {
&.active { &.active {
color: var(--accent); color: var(--accent);
border-bottom: 2px solid var(--accent); border-bottom: var(--line-width) solid var(--accent);
} }
&:hover:not(.active) { &:hover:not(.active) {
border-bottom: 2px solid var(--accent); border-bottom: var(--line-width) solid var(--accent);
} }
&:focus { &:focus {
@@ -209,7 +211,7 @@ ul.entity_list {
flex-direction: column; flex-direction: column;
li.artist, li.disc, li.song { 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; margin-bottom: 1em;
.cover-container { .cover-container {
@@ -224,7 +226,7 @@ ul.entity_list {
&:hover { &:hover {
background-color: var(--gray-1); background-color: var(--gray-1);
border-bottom: 2px var(--accent) solid; border-bottom: var(--line-width) var(--accent) solid;
} }
a { a {
@@ -281,11 +283,18 @@ ul.entity_list {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
border-bottom: 3px solid var(--accent);
margin-top: .5em; margin-top: .5em;
line-height: 1; line-height: 1;
font-weight: 500; font-weight: 500;
max-width: 250px; 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 { ul.tabs {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
border-bottom: 2px var(--gray-1) solid; border-bottom: var(--line-width) var(--gray-1) solid;
margin: 1rem 0; margin: 1rem 0;
li.tab { li.tab {
@@ -313,11 +322,11 @@ ul.tabs {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
border-bottom: 2px var(--gray-2) solid; border-bottom: var(--line-width) var(--gray-2) solid;
} }
&.selected { &.selected {
border-bottom: 2px var(--accent) solid; border-bottom: var(--line-width) var(--accent) solid;
} }
} }
} }
@@ -347,7 +356,7 @@ ul.tabs {
flex-wrap: wrap; flex-wrap: wrap;
li { li {
border-bottom: 3px solid var(--accent); border-bottom: var(--line-width) solid var(--accent);
margin-right: 1em; margin-right: 1em;
line-height: 1; line-height: 1;
margin-bottom: .5em; margin-bottom: .5em;
@@ -384,6 +393,12 @@ ul.tabs {
height: 250px; height: 250px;
cursor: pointer; cursor: pointer;
&:hover{
.cover-caption figcaption:after {
width: 100%;
}
}
} }
margin-bottom: 3em; margin-bottom: 3em;