360Giving Design System - Components

Filters Block 

<div class="filter-section">
    <div class="wrapper filter-section__panel">
        <div class="filter-section__search">
            <input class="search-field <!-- js-search-filter -->" placeholder="Start typing to filter..." />
        </div>

        <div class="filter-section__buttons filters">

            <span class="filter filter--data-literacy filter--selected" title="Data Literacy">Data Literacy</span>

            <span class="filter filter--data-wrangling" title="Data Wrangling">Data Wrangling</span>

            <span class="filter filter--human-centered-design" title="Human Centered Design">Human Centered Design</span>

        </div>
    </div>
</div>
 
<div class="filter-section">
  <div class="wrapper filter-section__panel">
    <div class="filter-section__search">
      <input class="search-field <!-- js-search-filter -->" placeholder="Start typing to filter..." />  
    </div>
    
    <div class="filter-section__buttons filters">
      {% for filter in filters %}
         <span class="filter filter--{{filter.slug }}{% if filter.selected %} filter--selected{% endif %}" title="{{ filter.category }}">{{ filter.category }}</span>     
      {% endfor %}
    </div>
  </div>
</div>
 
{
  "filters": [
    {
      "category": "Data Literacy",
      "slug": "data-literacy",
      "selected": true
    },
    {
      "category": "Data Wrangling",
      "slug": "data-wrangling",
      "selected": false
    },
    {
      "category": "Human Centered Design",
      "slug": "human-centered-design",
      "selected": false
    }
  ]
}
  • Content: 
    .filter-section {
  border-top: 1px solid hsla(var(--base-hsl), .2);
  border-bottom: 1px solid hsla(var(--base-hsl), .2);

  @include breakpoint($small-only) {
    overflow-x: scroll;
    scroll-snap-align: center;
    scroll-snap-type: x proximity;
  }

  &__panel { display: flex; }
  &__search { 
    flex: 1;
    display: flex;
    align-items: center;
  }

  &__buttons { 
    flex: 3; 
    text-align: right;
  }
}

.search-field {
  padding: 8px 16px;
  width: 100%;
  border: 1px solid hsla(var(--base-hsl), .2);
  color: hsla(var(--base-hsl), 1);
  background-color: transparent;

  &::-webkit-input-placeholder { color: hsla(var(--base-hsl), .7); }
  &:-moz-placeholder { color: hsla(var(--base-hsl), .7); }
  &::-moz-placeholder { color: hsla(var(--base-hsl), .7); }
  &:-ms-input-placeholder { color: hsla(var(--base-hsl), .7); }

  &:focus { border: 1px solid hsla(var(--orange-hsl), 1); }
}

.filters {
  padding-top: 24px;
  padding-bottom: 24px;

  @include breakpoint($small-only) {
    width: max-content;
    padding-right: 20px;

    .filter + .filter { margin-left: 8px; }
  }

  @include breakpoint($medium-up) { 
    .filter + .filter { margin-left: 24px; }
  }
}
  • URL: /components/raw/filters/filters.scss
  • Filesystem Path: src/components/04-modules/filters/filters.scss
  • Size: 1.2 KB

No notes defined.