path: root / src / _filters.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// Filters 
// The number of filter options 
$filter-number: 8 !default;

%filter-checked-nav { 
  background: $primary-color;
  color: $light-color;
}

%filter-checked-body { 
  display: none;
}

.filter {
  .filter-nav {
    margin: $layout-spacing 0;
  }

  .filter-body {
    display: flex;
    flex-wrap: wrap;
  }

  .filter-tag {
    @for $i from 0 through ($filter-number) {
      &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
        @extend %filter-checked-nav;
      }
    }

    @for $i from 1 through ($filter-number) {
      &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
        @extend %filter-checked-body;
      }
    }
  }
}