keeweb/app/styles/common/_modal.scss

68 lines
1.4 KiB
SCSS

.modal {
@include position(absolute, 0 null null 0);
@include size(100%);
background-color: var(--modal-background-color);
z-index: $z-index-modal;
transition: background-color $base-duration $base-timing;
&.modal--hidden {
background-color: var(--modal-background-color-tr);
}
&.modal--opaque {
background-color: var(--background-color);
}
&__content {
@include size(100%);
display: flex;
align-items: stretch;
flex-direction: column;
justify-content: center;
transition: all $base-duration $base-timing;
.modal--hidden & {
transform: scale(0.01);
opacity: 0;
}
}
&__icon {
font-size: $modal-icon-size;
text-align: center;
}
&__header {
user-select: text;
text-align: center;
font-size: $small-header-font-size;
}
&__body {
user-select: text;
text-align: left;
margin: $base-spacing;
}
&__buttons {
text-align: right;
button ~ button {
margin-left: $small-spacing;
}
> button {
margin-bottom: $small-spacing;
}
}
&__body,
&__buttons {
align-self: center;
width: 40%;
@include tablet {
width: 90%;
}
}
&__check-wrap {
margin-top: $base-spacing;
}
&__pre {
white-space: pre-wrap;
}
}