Academy of Natural Sciences

Applied Filters 

<div class="o-applied-filters o-container">
    <h2 id="applied-filter-results-title" class="u-sr-only">Applied Filters</h2>
    <div class="o-applied-filters__wrapper">
        <div id="applied-filter-results" class="o-applied-filters__inner">

            <button class="js-remove-filter o-applied-filters__button" data-value="${value}">
                <span class="u-sr-only">Remove </span>
                Sample Button
                <span aria-hidden="true">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="15.8995" height="15.8995" rx="7.94975" fill="#F3F3F3" />
                        <path d="M5.5 5.4502L10.4497 10.3999" stroke="black" />
                        <path d="M5.47266 10.4248L10.4224 5.47506" stroke="black" />
                    </svg>
                </span>
            </button>

        </div>
        <button class="js-remove-all-filters o-applied-filters__remove-all">
            <span class="u-hover-drawline--thin">Remove All Filters</span>
        </button>
    </div>
</div>
 
<div class="o-applied-filters o-container{% if not isSample %} is-empty{% endif %}">
  <h2 id="applied-filter-results-title" class="u-sr-only">Applied Filters</h2>
  <div class="o-applied-filters__wrapper">
    <div id="applied-filter-results" class="o-applied-filters__inner">

      {% if isSample %}
        <button class="js-remove-filter o-applied-filters__button" data-value="${value}">
          <span class="u-sr-only">Remove </span>
          Sample Button
          <span aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="15.8995" height="15.8995" rx="7.94975" fill="#F3F3F3"/>
              <path d="M5.5 5.4502L10.4497 10.3999" stroke="black"/>
              <path d="M5.47266 10.4248L10.4224 5.47506" stroke="black"/>
            </svg>
          </span>
        </button>
      {% endif %}
    </div>
    <button class="js-remove-all-filters o-applied-filters__remove-all">
      <span class="u-hover-drawline--thin">Remove All Filters</span>
    </button>
  </div>
</div>
 
{
  "pageColorTheme": "teal",
  "isSample": true,
  "title": "Filters"
}
  • Content: 
    .o-applied-filters {
  margin-top: 2.4rem;
}

.o-applied-filters__wrapper {
  display: flex;
  align-items: flex-start;
}

.o-applied-filters__inner {
  display: flex;
  flex-wrap: wrap;
}

.o-applied-filters__button {
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  margin-right: 2.4rem;

  span {
    margin-left: 0.8rem;
  }

  svg {
    display: block;
  }

  &:hover {
    text-decoration: underline;
  }
}

.o-applied-filters__remove-all {
  min-height: 4.4rem;
  font-size: 1.2rem;
  flex: 0 0 12rem;
  text-align: right;

  .is-empty & {
    display: none;
  }
}
  • URL: /components/raw/applied-filters/applied-filters.scss
  • Filesystem Path: patterns\04-objects\filters\applied-filters\applied-filters.scss
  • Size: 659 Bytes

No notes defined.