360Giving Design System - Components

Filter group: Recipient Example 

<div class="filter-group">
    <details class="filter-group__accordion">
        <summary class="filter-group__label">
            <div>Recipient</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 filter-list--with-checkboxes">
                <details class="filter-list__accordion" open>
                    <summary class="filter-list__label">
                        <div>Recipient Organisation</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__form" action="#">

                            <div class="filter-list__form--radios">

                                <div class="filter-list__form--radio-item">
                                    <input class="screen-reader-only" type="radio" id="include" name="radioGroupName" value="include" checked>
                                    <label for="include">Include selected</label>
                                </div>

                                <div class="filter-list__form--radio-item">
                                    <input class="screen-reader-only" type="radio" id="exclude" name="radioGroupName" value="exclude">
                                    <label for="exclude">Exclude selected</label>
                                </div>

                            </div>

                            <ul class="filter-list__form--checkbox-listing">

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="oxford" type="checkbox" checked>
                                        <label for="oxford">Oxford (321)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="reading" type="checkbox">
                                        <label for="reading">Reading (1422)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="manchester" type="checkbox" checked>
                                        <label for="manchester">Manchester (3141)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="birmingham" type="checkbox">
                                        <label for="birmingham">Birmingham (2132)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="london" type="checkbox">
                                        <label for="london">London (32113)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="paris" type="checkbox">
                                        <label for="paris">Paris (4123)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="marseille" type="checkbox">
                                        <label for="marseille">Marseille (7321)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="brussels" type="checkbox">
                                        <label for="brussels">Brussels (9321)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="geneva" type="checkbox">
                                        <label for="geneva">Geneva (8743)</label>
                                    </div>
                                </li>

                                <li>
                                    <div class="filter-list__form--checkbox-item">
                                        <input class="screen-reader-only" id="barcelona" type="checkbox">
                                        <label for="barcelona">Barcelona (8241)</label>
                                    </div>
                                </li>

                            </ul>

                            <div class="filter-list__form--summary">
                                <div class="filter-list__form--summary-label">Selected:</div>
                                <ul class="filter-list__form--summary-contents">

                                    <li data-option-id="oxford" class="filter-list__form--summary-item  active">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Oxford (321)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="reading" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Reading (1422)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="manchester" class="filter-list__form--summary-item  active">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Manchester (3141)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="birmingham" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Birmingham (2132)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="london" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">London (32113)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="paris" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Paris (4123)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="marseille" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Marseille (7321)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="brussels" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Brussels (9321)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="geneva" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Geneva (8743)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                    <li data-option-id="barcelona" class="filter-list__form--summary-item ">
                                        <button class="filter-list__form--summary-button">
                                            <span class="screen-reader-only">(remove)</span>
                                            <span class="filter-list__form--summary-button__label">Barcelona (8241)</span>
                                            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.0976311 8.68342 -0.0976311 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.0976311 8.68342 -0.0976311 8.29289 0.292893L5 3.58579L1.70711 0.292893Z" fill="#DE6E24" />
                                            </svg>

                                        </button>
                                    </li>

                                </ul>
                            </div>

                            <div class="filter-list__form--actions">
                                <input class="filter-list__contents--form-submit" type="submit" value="Apply">
                                <input class="filter-list__contents--form-clear" type="submit" value="Clear all">
                            </div>

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

        </div>
    </details>
</div>
 
<div class="filter-group">
  <details class="filter-group__accordion" {% if opened === true%} open{% endif %}>
    <summary class="filter-group__label">
      <div>{{ label }}</div>
      {% render '@accordion-toggle-icon' %}
    </summary>
    <div class="filter-group_contents-wrapper">
      {% render '@filter-list--with-checkboxes' %}
    </div>
  </details>
</div>
 
{
  "label": "Recipient"
}
  • 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.