360Giving Design System - Components

Filter Element 

<span class="filter filter--data-wrangling" title="Data Wrangling">Data Wrangling</span>
 
<span class="filter filter--{{ filter.slug }}" title="{{ filter.category }}">{{ filter.category }}</span>
 
{
  "filter": {
    "category": "Data Wrangling",
    "slug": "data-wrangling",
    "selected": false
  }
}
  • Content: 
    .filter {
  --filter-hsl: var(--base-hsl); 
  --filter-text-hsl: var(--base-hsl);

  color: hsla(var(--filter-text-hsl), 1);
  border: 1px solid hsla(var(--filter-hsl), 1);
  display: inline-block;
  border-radius: 24px;
  font-size: 1rem;
  padding: 4px 24px 6px;
  font-weight: 600;
  letter-spacing: .3px;

  &:hover {
    cursor: pointer;
    background-color: hsla(var(--filter-hsl), 1);
    color: hsla(var(--white-hsl), 1);
  }

  &.filter--data-wrangling:hover { --filter-hsl: var(--teal-hsl); }
  &.filter--data-literacy:hover { --filter-hsl: var(--orange-hsl); }
  &.filter--human-centered-design:hover { --filter-hsl: var(--red-hsl); }
}

.filter--selected {
  cursor: pointer;
  color: hsla(var(--white-hsl), 1);
  background-color: hsla(var(--filter-hsl), 1);

  &.filter--data-wrangling { --filter-hsl: var(--teal-hsl); }
  &.filter--data-literacy { --filter-hsl: var(--orange-hsl); }
  &.filter--human-centered-design { --filter-hsl: var(--red-hsl); }
}

.filter--data-wrangling {
  --filter-text-hsl: var(--teal-dark-hsl);
  --filter-hsl: var(--teal-hsl);
}

.filter--data-literacy {
  --filter-text-hsl: var(--orange-dark-hsl);
  --filter-hsl: var(--orange-hsl);
}

.filter--human-centered-design {
  --filter-hsl: var(--red-hsl);
  --filter-text-hsl: var(--red-hsl);
}
  • URL: /components/raw/filter/filter.scss
  • Filesystem Path: src/components/02-elements/filter/filter.scss
  • Size: 1.3 KB

No notes defined.