<div class="toolbar ">
<div class="toolbar__limiter toolbar__limiter--relative">
<div class="select toolbar__limiter-wrapper">
<label class="label toolbar__limiter-label" for="Sorteren op">
Toon
</label>
<select id="Sorteren op" class="select__field toolbar__limiter-select " name="sort-by">
<option value="12">
12
</option>
<option value="24">
24
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<div class="toolbar__sorter">
<div class="select toolbar__sorter-wrapper">
<label class="label toolbar__sorter-label" for="sort-by">
Sorteren op
</label>
<select id="sort-by" class="select__field toolbar__sorter-select " name="sort-by">
<option value="prijs high to low">
Prijs hoog - laag
</option>
<option value="prijs low to high">
Prijs laag - hoog
</option>
<option value="new">
Nieuw
</option>
<option value="best reviewd">
Best beoordeeld
</option>
</select>
</div>
</div>
</div>
<div class="toolbar {{ class }}" {{{ attributes }}}>
<div class="{{ limiter.class }}">
{{> '@select' limiter.select }}
</div>
<div class="toolbar__sorter">
{{render '@select' sortBy }}
</div>
</div>
{
"amount": "1630",
"found": "producten gevonden",
"show": "Toon",
"perpage": "producten per pagina",
"sortBy": {
"class": "toolbar__sorter-wrapper",
"label": {
"attributes": "",
"text": "Sorteren op",
"class": "toolbar__sorter-label"
},
"field": {
"id": "sort-by",
"name": "sort-by",
"class": "toolbar__sorter-select"
},
"options": [
{
"text": "Prijs hoog - laag",
"value": "prijs high to low"
},
{
"text": "Prijs laag - hoog",
"value": "prijs low to high"
},
{
"text": "Nieuw",
"value": "new"
},
{
"text": "Best beoordeeld",
"value": "best reviewd"
}
]
},
"limiter": {
"class": "toolbar__limiter",
"select": {
"class": "toolbar__limiter-wrapper",
"label": {
"attributes": "",
"text": "Toon",
"class": "toolbar__limiter-label"
},
"field": {
"id": "Sorteren op",
"name": "sort-by",
"class": "toolbar__limiter-select"
},
"options": [
{
"text": "12",
"value": "12"
},
{
"text": "24",
"value": "24"
},
{
"text": "36",
"value": "36"
}
]
},
"suffix": ""
}
}
.toolbar {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
@include mq($screen-l) {
justify-content: flex-end;
}
@include mq($screen-m) {
padding: $spacer--2 0 $spacer--1;
}
&__limiter,
&__sorter {
width: 100%;
@include mq($screen-l) {
width: auto;
}
&-label {
display: none;
}
&-select {
background-color: #ecf5f4;
padding: 0 2.5rem 0 1rem;
width: 100%;
height: 48px;
@include mq($screen-l) {
height: 36px;
}
}
}
&__limiter {
margin-right: $spacer--1;
width: 30%;
@include mq($screen-l) {
width: auto;
}
}
&__sorter {
width: 70%;
@include mq($screen-l) {
width: auto;
}
}
& .select {
margin-bottom: 0;
@include mq($screen-m) {
width: auto;
}
}
}
.toolbar--bottom {
font-family: $font-family-saira;
font-size: $font-size-base;
letter-spacing: 0.02em;
display: flex;
flex-basis: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
@include mq($screen-m) {
justify-content: flex-start;
flex-basis: 70%;
margin: 0;
padding: 0;
}
&-amount {
display: flex;
justify-content: flex-start;
}
&-limiter {
display: flex;
align-items: center;
justify-content: flex-end;
border-left: 1px solid #e6e6e6;
padding: 0 16px;
margin: 0 16px;
width: unset;
& .toolbar__limiter-select {
background-color: #ecf5f4;
margin: 0 16px;
width: unset;
}
& .toolbar__limiter-wrapper {
margin: 0;
}
}
}
There are no notes for this item.