Code for the littler Buttons the Computer used in the Turing Machine portion of the book.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
buttons-computer/sass/_filters.scss

37 lines
689 B

// 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;
}
}
}
}