<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" {% 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' %}
{% render '@filter-list--with-form' %}
</div>
</details>
</div>
{
"label": "Location"
}
.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;
}
}
}
}
No notes defined.