114 lines
2.0 KiB
Vue
114 lines
2.0 KiB
Vue
<template>
|
|
<div v-bind:class="{modal: true, open: open}">
|
|
<div class="content">
|
|
<div class="body">
|
|
<slot name="body"></slot>
|
|
</div>
|
|
<div class="actions">
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: ["open"],
|
|
};
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
@keyframes open {
|
|
0% {
|
|
transform: scale(1.2);
|
|
opacity: 0;
|
|
}
|
|
25% {
|
|
transform: scale(0.9);
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.modal-backdrop {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 100; /* Sit on top */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgb(0, 0, 0); /* Fallback color */
|
|
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
|
|
}
|
|
.modal-backdrop .open {
|
|
display: block;
|
|
}
|
|
|
|
.modal {
|
|
background: transparent;
|
|
position: fixed; /* Stay in place */
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
display: none;
|
|
}
|
|
|
|
.modal.open {
|
|
display: block;
|
|
}
|
|
|
|
.modal.open .content {
|
|
width: 600px;
|
|
margin: auto auto;
|
|
animation: open 0.5s;
|
|
animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
}
|
|
|
|
.modal .content {
|
|
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
height 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.16);
|
|
|
|
background: #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
max-width: 80%;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.modal .content .body {
|
|
padding: 25px;
|
|
}
|
|
|
|
.modal .actions {
|
|
background: #3c3c3c;
|
|
border-top: 1px solid #2c2c2c;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
margin-top: 15px;
|
|
padding: 5px;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
.modal .actions button + button {
|
|
margin-left: 15px;
|
|
}
|
|
</style>
|