Modrinth/components/ui/Popup.vue
Redblueflame af8fc53704
Layout refactor (#150)
* Revert recent commits

* Move things around, and do preparation work for nested page systems.

* Fixed issue on side bar not appearing
2021-03-31 19:09:18 +02:00

49 lines
791 B
Vue

<template>
<div v-if="showPopup">
<div class="popup-overlay" />
<div class="popup-body">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Popup',
props: {
showPopup: {
type: Boolean,
default: false,
},
},
}
</script>
<style lang="scss" scoped>
.popup-overlay {
top: 0;
left: 0;
z-index: 1;
position: fixed;
width: 100%;
height: 100%;
background-color: var(--color-button-bg);
border: none;
opacity: 0.6;
overflow-x: hidden;
}
.popup-body {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
box-shadow: 0 2px 3px 1px var(--color-button-bg);
border-radius: 10px;
max-height: 80%;
overflow-y: auto;
background-color: var(--color-bg);
}
</style>