app/assets/stylesheets/components/_modal.scss
.modal-component-backdrop {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 50;
}
.modal-component {
position: fixed;
height: fit-content;
max-width: 450px;
z-index: 100;
.close {
color: $dark-brown;
opacity: 1;
}
.modal-footer {
padding: 0 1rem 1rem 1rem;
& :not(:first-child) {
margin-top: 8px;
}
& > * {
margin: 0;
}
}
.modal-header, .modal-footer {
border: none;
}
.modal-body {
min-height: 80px;
margin: 0 1rem 0 1rem;
padding: 1rem 0 1rem 0;
border-top: 1px solid $dark-brown;
}
.modal-footer {
button {
width: 100%;
}
}
}
@media (max-width: 576px) {
.modal-component {
max-width: 90vw;
}
}
@media (max-width: 350px) {
.modal-component {
max-width: 100vw;
}
}