101 lines
1.7 KiB
SCSS
101 lines
1.7 KiB
SCSS
.modal-mask {
|
|
|
|
@include flex;
|
|
@include flex-align(center, middle);
|
|
background-color: $color-white;
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 9990;
|
|
}
|
|
|
|
.modal--close {
|
|
border-radius: 50%;
|
|
color: $color-heading;
|
|
cursor: pointer;
|
|
font-size: $font-size-big;
|
|
line-height: $space-normal;
|
|
padding: $space-normal $space-two;
|
|
position: absolute;
|
|
right: $space-large;
|
|
top: $space-large;
|
|
|
|
&:hover {
|
|
background: $color-background;
|
|
}
|
|
}
|
|
|
|
|
|
.page-top-bar {
|
|
@include padding($zero $space-two);
|
|
|
|
img {
|
|
max-height: 6rem;
|
|
}
|
|
}
|
|
|
|
.modal-container {
|
|
background-color: $color-white;
|
|
border-radius: $space-small;
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
position: relative;
|
|
width: 60rem;
|
|
|
|
|
|
.content-box {
|
|
@include padding($zero);
|
|
height: auto;
|
|
}
|
|
|
|
|
|
h2 {
|
|
font-size: $font-size-medium;
|
|
color: $color-woot;
|
|
font-weight: $font-weight-normal;
|
|
@include padding($space-small $zero $zero $zero);
|
|
}
|
|
|
|
p {
|
|
font-size: $font-size-small;
|
|
@include padding($zero);
|
|
@include margin($zero);
|
|
}
|
|
|
|
form {
|
|
align-self: center;
|
|
@include padding($space-two);
|
|
a {
|
|
@include padding($space-normal);
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
@include flex;
|
|
@include flex-align($x: justify, $y: middle);
|
|
@include padding($space-small $zero $space-medium $zero);
|
|
button {
|
|
font-size: $font-size-small;
|
|
}
|
|
}
|
|
|
|
.delete-item {
|
|
@include padding($space-normal);
|
|
button {
|
|
@include margin($zero);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.modal-enter, .modal-leave {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-enter .modal-container,
|
|
.modal-leave .modal-container {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|