<div class="o-filter-bar o-container ">
<h2 class="u-sr-only">Filters</h2>
<form id="js-filter-form" class="o-row o-filter-bar__form js-filter-form" data-baseurl="https://bc-ans.netlify.app">
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
<div class="o-listbox-filter js-listbox-parent" data-param-name="sample-listbox">
<button class="o-listbox-filter__trigger js-listbox-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
Sample Listbox
<span class="o-listbox-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>
</button>
<ul role="listbox" class="o-listbox-filter__listbox js-listbox" tabindex="0" aria-label="Sample Listbox list">
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-255" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="2021" value="2021">
<label class="o-listbox-filter__label" for="listbox-item-255">2021</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-3155" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="2022" value="2022">
<label class="o-listbox-filter__label" for="listbox-item-3155">2022</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4557" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="2023" value="2023">
<label class="o-listbox-filter__label" for="listbox-item-4557">2023</label>
</li>
</ul>
</div>
</div>
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
<div class="o-select-filter" data-param-name="sample-select">
<label for="" class="u-sr-only">Sample Select</label>
<select id="" class="o-select-filter__select js-filter-select">
<option value="">Sample Select</option>
<option id="" value="2021">2021</option>
<option id="" value="2022">2022</option>
<option id="" value="2023">2023</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>
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
<div class="o-fancy-form-item o-fancy-input">
<label class="o-fancy-form-item__label" for="sample-search">
<span class="o-fancy-form-item__label-text">Sample Text Input</span>
</label>
<input id="sample-search" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="test1" />
</div>
</div>
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
<div class="o-fancy-form-item o-fancy-form-item--icon o-fancy-input">
<label class="o-fancy-form-item__label" for="sample-search-2">
<span class="o-fancy-form-item__icon" aria-hidden="true"><svg width="14" height="14" viewbox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M6.90519 12.5466C10.1665 12.5466 12.8104 9.96179 12.8104 6.77329C12.8104 3.58479 10.1665 1 6.90519 1C3.64383 1 1 3.58479 1 6.77329C1 9.96179 3.64383 12.5466 6.90519 12.5466Z" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
<path class="u-ct-stroke" d="M11.0859 10.8608L15.9998 15.6649" class="u-ct-stroke" stroke-width="1.5" stroke-miterlimit="10" />
</svg>
</span>
<span class="o-fancy-form-item__label-text">Search</span>
</label>
<input id="sample-search-2" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="test2" />
</div>
</div>
</form>
</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-filter-bar o-container {{ classes }}">
<h2 class="u-sr-only">{{ title }}</h2>
<form id="js-filter-form" class="o-row o-filter-bar__form js-filter-form" data-baseurl="{{ formBaseURL }}">
{% block formContent %}
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
{% include "04-objects/filters/listbox-filter" with {
title: 'Sample Listbox',
paramName: 'sample-listbox',
items: [
{ title: '2021', value: '2021' },
{ title: '2022', value: '2022' },
{ title: '2023', value: '2023' }
]
} only %}
</div>
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
{% include "04-objects/filters/select-filter" with {
title: 'Sample Select',
paramName: 'sample-select',
items: [
{ title: '2021', value: '2021' },
{ title: '2022', value: '2022' },
{ title: '2023', value: '2023' }
]
} only %}
</div>
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
<div class="o-fancy-form-item o-fancy-input">
<label class="o-fancy-form-item__label" for="sample-search">
<span class="o-fancy-form-item__label-text">Sample Text Input</span>
</label>
<input id="sample-search" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="test1" />
</div>
</div>
<div class="o-filter-bar__sample-filter o-col o-col-sm-3">
<div class="o-fancy-form-item o-fancy-form-item--icon o-fancy-input">
<label class="o-fancy-form-item__label" for="sample-search-2">
<span class="o-fancy-form-item__icon" aria-hidden="true">{% include "03-icons/search" %}</span>
<span class="o-fancy-form-item__label-text">Search</span>
</label>
<input id="sample-search-2" class="o-fancy-form-item__input js-filter-handle-input" type="text" data-param-name="test2" />
</div>
</div>
{% endblock %}
</form>
</div>
{% include "04-objects/filters/applied-filters" with { isSample: false } only %}
{
"pageColorTheme": "teal",
"title": "Filters",
"formBaseURL": "https://bc-ans.netlify.app"
}
.o-filter-bar {
margin-top: 2.4rem;
position: relative;
z-index: 1;
.o-fancy-form-item__label {
top: 1.3rem;
}
.o-fancy-form-item__label-text {
transition: opacity 0.3s $ease-standard-cubic;
}
.o-fancy-form-item--has-value,
.o-fancy-form-item--has-focus {
.o-fancy-form-item__label-text {
opacity: 0;
}
.o-fancy-form-item__label {
top: 1.6rem;
}
}
.o-fancy-form-item__input {
padding-left: 0;
}
.o-fancy-form-item--icon .o-fancy-form-item__input {
padding-left: 2.2rem;
}
}
No notes defined.