tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-12 22:17:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

🔷 add new playlist card

Browse Source
This commit is contained in:
geoffrey45 2022-04-08 21:03:38 +03:00
parent 497dc153a0
commit 9afab33b9a
1 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/playlists/NewPlaylistCard.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div class="p-card rounded" id="new-playlist-card">
<div class="gradient rounded"></div>
<div class="plus image p-image"></div>
<div>New Playlist</div>
</div>
</template>
<style lang="scss">
#new-playlist-card {
display: grid;
place-items: center;
background-color: $black;
position: relative;
cursor: pointer;
.gradient {
position: absolute;
width: calc(100% - 2rem);
height: 10rem;
top: 1rem;
background-image: linear-gradient(37deg, $red, $blue);
background-size: 100%;
transition: all .5s ease-in-out;
}
.image {
background-image: url("../../assets/icons/plus.svg");
background-size: 5rem;
z-index: 1;
transition: all .5s ease-in-out;
}
&:hover {
.gradient {
background-size: 30rem;
}
.image {
transform: rotate(270deg);
}
}
}
</style>