61 lines
998 B
SCSS
61 lines
998 B
SCSS
.modal {
|
|
background: $background;
|
|
// background: rgba(0, 0, 0, 0.04);
|
|
@include Elevation(24);
|
|
padding: 1rem;
|
|
|
|
margin: auto;
|
|
max-width: 600px;
|
|
min-width: 250px;
|
|
width: calc(100% - 2rem);
|
|
|
|
max-height: calc(100vh - 2rem);
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
|
|
.modal-title {
|
|
font-weight: 600;
|
|
font-size: 1.2rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.modal-content {
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 10rem);
|
|
// margin: auto;
|
|
}
|
|
|
|
.modal-action {
|
|
margin-top: .5rem;
|
|
display: flex;
|
|
|
|
:first-child {
|
|
margin-left: auto;
|
|
}
|
|
|
|
button {
|
|
@extend .btn;
|
|
}
|
|
}
|
|
|
|
transform-origin: center;
|
|
animation: growModalBox .2s linear;
|
|
}
|
|
|
|
@keyframes growModalBox {
|
|
from {
|
|
filter: opacity(0);
|
|
}
|
|
|
|
to {
|
|
filter: opacity(1);
|
|
}
|
|
}
|
|
|
|
.modal-hidden {
|
|
display: none;
|
|
} |