packages/livechat/src/components/Modal/styles.scss
@import '../../styles/colors';
@import '../../styles/variables';
$modal-padding: $default-padding;
$modal-border-radius: 2 * $default-border-radius;
$modal-shadow: 0 7px 16px 0 rgba(0, 0, 0, 0.1);
$modal-background-color: $bg-color-white;
:global(.is-blurred) {
filter: blur(2px);
}
.modal__overlay {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $overlay-bg-color;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
overflow-y: auto;
min-width: 150px;
max-width: 80%;
height: auto;
max-height: 80%;
padding: $modal-padding;
transform: translate(-50%, -50%);
border-radius: $modal-border-radius;
background-color: $modal-background-color;
box-shadow: $modal-shadow;
&--animated {
animation-name: fadeInUp;
animation-duration: $default-time-animation;
}
}
.modal__message {
margin-bottom: 1.75rem;
text-align: center;
color: $color-text-dark;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
@media (prefers-reduced-motion) {
.modal--animated {
animation: none;
}
}
@keyframes fadeInUp {
0% {
transform: translate3d(-50%, 100%, 0);
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;
}
}