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"
@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">
<slot />
</div>
@ -30,16 +30,31 @@ export default {
</script>
<style>
@import "css/theme.css";
@import "css/style.css";
@import "css/transitions.css";
@import "../css/theme.css";
@import "../css/style.css";
@import "../css/transitions.css";
.modal-container {
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 {
background-color: var(--modal-content-background);
color: var(--modal-content-text);
border-radius: 20px;
overflow-y: auto;
max-height: 75%;
padding: 15px;
z-index: 11;
width: 40%
}
</style>

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

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