Web Design Guide
2024-10-28 08:44:01 | 2.0.0
<div class="filter">
<div class="filter__mobile">
Filter
</div>
<ul class="filter__list">
<li class="filter__item -next">
<span class="filter__link">Color</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list ">
<li class="section__item">
<a class="section__link -next" href="#">Uni colors</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link" href="#">Erneuerbare Energien</a>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
<li class="filter__item -next">
<span class="filter__link">Material</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Uni colors</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Decorative</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Metalic</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
<li class="filter__item -next">
<span class="filter__link">Lacquer</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Uni colors</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Decorative</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Metalic</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
<li class="filter__item -next">
<span class="filter__link">Type</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Uni colors</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Decorative</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Metalic</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
<li class="filter__item -next">
<span class="filter__link">Embossing</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Uni colors</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Decorative</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Metalic</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
<li class="filter__item -next">
<span class="filter__link">Collection</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Uni colors</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Decorative</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Metalic</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
<li class="filter__item -next">
<span class="filter__link">Features</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list ">
<li class="section__item">
<a class="section__link" href="">White</a>
</li>
<li class="section__item">
<a class="section__link" href="">Blue</a>
</li>
<li class="section__item">
<a class="section__link" href="">Red</a>
</li>
<li class="section__item">
<a class="section__link" href="">Green</a>
</li>
<li class="section__item">
<a class="section__link" href="">Black</a>
</li>
<li class="section__item">
<a class="section__link" href="">Orange</a>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
<li class="filter__item -next">
<span class="filter__link">Something else</span><span class="icon -chevron-down"></span>
<nav class=" flyout ">
<ul class="flyout__section section__list -grouped">
<li class="section__item">
<a class="section__link -next" href="#">Uni colors</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Decorative</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
<li class="section__item">
<a class="section__link -next" href="#">Metalic</a>
<ul class="section__sub-section sub-section__list section__second-level">
<li class="sub-section__item ">
<a class="sub-section__link" href="">White</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Blue</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Red</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Green</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Black</a>
</li>
<li class="sub-section__item ">
<a class="sub-section__link" href="">Orange</a>
</li>
</ul>
</li>
</ul>
<ul class="flyout__service service__list">
</ul>
</nav>
</li>
</ul>
<div class="filter__active">
<span class="filter__active_label">CATEGORIES</span>
<span class="filter__active_tag">Decorative<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Glass laminate<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Matt decors<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Compact board<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Scratch resistant<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Decorative<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Glass laminate<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Matt decors<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Compact board<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">Scratch resistant<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_tag">RAUVISIO noir<span class="filter__active_tag_remove icon -cross"></span></span>
<span class="filter__active_filler"></span>
<a href="#" class="filter__active_clear">Clear all</a>
</div>
</div>
<div class="filter">
{{#if items}}
<div class="filter__mobile">
Filter
</div>
<ul class="filter__list">
{{#each items}}
<li class="filter__item -next">
<span class="filter__link">{{{text}}}</span><span class="icon -chevron-down"></span>
{{render '@molecules-flyout' flyout }}
</li>
{{/each}}
</ul>
{{/if}}
{{#if activeFilters}}
<div class="filter__active">
<span class="filter__active_label">CATEGORIES</span>
{{#each activeFilters}}
<span class="filter__active_tag">{{{.}}}<span class="filter__active_tag_remove icon -cross"></span></span>
{{/each}}
<span class="filter__active_filler"></span>
<a href="#" class="filter__active_clear">Clear all</a>
</div>
{{/if}}
</div>
{
"items": [
{
"text": "Color",
"flyout": {
"items": [
{
"href": "#",
"text": "Uni colors",
"items": [
{
"text": "White"
},
{
"text": "Blue"
}
]
},
{
"href": "#",
"text": "Erneuerbare Energien"
}
]
}
},
{
"text": "Material",
"flyout": {
"sectionModifiers": "-grouped",
"items": [
{
"href": "#",
"text": "Uni colors",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Decorative",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Metalic",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
}
]
}
},
{
"text": "Lacquer",
"flyout": {
"sectionModifiers": "-grouped",
"items": [
{
"href": "#",
"text": "Uni colors",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Decorative",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Metalic",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
}
]
}
},
{
"text": "Type",
"flyout": {
"sectionModifiers": "-grouped",
"items": [
{
"href": "#",
"text": "Uni colors",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Decorative",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Metalic",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
}
]
}
},
{
"text": "Embossing",
"flyout": {
"sectionModifiers": "-grouped",
"items": [
{
"href": "#",
"text": "Uni colors",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Decorative",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Metalic",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
}
]
}
},
{
"text": "Collection",
"flyout": {
"sectionModifiers": "-grouped",
"items": [
{
"href": "#",
"text": "Uni colors",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Decorative",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Metalic",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
}
]
}
},
{
"text": "Features",
"flyout": {
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
}
},
{
"text": "Something else",
"flyout": {
"sectionModifiers": "-grouped",
"items": [
{
"href": "#",
"text": "Uni colors",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Decorative",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
},
{
"href": "#",
"text": "Metalic",
"items": [
{
"text": "White"
},
{
"text": "Blue"
},
{
"text": "Red"
},
{
"text": "Green"
},
{
"text": "Black"
},
{
"text": "Orange"
}
]
}
]
}
}
],
"activeFilters": [
"Decorative",
"Glass laminate",
"Matt decors",
"Compact board",
"Scratch resistant",
"Decorative",
"Glass laminate",
"Matt decors",
"Compact board",
"Scratch resistant",
"RAUVISIO noir"
]
}
-
Content:
.filter { $filter-header-column-width: 2; $margin: map-get($grid-gutters, 'medium'); $half-margin: rem-calc($margin/2); $three-halves-margin: rem-calc($margin * 1.5); $root: &; background-color: $white; &__extra { display: none; } &__mobile { @include typography-level('heading-3'); display: none; padding: $half-margin; background-color: $black; color: $white; text-align: right; cursor: pointer; &::after { $symbol: map-get($icons, 'filter'); @include icon-content-extended($symbol); margin-left: $half-margin; } &.-active::after { $symbol: map-get($icons, 'cross'); @include icon-content-extended($symbol); } &_view { display: none; } } &__list { display: none; margin-bottom: 0; padding-left: 0; list-style: none; .icon { display: none; } } &__item { display: block; } &__active { display: flex; flex-wrap: wrap; padding: 1rem; background-color: $black; color: $white; span, a { display: inline-block; flex-shrink: 1; align-self: center; } &_label { padding: 1rem; } &_filler { flex-grow: 1; } &_tag { padding: 1rem; white-space: nowrap; &_remove { margin-left: 0.5rem; vertical-align: 0; font-size: 1.4rem; cursor: pointer; } } &_clear { align-self: flex-end; margin: 0.5rem; padding: 0.5rem 1rem; border: 1px solid $white; color: $white; &:hover { color: $white; } } } // stylelint-disable-next-line order/order @include breakpoint(medium down) { &__mobile { display: block; } &.-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; flex-flow: column; max-height: 100vh; #{$root}__mobile { flex-grow: 0; &_view { display: block; padding: $half-margin; border-top: 1px solid $gray; text-align: center; } } #{$root}__list { display: block; flex-grow: 1; flex-shrink: 1; padding: $margin; overflow-x: hidden; overflow-y: auto; &.-expand { #{$root}__item { font-weight: bold; color: $primary; .flyout { display: block; font-weight: normal; color: $black; .section__list { display: block; &#{$root}__extra { display: none; } } } &:not(.-expand) { display: none; } } } } #{$root}__active { flex-direction: column; background-color: $white; &_label, &_tag { display: none; } &_clear { width: 100%; background-color: $black; } } #{$root}__item, .section__item { position: relative; margin: $margin 0; padding: 0 $margin; border: 0; cursor: pointer; &.-next::after { $symbol: map-get($icons, 'chevron-right'); @include icon-content-extended($symbol, inline-block); position: absolute; right: 0; transform: translateY(0.2rem); text-align: right; } &.-prev::before { $symbol: map-get($icons, 'chevron-left'); @include icon-content-extended($symbol, inline-block); position: absolute; left: 0; transform: translateY(0.2rem); text-align: left; } &:hover { color: $primary; .sub-section__list { color: $black; } } } .section__link { display: inline-block; padding: 0; } .section__list { display: none; } .flyout { display: none; } .sub-section__item:hover { color: $primary; } .section__item, .sub-section__item { &.-active::after { $symbol: map-get($icons, 'hook'); @include icon-content-extended($symbol, inline-block); position: absolute; right: 0; transform: translateY(0.2rem); text-align: right; } } } } // stylelint-disable-next-line order/order @include breakpoint(pre-large) { position: relative; &__extra { &:first-child { display: block; border-bottom: 0; } &:not(:first-child) { display: flex; justify-content: right; border-top: 0; } } &__list { position: relative; display: flex; flex-wrap: wrap; border-bottom: 1px solid $gray; } &__link, .section__link, .section__item[data-role=filter], .sub-section__item[data-role=filter] { cursor: pointer; } &__item { width: percentage($filter-header-column-width / $grid-columns); margin-bottom: -1px; padding: 1rem; border-bottom: 1px solid $gray; text-align: center; &:hover, &.-active { margin-top: -1px; padding-top: calc(1rem + 1px); padding-bottom: calc(1rem - 5px); border-bottom: 5px solid $primary; } &.-active { .flyout { top: 100%; right: 0; left: 0; z-index: 100; display: block; max-height: 200px; text-align: left; } } .icon { display: inline-block; margin-left: 1rem; } .flyout { position: absolute; display: none; max-height: 0; .section__list { background: $white; gap: $half-margin; .section__item, .sub-section__item { width: calc((100% - #{$three-halves-margin}) / 4); border: 1px solid $black; &.-active { background-color: $black; color: $white; &::after { $symbol: map-get($icons, 'hook'); @include icon-content-extended($symbol); float: right; margin-top: 0.4rem; } } } .sub-section__item { width: calc(100% - #{$three-halves-margin}); padding: $half-margin; } &.-grouped { .section__item { border: 0; } } } } } } } - URL: /components/raw/molecules-filter/_filter.scss
- Filesystem Path: src/components/02-ui-components/02-molecules/27-filter/_filter.scss
- Size: 6.8 KB
- Handle: @molecules-filter
- Preview:
- Filesystem Path: src/components/02-ui-components/02-molecules/27-filter/filter.hbs
- References (1): @molecules-flyout
There are no notes for this item.