Adrien
e7e1a4d663
This makes calculating the size of the UI components easier, especially those which have padding, margin or border.
112 lines
2.4 KiB
SCSS
112 lines
2.4 KiB
SCSS
@import "../_base.scss"
|
|
|
|
$modal-min-height: 15vh;
|
|
$modal-max-height: 55vh;
|
|
|
|
.modal {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
position: relative;
|
|
top: -100%;
|
|
margin-bottom: -100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
&__content {
|
|
$content-width: 70vw;
|
|
$title-height: 3vh;
|
|
$space-height: 1vh;
|
|
$buttons-height: 5vh;
|
|
$icon-width: 10vw;
|
|
$msg-max-width: 50vw;
|
|
|
|
$msg-min-height: calc($modal-min-height - $title-height - $space-height - $buttons-height);
|
|
$msg-max-height: calc($modal-max-height - $title-height - $space-height - $buttons-height);
|
|
|
|
min-height: $modal-min-height;
|
|
max-height: $modal-max-height;
|
|
|
|
width: min-content;
|
|
|
|
display: grid;
|
|
grid-template-columns: $icon-width 1vw minmax(max-content, $msg-max-width);
|
|
grid-template-rows: $title-height $space-height max-content $space-height $buttons-height;
|
|
grid-template-areas:
|
|
"icon . title"
|
|
"icon . ."
|
|
"icon . msg"
|
|
". . ."
|
|
"buttons buttons buttons"
|
|
;
|
|
|
|
padding: 2.5%;
|
|
|
|
background: get-color(greyscale, 0);
|
|
|
|
border: $border-normal;
|
|
border-radius: $border-radius;
|
|
border-color: get-color(greyscale, 90);
|
|
|
|
&__icon {
|
|
grid-area: icon;
|
|
|
|
aspect-ratio: 1;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
overflow: hidden;
|
|
|
|
border: $border-normal;
|
|
border-radius: $border-radius;
|
|
|
|
&__placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
svg {
|
|
width: 105%;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
grid-area: title;
|
|
|
|
width: max-content;
|
|
|
|
font-size: calc($title-height - 0.5vh);
|
|
font-weight: bold;
|
|
}
|
|
|
|
&__msg {
|
|
grid-area: msg;
|
|
|
|
height: fit-content;
|
|
|
|
min-height: $msg-min-height;
|
|
max-height: $msg-max-height;
|
|
max-width: $msg-max-width;
|
|
|
|
overflow: scroll;
|
|
|
|
font-size: 1.5vh;
|
|
color: get-color(greyscale, 80);
|
|
}
|
|
|
|
&__buttons {
|
|
grid-area: buttons;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|