src/app/component/filter/filter.component.scss
@use '../../style/mixin' as mxn;
@use '../../style/colour' as colour;
dialog {
z-index: 9999;
position: fixed;
bottom: 0;
padding: 1rem;
margin-bottom: .5rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: colour.$input-bg;
height: 70px;
&:hover {
cursor: pointer;
}
img {
cursor: pointer;
padding: .5rem;
@include mxn.transition;
&:hover {
background-color: #3d3737;
}
}
> div {
width: 100%;
margin-left: 1rem;
&.hidden {
width: 0;
margin-left: 0;
}
}
}
// tags that are being filtered by
div#applied-filters {
margin-top: 2rem;
}
// word result count
span {
color: #ffffff;
font-size: .875rem;
display: block;
margin-top: 2rem;
text-align: center;
}
@media screen and (min-width: 600px) {
dialog {
margin-left: .5rem;
height: 70px;
width: 45%;
}
span {
text-align: left;
}
}
@media screen and (min-width: 920px) {
dialog {
margin-left: .5rem;
height: 70px;
width: 30%;
img {
margin-right: 1rem;
}
}
}