BFNA Design System

Simple Filters 

<div class="simple-filters">
    <div class="simple-filters__wrapper">

        <input id="filter-democracy" type="checkbox">
        <label class="simple-filters__item filter--democracy" for="filter-democracy">Democracy</label>

        <input id="filter-politics-society" type="checkbox">
        <label class="simple-filters__item filter--politics-society" for="filter-politics-society">Politics &amp; Society</label>

        <input id="filter-future-leadership" type="checkbox">
        <label class="simple-filters__item filter--future-leadership" for="filter-future-leadership">Future Leadership</label>

        <input id="filter-digital-world" type="checkbox">
        <label class="simple-filters__item filter--digital-world" for="filter-digital-world">Digital World</label>

    </div>

    <select name="" id="" class="simple-filters__mobile">
    
    <option value="filter-democracy">Democracy</option>
    
    <option value="filter-politics-society">Politics &amp; Society</option>
    
    <option value="filter-future-leadership">Future Leadership</option>
    
    <option value="filter-digital-world">Digital World</option>
    
  </select>
</div>
 
<div class="simple-filters">
  <div class="simple-filters__wrapper">
    {% for filter in filters %}
    <input id="filter-{{ filter.value }}" type="checkbox">
    <label class="simple-filters__item filter--{{filter.value}}" for="filter-{{ filter.value }}">{{ filter.label }}</label>
    {% endfor %}
  </div>

  <select name="" id="" class="simple-filters__mobile">
    {% for filter in filters %}
    <option value="filter-{{ filter.value }}">{{ filter.label }}</option>
    {% endfor %}
  </select>
</div>
 
{
  "filters": [
    {
      "label": "Democracy",
      "value": "democracy"
    },
    {
      "label": "Politics & Society",
      "value": "politics-society"
    },
    {
      "label": "Future Leadership",
      "value": "future-leadership"
    },
    {
      "label": "Digital World",
      "value": "digital-world"
    }
  ]
}
  • Content: 
    // Simple filters Component
// We are using a CSS only approach to manage the states
// the filter elements, by connecting the label to the input
// using the "for" attribute.

// Structure
.simple-filters {
  --theme-hsl: var(--navy-hsl);
  // Sets wrapper functionality for the filter group
  // adds a narrow width for the filter list
  // and spaces them evenly with flexbox.
  &__wrapper {
    @include wrapper;
    max-width: 600px;
    display: flex;
    justify-content: space-between;
  }
  
  // hides the checkbox native component
  input[type=checkbox] { display: none; }
  label { 
    display: inline-block; 
    cursor: pointer;
  }
}

@include breakpoint($small-only) {
.simple-filters__wrapper { display: none; }
}

@include breakpoint($medium-up) {
.simple-filters__mobile { display: none; }
}

// Visuals
.simple-filters { 
  padding: var(--s1);
  text-align: center;
}

.simple-filters:first-child { padding-top: var(--s2);}

.simple-filters__item {
  padding: 2px 16px 5px;
  border-radius: 2px;
  color: hsla(var(--theme-hsl), 1);
  border: 0 solid hsla(var(--theme-hsl), .3);
  border-bottom-width: 1px;
  font-weight: 400;
  background-color: hsla(var(--theme-hsl), 0);
  transition: all .4s ease;
}

.simple-filters__item:hover { 
  transform: translate(0, -4px);
  background-color: hsla(var(--theme-hsl), .1); 
}

input:checked + .simple-filters__item {
  color: white;
  background-color: hsla(var(--theme-hsl), 1);
}

.simple-filters__mobile {
  --border: 1px solid hsla(var(--default-hsl), .6);
  --icon-color: var(--default-hsl);
}

.filter--democracy        { --theme-hsl: var(--green-hsl); }
.filter--future-leadership   { --theme-hsl: var(--red-hsl); }
.filter--politics-society { --theme-hsl: var(--yellow-hsl); }
.filter--digital-world  { --theme-hsl: var(--purple-hsl); }
  • URL: /components/raw/simple-filters/simple-filters.scss
  • Filesystem Path: src/components/03-components/simple-filters/simple-filters.scss
  • Size: 1.8 KB

There are no notes for this item.