<div class="toolbar ">
<div class="toolbar__mode">
<button class="button button--icon toolbar__mode-button button--icon-light toolbar__mode-button--active" aria-label="grid view">
<svg class="icon toolbar__mode-icon" role="presentation" focusable="false">
<title>Grid</title>
<use xlink:href="/images/icons-sprite.svg#grid"></use>
</svg>
</button>
<button class="button button--icon toolbar__mode-button button--icon-light" aria-label="list view">
<svg class="icon toolbar__mode-icon" role="presentation" focusable="false">
<title>List</title>
<use xlink:href="/images/icons-sprite.svg#list"></use>
</svg>
</button>
</div>
<div class="select toolbar__sorter">
<label class="
label
toolbar__sorter-label margin-right-s margin-bottom-0
" for="sorter">
Sort By
</label>
<select id="sorter" class="select__field toolbar__sorter-select" name="sorter">
<option class="" value="product-name">
Product Name
</option>
<option class="" value="price">
Price
</option>
<option class="" value="option3" disabled>
Option 3
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
<div class="toolbar__amount toolbar__amount">
<span class="toolbar__amount-content">
Items 1-9 of
12
</span>
</div>
<div class="select toolbar__limiter margin-0">
<label class="
label
toolbar__limiter-label margin-right-s margin-bottom-0
" for="limiter">
Show
</label>
<select id="limiter" class="select__field toolbar__limiter-select" name="limiter">
<option class="" value="12">
12
</option>
<option class="" value="24">
24
</option>
<option class="" value="36" disabled>
36
</option>
</select>
</div>
<script src="/components/raw/select/select.js"></script>
</div>
<div class="toolbar {{ class }}" {{{ attributes }}}>
{{#if showMode }}
<div class="toolbar__mode">
{{ render '@button--icon' gridMode merge=true }}
{{ render '@button--icon' listMode merge=true }}
</div>
{{/if}}
{{#if showSorter }}
{{ render '@select' sortBy merge=true }}
{{/if}}
{{#if showAmount }}
<div class="toolbar__amount {{ amount.class }}">
<span class="toolbar__amount-content">
{{ amount.prefix }} {{ amount.currentRange }} {{ amount.preposition }}
{{ amount.total }}
</span>
</div>
{{/if}}
{{#if showLimit }}
{{ render '@select' limiter.select merge=true }}
{{/if}}
{{#if showPager }}
{{ render '@pager' pager merge=true }}
{{/if}}
</div>
{
"showMode": true,
"showSorter": true,
"showAmount": true,
"showLimit": true,
"amount": {
"class": "toolbar__amount",
"prefix": "Items",
"currentRange": "1-9",
"preposition": "of",
"total": "12"
},
"gridMode": {
"class": "toolbar__mode-button button--icon-light toolbar__mode-button--active",
"attributes": "aria-label=\"grid view\"",
"icon": {
"id": "grid",
"title": "Grid",
"class": "toolbar__mode-icon"
}
},
"listMode": {
"class": "toolbar__mode-button button--icon-light",
"attributes": "aria-label=\"list view\"",
"icon": {
"id": "list",
"title": "List",
"class": "toolbar__mode-icon"
}
},
"list": {
"href": "",
"icon": {
"id": "list",
"title": "List",
"class": "toolbar__mode-icon"
}
},
"sortBy": {
"class": "toolbar__sorter",
"label": {
"attributes": "",
"text": "Sort By",
"class": "toolbar__sorter-label margin-right-s margin-bottom-0"
},
"field": {
"id": "sorter",
"name": "sorter",
"class": "toolbar__sorter-select"
},
"options": [
{
"text": "Product Name",
"value": "product-name"
},
{
"text": "Price",
"value": "price"
}
]
},
"limiter": {
"select": {
"class": "toolbar__limiter margin-0",
"label": {
"attributes": "",
"text": "Show",
"class": "toolbar__limiter-label margin-right-s margin-bottom-0"
},
"field": {
"id": "limiter",
"name": "limiter",
"class": "toolbar__limiter-select"
},
"options": [
{
"text": "12",
"value": "12"
},
{
"text": "24",
"value": "24"
},
{
"text": "36",
"value": "36"
}
]
},
"suffix": ""
},
"pager": {
"class": "toolbar__pager"
}
}
$toolbar__padding : $spacer 0 !default;
$toolbar__padding\@medium : $spacer--semi-medium 0 !default;
$toolbar__padding\@large : 0 0 $spacer--medium !default;
$toolbar__border-style : solid !default;
$toolbar__border-color : $gray !default;
$toolbar__border-width : 0 0 1px 0 !default;
$toolbar__mode-margin : 0 !default;
$toolbar__mode-margin\@medium : 0 $spacer--medium 0 0 !default;
$toolbar__mode-button-icon-fill : $color-secondary !default;
$toolbar__mode-button-icon-fill--active : $color-primary !default;
$toolbar__mode-button-icon-size : 18px !default;
$toolbar__amount-color : $color-secondary !default;
$toolbar__amount-padding--visible : $spacer 0 !default;
$toolbar__sorter-width : 65% !default;
$toolbar__sorter-width\@medium : auto !default;
$toolbar__sorter-select-min-width : 160px !default;
$toolbar__sorter-border-width : 0 !default;
$toolbar__sorter-border-width\@medium : 0 !default;
$toolbar__sorter-padding : 0 !default;
$toolbar__sorter-padding\@medium : 0 !default;
$toolbar__sorter-margin : $spacer 0 0 !default;
$toolbar__sorter-margin\@medium : 0 !default;
$toolbar__sorter-order : 2 !default;
$toolbar__sorter-order\@medium : 0 !default;
$toolbar__limiter-order\@medium : 2 !default;
$toolbar__amount-order\@medium : 1 !default;
$toolbar__sorter-link-padding : 0 $spacer--m !default;
$toolbar__sorter-link-font-weight : $font-weight-normal !default;
$toolbar__sorter-limiter-order : 3 !default;
$toolbar__pager-order--secondary : 1 !default;
//toolbar--secondary
$toolbar__justify-content--secondary : space-between !default;
$toolbar__padding--secondary : $spacer--semi-medium 0 !default;
$toolbar__amount-order--secondary : 1 !default;
$toolbar__amount-flex-grow--secondary : 0 !default;
$toolbar__pager-order--secondary : 1 !default;
$toolbar__pager-flex-grow--secondary : 2 !default;
$toolbar__pager-flex-basis--secondary : 100% !default;
$toolbar__pager-margin--secondary : 0 0 $spacer--medium !default;
$toolbar__sorter-limiter-order--secondary : 3 !default;
$toolbar__sorter-limiter-flex-grow--secondary : 0 !default;
@import 'toolbar-variables';
.toolbar {
position: relative;
display: flex;
flex: 0 0 auto;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: $toolbar__padding;
border-style: $toolbar__border-style;
border-color: $toolbar__border-color;
border-width: $toolbar__border-width;
@include mq($screen-m) {
align-items: center;
justify-content: flex-start;
padding: $toolbar__padding\@medium;
}
@include mq($screen-l) {
padding: $toolbar__padding\@large;
}
.pager {
display: none;
}
&--secondary {
justify-content: $toolbar__justify-content--secondary;
flex-wrap: wrap;
padding: $toolbar__padding--secondary;
.pager {
display: block;
}
.toolbar__amount {
display: flex;
order: $toolbar__amount-order--secondary;
flex-grow: $toolbar__amount-flex-grow--secondary;
}
.toolbar__pager {
order: $toolbar__pager-order--secondary;
flex-grow: $toolbar__pager-flex-grow--secondary;
flex-basis: $toolbar__pager-flex-basis--secondary;
margin: $toolbar__pager-margin--secondary;
}
.toolbar__limiter {
order: $toolbar__sorter-limiter-order--secondary;
flex-grow: $toolbar__sorter-limiter-flex-grow--secondary;
}
}
&__mode,
&__limiter,
&__amount,
&__sorter {
display: flex;
flex-flow: column nowrap;
align-items: center;
@include mq($screen-m) {
flex-flow: row nowrap;
}
}
&__mode {
display: none;
flex: 0 0 auto;
margin: $toolbar__mode-margin;
@include mq($screen-m) {
margin: $toolbar__mode-margin\@medium;
}
}
&__mode-button {
.icon {
width: $toolbar__mode-button-icon-size;
height: $toolbar__mode-button-icon-size;
fill: $toolbar__mode-button-icon-fill;
}
&--active {
.icon {
fill: $toolbar__mode-button-icon-fill--active;
}
}
}
&__limiter {
@include mq($screen-m) {
order: $toolbar__limiter-order\@medium;
}
}
&__amount {
display: none;
color: $toolbar__amount-color;
flex-grow: 1;
justify-content: center;
@include mq($screen-m) {
display: flex;
order: $toolbar__amount-order\@medium;
}
&--visible {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-start;
padding: $toolbar__amount-padding--visible;
@include mq($screen-m) {
flex: 1 0 0;
}
@include isIE() {
flex-grow: 0;
@include mq($screen-m) {
flex-grow: 1;
}
}
}
}
&__amount-content {
white-space: nowrap;
}
&__sorter {
order: $toolbar__sorter-order;
width: $toolbar__sorter-width;
padding: $toolbar__sorter-padding;
margin: 0;
border-style: $toolbar__border-style;
border-color: $toolbar__border-color;
border-width: $toolbar__sorter-border-width;
@include mq($screen-m) {
order: $toolbar__sorter-order\@medium;
width: $toolbar__sorter-width\@medium;
padding: $toolbar__sorter-padding\@medium;
margin: $toolbar__sorter-margin\@medium;
border-width: $toolbar__sorter-border-width\@medium;
}
&-label {
white-space: nowrap;
}
.select2 {
flex-grow: 1;
min-width: $toolbar__sorter-select-min-width;
}
}
&__sorter-link {
padding: $toolbar__sorter-link-padding;
font-weight: $toolbar__sorter-link-font-weight;
}
~ .toolbar {
border-bottom: 0;
.pager {
display: block;
}
.toolbar {
&__mode,
&__sorter,
&__amount,
&__limiter {
display: none;
}
}
}
}
There are no notes for this item.