<div class="o-select-filter" data-param-name="">
<label for="" class="u-sr-only">Select Filter</label>
<select id="" class="o-select-filter__select js-filter-select">
<option value="">Select Filter</option>
<option id="" value="optionA">Option A</option>
<option id="" value="optionB">Option B</option>
<option id="" value="optionC">Option C</option>
<option id="" value="optionD">Option D</option>
<option id="" value="optionE">Option E</option>
<option id="" value="optionF">Option F</option>
</select>
<span class="o-select-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" class="u-ct-stroke" />
</svg>
</span>
</div>
<div class="o-applied-filters o-container is-empty">
<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">
</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-select-filter" data-param-name="{{ paramName }}">
<label for="{{ id }}" class="u-sr-only">{{ title }}</label>
<select id="{{ id }}" class="o-select-filter__select js-filter-select">
<option value="">{{ title }}</option>
{% for item in items %}
{% set itemID = item.id is defined ? item.id : 'select-item-' ~ random(5000) %}
<option id="{{ item.id }}" value="{{ item.value }}">{{ item.title }}</option>
{% endfor %}
</select>
<span class="o-select-filter__icon" aria-hidden="true">{% include '03-icons/down-carrat-small' %}</span>
</div>
{% if isSample %}
{% include "04-objects/filters/applied-filters" with { isSample: false } %}
{% endif %}
{
"pageColorTheme": "teal",
"isSample": true,
"title": "Select Filter",
"items": [
{
"title": "Option A",
"value": "optionA"
},
{
"title": "Option B",
"value": "optionB"
},
{
"title": "Option C",
"value": "optionC"
},
{
"title": "Option D",
"value": "optionD"
},
{
"title": "Option E",
"value": "optionE"
},
{
"title": "Option F",
"value": "optionF"
}
]
}
.o-select-filter {
position: relative;
}
.o-select-filter__icon {
@include filterIconStyles;
.choices.is-open + & {
transform: rotate(180deg);
}
}
No notes defined.