1
0
mirror of https://github.com/keeweb/keeweb.git synced 2024-06-28 07:50:55 +02:00
keeweb/app/styles/common/_modal.scss
2020-05-30 16:02:02 +02:00

73 lines
1.6 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;
&--svg {
fill: var(--text-color);
width: 1.4em;
align-self: 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;
}
}