Generalized filters bar, added to network page.

This commit is contained in:
2019-11-15 02:37:17 +01:00
parent 23492bb5d0
commit 0575dbc7e4
17 changed files with 193 additions and 113 deletions

View File

@@ -1,24 +1,24 @@
/* $primary: #ff886c; */
.filters[data-v-643133a6] {
.filters[data-v-e35db0d8] {
display: inline-block;
list-style: none;
padding: .5rem;
margin: 0;
}
.filters[data-v-643133a6]:not(:last-child) {
.filters[data-v-e35db0d8]:not(:last-child) {
border-right: solid 1px rgba(0, 0, 0, 0.1);
}
.filter[data-v-643133a6] {
.filter[data-v-e35db0d8] {
display: inline-block;
}
.compact .filters[data-v-643133a6] {
.compact .filters[data-v-e35db0d8] {
padding: 0;
border: none;
}
.compact .filter[data-v-643133a6] {
.compact .filter[data-v-e35db0d8] {
margin: 0 0 1.5rem 0;
}
.toggle[data-v-643133a6] {
.toggle[data-v-e35db0d8] {
color: rgba(0, 0, 0, 0.2);
box-sizing: border-box;
padding: .5rem;
@@ -28,19 +28,19 @@
font-weight: bold;
cursor: pointer;
}
.toggle .check[data-v-643133a6] {
.toggle .check[data-v-e35db0d8] {
display: none;
}
.toggle[data-v-643133a6]:hover {
.toggle[data-v-e35db0d8]:hover {
color: rgba(0, 0, 0, 0.5);
}
.toggle.active[data-v-643133a6] {
.toggle.active[data-v-e35db0d8] {
color: #ff6c88;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
/* $primary: #ff886c; */
.filter-bar[data-v-a678373a] {
.filter-bar[data-v-6db17c96] {
background: #fff;
display: flex;
justify-content: space-between;
@@ -48,19 +48,19 @@
font-size: 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.filter-bar .icon[data-v-a678373a] {
.filter-bar .icon[data-v-6db17c96] {
fill: rgba(0, 0, 0, 0.5);
}
.filters-container[data-v-a678373a] {
.filters-container[data-v-6db17c96] {
display: inline-block;
}
.filters-compact[data-v-a678373a] {
.filters-compact[data-v-6db17c96] {
font-size: 1rem;
font-weight: bold;
display: none;
margin: 0 0 0 .5rem;
}
.range-button[data-v-a678373a] {
.range-button[data-v-6db17c96] {
color: rgba(0, 0, 0, 0.5);
background: #fff;
display: inline-block;
@@ -70,21 +70,21 @@
font-size: .8rem;
font-weight: bold;
}
.range-button[data-v-a678373a]:hover {
.range-button[data-v-6db17c96]:hover {
color: #222;
cursor: pointer;
}
.range-input[data-v-a678373a] {
.range-input[data-v-6db17c96] {
display: none;
}
.range-input:checked + .range-button[data-v-a678373a] {
.range-input:checked + .range-button[data-v-6db17c96] {
color: #ff6c88;
}
@media (max-width: 720px) {
.filters-container[data-v-a678373a] {
.filters-container[data-v-6db17c96] {
display: none;
}
.filters-compact[data-v-a678373a] {
.filters-compact[data-v-6db17c96] {
display: inline-block;
}
}