lib/scss/components/_modal.scss
.modal {
&__overlay {
display: flex;
position: fixed;
place-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 750;
&.hide {visibility: hidden;}
> * {
min-height: 0;
margin: auto;
}
background: rgba($color-black-alternative, .25);
}
&__container {
@extend .pad-4;
position: relative;
min-width: 25rem;
z-index: 1250;
background-color: $color-theme-report-light-gray;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
h3 {color: $color-black-alternative;}
&--sm {
@extend .modal__container;
min-width: 20rem;
}
&--md {
@extend .modal__container;
min-width: 35rem;
}
&--lg {
@extend .modal__container;
min-width: 45rem;
}
}
&__icon {
width: 67px;
&--alert {color: $color-theme-red;}
&--success {color: $color-theme-green;}
}
&__title {
position: relative;
color: $color-black-alternative;
font-size: 1.5rem;
font-family: "Patua One", sans-serif;
margin-bottom: 1rem;
}
&__close-btn {
position: absolute;
right: 0;
top: 0;
color: $color-black-alternative;
cursor: pointer;
background: transparent;
padding: 0;
margin: 0;
border: none;
font-size: 1rem;
&:hover {box-shadow: none;}
}
&__buttons {display: grid;}
&__btn {
@extend .pad-3;
width: 100%;
cursor: pointer;
display: flex;
place-items: center center;
justify-content: center;
gap: .5rem;
border: none !important;
border-radius: 3rem;
font-size: .875rem;
i {margin: 0;}
&--red {
@extend .modal__btn;
background-color: $color-red-negative;
}
&--blue {
@extend .modal__btn;
background-color: $color-theme-dark-blue;
}
&--no-fill {
@extend .modal__btn;
color: $color-navigation-header-text;
background: none;
padding: 0;
&:hover {box-shadow: none;}
}
&--black {
background-color: $color-black-alternative;
color: $color-white;
border: none;
}
}
}
.overflow-deactive {overflow-y: hidden;}