src/app/component/filter/modal/filter-modal.component.scss
div#overlay {
display: block;
position: absolute; // dirty. fix.
width: 0;
height: 0;
background-color: #121212;
left: 0;
right: 0;
top: 0;
opacity: 0;
transition: all .5s;
&.show {
width: 100%;
z-index: 90000;
height: 9999px;
padding: 1rem;
opacity: 1;
}
h2 {
position: absolute; // makes the animation less snappy
font-size: 2rem;
text-align: center;
}
}
form {
width: 100%;
margin-top: 5rem;
> div {
width: 100%;
> fieldset {
width: 100%;
margin-top: 1.2rem;
margin-bottom: 1.2rem;
}
}
}
#actions {
width: 100%;
padding: 1.5rem;
}
@media screen and (min-width: 600px) {
section#overlay > h2 {
font-size: 3rem;
text-align: left;
}
}
@media screen and (min-width: 920px) {
div#overlay {
padding-left: 20rem !important;
padding-right: 20rem !important;
margin-left: auto;
margin-right: auto;
padding-top: 1rem;
overflow-y: hidden;
}
form {
display: flex;
justify-content: space-between;
> div {
width: 48%;
> fieldset {
width: 100%;
margin-top: 1.2rem;
margin-bottom: 1.2rem;
}
}
}
#actions {
width: 25%;
margin: 2rem auto auto;
}
}