78 lines
1.7 KiB
Vue
78 lines
1.7 KiB
Vue
<template>
|
|
<div class="modal__backdrop">
|
|
<div class="modal">
|
|
<div class="modal__header">
|
|
<slot name="header"></slot>
|
|
</div>
|
|
<div class="modal__body">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="modal__footer">
|
|
<slot name="footer">
|
|
<!--<a class="button button--active">Speichern</a>-->
|
|
<a class="button" v-on:click="hideModal">Abbrechen</a>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
hideModal() {
|
|
this.$store.dispatch('hideModal');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
.modal {
|
|
align-self: center;
|
|
justify-self: center;
|
|
width: 700px;
|
|
height: 80vh;
|
|
background-color: $color-white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
|
|
border: 1px solid $color-lightgrey;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr 65px;
|
|
grid-template-areas: "header" "body" "footer";
|
|
position: relative;
|
|
|
|
&__backdrop {
|
|
display: grid;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: rgba($color-white, 0.8);
|
|
z-index: 90;
|
|
}
|
|
|
|
&__header {
|
|
grid-area: header;
|
|
padding: 10px $modal-lateral-padding;
|
|
border-bottom: 1px solid $color-lightgrey;
|
|
}
|
|
|
|
&__body {
|
|
grid-area: body;
|
|
padding: 10px $modal-lateral-padding;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&__footer {
|
|
grid-area: footer;
|
|
border-top: 1px solid $color-lightgrey;
|
|
padding: 16px $modal-lateral-padding;
|
|
}
|
|
}
|
|
</style>
|