<div class="filter-group">
    <details class="filter-group__accordion">
        <summary class="filter-group__label">
            <div>Location</div>
            <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </summary>
        <div class="filter-group_contents-wrapper">
            <div class="filter-list">
                <details class="filter-list__accordion">
                    <summary class="filter-list__label">
                        <div>Recipient region</div>
                        <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </summary>
                    <div class="filter-list__contents-wrapper">

                        <ul class="filter-list__listing">

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Oxford (321)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Reading (1422)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Manchester (3141)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Birmingham (2132)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    London (32113)

                                </a>
                            </li>

                        </ul>
                    </div>
                </details>
            </div>

            <div class="filter-list">
                <details class="filter-list__accordion" open>
                    <summary class="filter-list__label">
                        <div>Recipient city</div>
                        <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </summary>
                    <div class="filter-list__contents-wrapper">

                        <form class="filter-list__contents--form">
                            <div class="filter-list__contents--form-item">
                                <label for="smallest-number">Smallest (£)</label>
                                <input id="smallest-number" min="0" type="number">
                            </div>
                            <div class="filter-list__contents--form-item">
                                <label for="smallest-number">Largest (£)</label>
                                <input id="smallest-number" min="0" type="number">
                            </div>
                            <input class="filter-list__contents--form-submit" type="submit" value="Apply">
                        </form>

                        <ul class="filter-list__listing">

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Oxford (321)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Reading (1422)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Manchester (3141)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Birmingham (2132)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    London (32113)

                                </a>
                            </li>

                        </ul>
                    </div>
                </details>
            </div>

        </div>
    </details>
</div>

<div class="filter-group">
    <details class="filter-group__accordion">
        <summary class="filter-group__label">
            <div>Location</div>
            <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </summary>
        <div class="filter-group_contents-wrapper">
            <div class="filter-list">
                <details class="filter-list__accordion">
                    <summary class="filter-list__label">
                        <div>Recipient region</div>
                        <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </summary>
                    <div class="filter-list__contents-wrapper">

                        <ul class="filter-list__listing">

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Oxford (321)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Reading (1422)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Manchester (3141)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Birmingham (2132)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    London (32113)

                                </a>
                            </li>

                        </ul>
                    </div>
                </details>
            </div>

            <div class="filter-list">
                <details class="filter-list__accordion" open>
                    <summary class="filter-list__label">
                        <div>Recipient city</div>
                        <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </summary>
                    <div class="filter-list__contents-wrapper">

                        <form class="filter-list__contents--form">
                            <div class="filter-list__contents--form-item">
                                <label for="smallest-number">Smallest (£)</label>
                                <input id="smallest-number" min="0" type="number">
                            </div>
                            <div class="filter-list__contents--form-item">
                                <label for="smallest-number">Largest (£)</label>
                                <input id="smallest-number" min="0" type="number">
                            </div>
                            <input class="filter-list__contents--form-submit" type="submit" value="Apply">
                        </form>

                        <ul class="filter-list__listing">

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Oxford (321)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Reading (1422)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Manchester (3141)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Birmingham (2132)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    London (32113)

                                </a>
                            </li>

                        </ul>
                    </div>
                </details>
            </div>

        </div>
    </details>
</div>

<div class="filter-group">
    <details class="filter-group__accordion">
        <summary class="filter-group__label">
            <div>Location</div>
            <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>

        </summary>
        <div class="filter-group_contents-wrapper">
            <div class="filter-list">
                <details class="filter-list__accordion">
                    <summary class="filter-list__label">
                        <div>Recipient region</div>
                        <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </summary>
                    <div class="filter-list__contents-wrapper">

                        <ul class="filter-list__listing">

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Oxford (321)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Reading (1422)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Manchester (3141)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Birmingham (2132)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    London (32113)

                                </a>
                            </li>

                        </ul>
                    </div>
                </details>
            </div>

            <div class="filter-list">
                <details class="filter-list__accordion" open>
                    <summary class="filter-list__label">
                        <div>Recipient city</div>
                        <svg class="accordion-toggle-icon" width="18" stroke="#153634" stroke="#153634" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <line class="accordion-toggle-icon__horizontal-line" x1="16.4131" y1="8.65356" x2="1.09657" y2="8.65356" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                            <line class="accordion-toggle-icon__vertical-line" x1="8.7561" y1="0.995239" x2="8.7561" y2="16.3118" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </summary>
                    <div class="filter-list__contents-wrapper">

                        <form class="filter-list__contents--form">
                            <div class="filter-list__contents--form-item">
                                <label for="smallest-number">Smallest (£)</label>
                                <input id="smallest-number" min="0" type="number">
                            </div>
                            <div class="filter-list__contents--form-item">
                                <label for="smallest-number">Largest (£)</label>
                                <input id="smallest-number" min="0" type="number">
                            </div>
                            <input class="filter-list__contents--form-submit" type="submit" value="Apply">
                        </form>

                        <ul class="filter-list__listing">

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Oxford (321)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Reading (1422)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item  active" href="#">
                                    Manchester (3141)

                                    <span class="screen-reader-only">(active filter)</span>

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    Birmingham (2132)

                                </a>
                            </li>

                            <li>
                                <a class="filter-list__filter-item " href="#">
                                    London (32113)

                                </a>
                            </li>

                        </ul>
                    </div>
                </details>
            </div>

        </div>
    </details>
</div>
{% render '@filter-group' %}

{% render '@filter-group' %}

{% render '@filter-group' %}
{
  "label": "Location"
}
  • Content:
    .filter-group {
      border-radius: 1px;
      margin-bottom: 4px;
    
      @include breakpoint($medium) {
        margin-bottom: 20px;
      }
    
    
      &__accordion[open] {
        .filter-group__label .accordion-toggle-icon {
          .accordion-toggle-icon__vertical-line {
            transform-origin: center;
            transform: rotateZ(90deg);
            transition: 0.1s;
          }
        }
      }
    
      &__label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: $orange-tint-light;
        font-size: 16px;
        font-weight: 500;
        padding: 4px 10px;
        border: 1px solid $orange-tint;
        border-radius: 2px;
    
        @include breakpoint($medium) {
          padding: 18px 10px;
        }
    
        .accordion-toggle-icon {
          transition: 0.2s;
    
          &__vertical-line {
            transform-origin: center;
            transform: rotateZ(0deg);
            transition: 0.1s;
          }
        }
    
        &:hover {
          cursor: pointer;
    
          .accordion-toggle-icon {
            transform: scale(1.1, 1.1);
            transition: 0.2s;
          }
        }
    
        &::-webkit-details-marker {
          display: none;
        }
      }
      &_contents-wrapper {
        padding: 4px 0;
    
        > * {
          margin-bottom: 4px;
    
          &:last-of-type {
            margin-bottom: 0;
          }
        }
      }
    }
    
  • URL: /components/raw/filter-group/filter-group.scss
  • Filesystem Path: src/components/04-modules/filter-group/filter-group.scss
  • Size: 1.2 KB

No notes defined.