Change to scrollable overlay inner

This commit is contained in:
kPherox 2019-04-24 16:58:25 +09:00
parent 34a38e8d4d
commit dbb9d8065d
No known key found for this signature in database
GPG Key ID: C04751C2BFA2F62D

View File

@ -1,7 +1,7 @@
<template>
<transition name="fade">
<div class="overlay">
<button type="button" class="close-button" @click="closeOverlay">x</button>
<button type="button" class="close-button" @click="closeOverlay">X</button>
<h1>{{ title }}</h1>
<div class="overlay-inner">
<slot/>
@ -40,11 +40,16 @@ export default class BaseOverlay extends Vue {
top: 50%;
transform: translateY(-50%);
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
background-color: var(--bg-color);
}
.overlay-inner {
margin: 1em;
margin: 0.5em;
height: calc(100% - 50px - 1em);
overflow: scroll;
}
.close-button {
position: fixed;
@ -60,7 +65,7 @@ export default class BaseOverlay extends Vue {
width: 50px;
height: 50px;
font-size: 1.8rem;
font-size: 1.5rem;
}
h1 {
top: 0;