<div class="search-filter">
<div class="select-checkboxes">
<div class="select-checkboxes__inner">
<label class="select-checkboxes__label">Filter by</label>
<span class="select-checkboxes__value"></span>
<span class="select-checkboxes__trigger">
<span class="select-checkboxes__symbol"><svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
</svg>
</span>
</span>
</div>
<div class="select-checkboxes__content">
<div class="select-checkboxes__options">
<ul class="select-checkboxes__items">
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 1">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 2">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 3">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 4" checked>
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 5" checked>
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 6">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
<li class="select-checkboxes__item">
<div class="checkbox">
<label class="checkbox__inner">
<input type="checkbox" name="option[]" value="Option 7">
<span class="checkbox__spoof">
<span class="checkbox__icon">
<svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
<path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
</svg>
</span>
</span>
<span class="checkbox__label">
Option
</span>
</label>
</div>
</li>
</ul>
<div class="select-checkboxes__actions">
<div class="actions actions--end">
<div class="actions__item">
<a href="#" target="_blank" class="select-checkboxes__action action action--normal action--on-light">
<span class="action__label">Apply filters</span>
<span class="action__bg"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-filter">
{{render '@select-checkboxes' this merge=true }}
</div>
label: Filter by
.search-filter {
.theme-2020 & {
@media (hover: none) {
position: relative;
}
}
}
.search-filter__label {
.theme-2020 & {
font-size: 15px;
@media (hover: none) {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
height: 32px;
padding: 0 10px;
}
}
}
.search-filter__content {
.theme-2020 & {
display: flex;
align-items: center;
height: 43px;
padding: 0 10px;
border: 2px solid #e6e7e8;
}
}
.search-filter__placeholder {
.theme-2020 & {
display: block;
flex: 1 1 auto;
opacity: 0.5;
}
}
.search-filter__options {
.theme-2020 & {
@media (hover: hover) {
display: none;
}
}
&.search-filter__options--desktop {
.theme-2020 & {
display: flex;
flex-wrap: wrap;
margin-top: 8px;
margin-bottom: -8px;
@media (hover: none) {
display: none;
}
}
}
}
.search-filter__item {
.theme-2020 & {
flex: 0 0 25%;
margin-bottom: 8px;
padding-right: 16px;
}
}
No notes defined.