Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Get the Modal animation component functioning properly

Browse source
This commit is contained in:
Oliver-Akins 2020-12-08 14:30:56 -07:00
parent f7a2c2a7bb
commit c543f4f717
2 changed files with 20 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/src/components/Modal.vue
View file

@ -5,7 +5,7 @@
class="modal-container" class="modal-container"
@click.self.stop="content = false" @click.self.stop="content = false"
> >
<transition name="burst" @after-leave="$emit('close')"> <transition name="burst" @after-leave="$emit('closed')">
<div v-if="content" class="modal"> <div v-if="content" class="modal">
<slot /> <slot />
</div> </div>
@ -30,16 +30,31 @@ export default {
</script> </script>
<style> <style>
@import "css/theme.css"; @import "../css/theme.css";
@import "css/style.css"; @import "../css/style.css";
@import "css/transitions.css"; @import "../css/transitions.css";
.modal-container { .modal-container {
background-color: var(--modal-background-blur); background-color: var(--modal-background-blur);
justify-content: center;
align-items: center;
position: fixed;
display: flex;
height: 100vh;
width: 100vw;
z-index: 10;
left: 0;
top: 0;
} }
.modal { .modal {
background-color: var(--modal-content-background); background-color: var(--modal-content-background);
color: var(--modal-content-text); color: var(--modal-content-text);
border-radius: 20px;
overflow-y: auto;
max-height: 75%;
padding: 15px;
z-index: 11;
width: 40%
} }
</style> </style>

2
web/src/css/theme.css
View file

@ -49,7 +49,7 @@
--eye-colour: #000000; --eye-colour: #000000;
/* The colours for the modals */ /* The colours for the modals */
--modal-background-blur: #000; --modal-background-blur: #000000a6;
--modal-content-background: var(--background1); --modal-content-background: var(--background1);
--modal-content-text: var(--background1-text); --modal-content-text: var(--background1-text);