client/app/components/Modal/Modal.scss
@import "~styles/_global.scss";
.modal {
&Element {
display: inline-block;
cursor: pointer;
img:hover {
opacity: 0.8;
}
}
&Backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: $black-70;
display: flex;
align-items: center;
justify-content: center;
z-index: $z-index-front;
}
&Box {
@include setFontSize($size-20);
@include fadeIn(0.5s);
@include setPadding($size-36, $size-36, $size-36, $size-36);
color: $black;
box-sizing: border-box;
box-shadow: $size-0 $size-2 $size-10 $black-10;
border-radius: $size-4;
background: $white;
width: 90vw;
max-width: 910px;
height: 65vh;
max-height: 440px;
z-index: $z-index-front;
@media screen and (max-width: $small) {
width: 100vw;
height: 100%;
max-height: 100%;
border-radius: $size-0;
}
&Header {
@include setMargin($size-0, $size-0, $size-20, $size-0);
height: $size-20;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
&Title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $mulberry;
font-weight: bold;
}
&Close {
cursor: pointer;
margin-left: auto;
}
}
&Body {
@include dashboardSectionLink();
overflow-x: hidden;
overflow-y: auto;
height: calc(100% - 40px);
text-align: left;
line-height: 1.4 !important;
}
}
}