app/assets/stylesheets/modal.scss
/* The Modal (background) */
.modal {
display: block;
position: fixed; /* Stay in place */
z-index: 1030; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal_content {
background-color: var(--modal-background);
padding: 20px;
border: 1px solid var(--modal-border);
margin: 5% auto; /* from the top and centered */
/* Modal width */
width: 95%;
@include media-breakpoint-down(sm) {
width: 100%;
}
}
.close-btn {
float: right;
@extend .red;
height: 1em;
svg {
height: 1em;
width: unset;
font-size: 2rem;
}
}