111 lines
1.6 KiB
SCSS
111 lines
1.6 KiB
SCSS
@import '~dashboard/assets/scss/variables';
|
|
@import '~dashboard/assets/scss/mixins';
|
|
|
|
.modal-mask {
|
|
@include flex;
|
|
@include flex-align(center, middle);
|
|
background-color: $masked-bg;
|
|
height: 100%;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 9990;
|
|
}
|
|
|
|
.modal--close {
|
|
position: absolute;
|
|
right: $space-small;
|
|
top: $space-small;
|
|
|
|
&:hover {
|
|
background: $color-background;
|
|
}
|
|
}
|
|
|
|
.page-top-bar {
|
|
padding: $space-large $space-large $zero;
|
|
|
|
img {
|
|
max-height: 6rem;
|
|
}
|
|
}
|
|
|
|
.modal-container {
|
|
@include normal-shadow;
|
|
|
|
background-color: $color-white;
|
|
border-radius: $space-smaller;
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
position: relative;
|
|
width: 60rem;
|
|
|
|
&.medium {
|
|
max-width: 80%;
|
|
width: 90rem;
|
|
}
|
|
|
|
.content-box {
|
|
height: auto;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
color: $color-heading;
|
|
font-size: $font-size-medium;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
p {
|
|
font-size: $font-size-small;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.content {
|
|
padding: $space-large;
|
|
}
|
|
|
|
form,
|
|
.modal-content {
|
|
align-self: center;
|
|
padding: $space-large;
|
|
|
|
a {
|
|
padding: $space-normal;
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
@include flex;
|
|
@include flex-align($x: flex-end, $y: middle);
|
|
padding: $space-small $zero;
|
|
|
|
button {
|
|
font-size: $font-size-small;
|
|
}
|
|
|
|
&.justify-content-end {
|
|
justify-content: end;
|
|
}
|
|
}
|
|
|
|
.delete-item {
|
|
padding: $space-large;
|
|
|
|
button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-enter,
|
|
.modal-leave {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-enter .modal-container,
|
|
.modal-leave .modal-container {
|
|
transform: scale(1.1);
|
|
}
|