<div class="
horizontal-scroller
" data-show-scroll-icon="">
<div class="horizontal-scroller__scroller">
<ul class="navigation-item-list js-options-limiter navigation-item-list--horizontal-scroll" data-desktop-disabled="true" data-option-selector=".js-option" data-option-limit="4">
<li class="js-option">
<a href="#" class="navigation-item navigation-item--active">
<span class="navigation-item__text">
Takdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Takdon (frihängande)
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Väggdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Gallerluftdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Frånluftdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Överluftdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Takdon (frihängande)
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Väggdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Gallerluftdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Frånluftdon
</span>
</a>
</li>
<li class="js-option">
<a href="#" class="navigation-item ">
<span class="navigation-item__text">
Överluftdon
</span>
</a>
</li>
<li class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</li>
</ul>
</div>
</div>
{{#if horizontalScroll }}
{{#> @horizontal-scroller }}
<ul class="navigation-item-list js-options-limiter {{ getmodifiers modifiers "navigation-item-list"}}" data-desktop-disabled="true" data-option-selector=".js-option" data-option-limit="4">
{{#each items}}
<li class="js-option">
{{render "@navigation-item" this }}
</li>
{{/each}}
<li class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</li>
</ul>
{{/@horizontal-scroller}}
{{else}}
<ul class="navigation-item-list js-options-limiter {{ getmodifiers modifiers "navigation-item-list"}}" data-desktop-disabled="true" data-option-selector=".js-option" data-option-limit="4">
{{#each items}}
<li class="js-option">
{{render "@navigation-item" this }}
</li>
{{/each}}
<li class="button-wrapper">
<button type="button" class="show-more-filters">Show More</button>
</li>
</ul>
{{/if}}
{
"horizontalScroll": true,
"items": [
{
"label": "Takdon",
"modifiers": "active",
"href": "#"
},
{
"label": "Takdon (frihängande)",
"href": "#"
},
{
"label": "Väggdon",
"href": "#"
},
{
"label": "Gallerluftdon",
"href": "#"
},
{
"label": "Frånluftdon",
"href": "#"
},
{
"label": "Överluftdon",
"href": "#"
},
{
"label": "Takdon (frihängande)",
"href": "#"
},
{
"label": "Väggdon",
"href": "#"
},
{
"label": "Gallerluftdon",
"href": "#"
},
{
"label": "Frånluftdon",
"href": "#"
},
{
"label": "Överluftdon",
"href": "#"
}
],
"modifiers": "horizontal-scroll"
}
.navigation-item-list {
font-size: 0;
margin: 0;
list-style: none;
padding: 16px 0 8px;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid $color-gray-2;
@include breakpoint(0, $s) {
margin: 0;
flex-direction: column;
flex-wrap: inherit;
}
@include breakpoint($l) {
text-align: left;
padding: 32px 0 24px;
}
&.navigation-item-list--horizontal-scroll {
display: flex;
margin: 0;
padding: 0;
li {
flex-shrink: 0;
margin: 0 0 4px 16px;
&:first-child {
margin: 0 0 4px 0;
}
}
}
li {
display: inline-block;
vertical-align: top;
margin: 0 4px 8px;
@include breakpoint(0, $s) {
display: block;
margin: 0 0 8px;
text-align: center !important;
}
}
&.js-options-limiter {
.button-wrapper {
bottom: 18px;
&:after {
height: 60px;
background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
}
}
.show-more-filters {
font-size: 16px;
color: $color-black;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
&--padded {
padding-bottom: 60px;
}
}
.navigation-item {
@include breakpoint(0, $s) {
display: flex;
justify-content: center;
}
}
}
No notes defined.