janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayer.git synced 2026-09-10 14:25:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: modernize popup component

Browse Source
This commit is contained in:
janishutz
2026-08-31 18:20:01 +02:00
parent 5f6e034dac
commit 72dada18eb
1 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/PopupElement.vue
+38 -19
View File
@@ -1,10 +1,9 @@
<template>
<div>
<div :class="'popup-backdrop' + ( isOpen ? '' : ' hidden' )">
<div class="popup-main">
<span v-if="props.showClose" class="material-symbols-outlined close-icon" @click="closePopup()">close</span>
<slot></slot>
</div>
<div :class="['popup', isOpen ? undefined : 'hidden' ]">
<div class="popup-backdrop"></div>
<div class="popup-main">
<i v-if="props.showClose" class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
<slot></slot>
</div>
</div>
</template>
@@ -23,43 +22,63 @@
<style scoped lang="scss">
.popup-backdrop {
.popup {
position: fixed;
width: 100vw;
height: 100vh;
position: fixed;
background-color: var( --overlay-color );
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: all 0.5s;
transform: scale(1);
z-index: 99;
z-index: 1000;
transition-delay: 0;
&.hidden {
transform: scale(0);
.popup-backdrop {
width: 100vw;
height: 100vh;
position: absolute;
background-color: var( --overlay-color );
top: 0;
left: 0;
overflow: hidden;
transition: all 0.5s;
}
>.popup-main {
width: 40%;
height: 50%;
.popup-main {
width: fit-content;
height: fit-content;
background-color: var( --secondary-color );
padding: 2.5%;
border-radius: 20px;
transform: scale(1);
position: relative;
overflow-y: scroll;
display: block;
transition: transform 0.5s ease, opacity 0.5s ease;
>.close-icon {
position: absolute;
top: 20px;
right: 20px;
font-size: 2rem;
font-size: 1.5rem;
cursor: pointer;
user-select: none;
}
}
&.hidden {
top: -100vh;
transition-delay: 0.5s;
.popup-main {
transform: scale(1.25);
opacity: 0;
}
.popup-backdrop {
opacity: 0;
}
}
}
</style>