DOTD Component Library

Filter 

<div class="c-filter">
      <div class="c-filter__header js-toggle-parent">
          <span class="o-icon c-filter__icon-filter">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.62854 2.99995C2.62854 2.55812 2.98671 2.19995 3.42854 2.19995H20.5714C21.0132 2.19995 21.3714 2.55812 21.3714 2.99995V5.57138C21.3714 5.78355 21.2871 5.98704 21.1371 6.13707L14.5143 12.7599V19.2857C14.5143 19.5887 14.3431 19.8657 14.072 20.0012L10.6435 21.7155C10.3955 21.8395 10.101 21.8262 9.8651 21.6805C9.62925 21.5347 9.48568 21.2772 9.48568 21V12.7599L2.86285 6.13707C2.71283 5.98704 2.62854 5.78355 2.62854 5.57138V2.99995ZM4.22854 3.79995V5.24001L10.8514 11.8628C11.0014 12.0129 11.0857 12.2163 11.0857 12.4285V19.7055L12.9143 18.7912V12.4285C12.9143 12.2163 12.9985 12.0129 13.1486 11.8628L19.7714 5.24001V3.79995H4.22854Z" />
              </svg>
          </span>
          <h2 class="o-heading o-heading--xs c-filter__heading">
              Filter
          </h2>
          <span class="o-icon c-filter__icon-arrow">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.29289 9.29289C7.68342 8.90237 8.31658 8.90237 8.70711 9.29289L12 12.5858L15.2929 9.29289C15.6834 8.90237 16.3166 8.90237 16.7071 9.29289C17.0976 9.68342 17.0976 10.3166 16.7071 10.7071L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L7.29289 10.7071C6.90237 10.3166 6.90237 9.68342 7.29289 9.29289Z" />
              </svg>
          </span>
      </div>
      <form class="c-form c-filter__form" action="/">
          <div class="o-input o-form__item">
              <label for="search" class="is-visually-hidden">
                  Search
              </label>
              <input id="search" name="search" type="search" placeholder="Search..." />
          </div>
          <div class="o-select o-form__item">
              <label for="category">
                  Category
              </label>
              <select id="category" name="category">
                  <option value="select-one">Select a category</option>
                  <option value="category-1">Category 1</option>
                  <option value="category-2">Category 2</option>
              </select>
          </div>
          <div class="o-select o-form__item">
              <label for="sort">
                  Sort By
              </label>
              <select id="sort" name="sort">
                  <option value="select-one">Select one</option>
                  <option value="date">Date</option>
                  <option value="title">Title</option>
              </select>
          </div>
          <div class="c-form__button-group">
              <button class="o-button" type="submit">
                  <span class="o-button__label">
                      Submit
                  </span>
              </button>
              <a class="o-link o-link--secondary u-text-decoration--underline" href="/" target="_self">
                  <span class="o-link__label">
                      Reset Filter
                  </span>
              </a>
          </div>
      </form>
  </div>
 
{% set base_class = filter.base_class|default('c-filter') %}
{% if filter %}
  <div class="{{ bem(base_class, filter.element, filter.modifiers, filter.extra) }}">
    <div class="{{ bem(base_class, 'header') }} js-toggle-parent">
      {% include "@icon" with {
        "icon": {
          "name": "filter",
          "size": "md",
          "extra": bem(base_class, 'icon-filter')
        }
      } %}
      {% include "@heading" with {
        "heading": {
          "level": "2",
          "size": "xs",
          "text": "Filter",
          "extra": bem(base_class, 'heading')
        }
      } %}
      {% include "@icon" with {
        "icon": {
          "name": "chevron-down",
          "size": "md",
          "extra": bem(base_class, 'icon-arrow')
        }
      } %}
    </div>
    {% render "@form--filter" with {
      "form": {
        "extra": bem(base_class, 'form')
      }
    } %}
  </div>
{% endif %}
 
{
  "filter": {}
}
  • Content: 
    /* ------------------------------------*\
  $FILTER
\*------------------------------------ */

.c-filter {
  display: flex;
  flex-direction: column;
  padding: var(--dotd-space-lg);
  background-color: var(--dotd-color-background-default);

  &__header {
    display: flex;
    align-items: center;
    gap: var(--dotd-space-xs);
    cursor: pointer;
  }

  &__heading {
    flex: 1;
  }

  &__icon-arrow {
    transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
    transform: rotate(180deg);

    &:hover {
      color: var(--dotd-color-content-default-weak);
    }
  }

  &__form {
    opacity: 1;
    visibility: visible;
    max-height: 100vh;
    transition: all var(--dotd-animation-duration) var(--dotd-animation-timing);
    margin-top: var(--dotd-space);

    > *:not(:last-child) {
      border-bottom: var(--dotd-border-width) solid var(--dotd-color-border-default);
      padding-bottom: var(--dotd-space);
      margin-bottom: var(--dotd-space);
    }
  }

  &.this-is-active {
    .c-filter__icon-arrow {
      transform: rotate(0);
    }

    .c-filter__form {
      opacity: 0;
      visibility: hidden;
      max-height: 0;
      margin: 0;
    }
  }
}
  • URL: /components/raw/filter/_filter.scss
  • Filesystem Path: components/02-molecules/filter/_filter.scss
  • Size: 1.2 KB

No notes defined.