<header class="header ">
<div class="container">
<div class="header__wrapper">
<a class="logo header__logo" href="/components/preview/home" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Solarwood Logo">
</a>
<div class="header__buttons">
<div class="header__switchers">
<div id="dropdown-default" class="dropdown-list dropdown-list--detailed-content">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-default'));
</script>
</div>
<div class="side-menu ">
<button class="button button--icon modal-trigger button--rotate-icon side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
<svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
<title>Mobile-menu</title>
<use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
<div role="document" class="modal__container side-menu__container" tabindex="0">
<div class="modal__content side-menu__content">
<div class="modal__middle side-menu__content-middle">
<div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
sublist item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-default'));
</script>
</div>
<div class="modal__bottom side-menu__content-bottom">
<div class="modal__bottom-actions side-menu__bottom-actions">
<div class="
modal__bottom-action
side-menu__bottom-action
">
<div class="contact-bar contact-bar--vertical">
<div class="contact-bar__container ">
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Account
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Klantenservice
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Groothandel
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:+31858772604" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
T: 085 - 877 26 04
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:info@solarwood.nl" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
E-mail
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
</script>
</div>
<svg class="icon octagon" role="presentation" focusable="false">
<title>octagon</title>
<use xlink:href="/images/icons-sprite.svg#octagon"></use>
</svg>
</div>
</div>
</div>
</header>
{{#if skipNav }}
{{ render '@skip-nav' }}
{{/if}}
{{#if marketingBar }}
{{ render '@marketing-bar' }}
{{/if}}
{{#if contactBar }}
{{ render '@contact-bar' }}
{{/if}}
<header class="header {{ class }}" {{{ attributes }}}>
<div class="container">
<div class="header__wrapper">
{{#if logo}}
{{ render '@logo' logo merge="true" }}
{{/if}}
{{#if sideMenu}}
<div class="header__buttons">
<div class="header__switchers">
{{ render '@dropdown-list--detailed-content' language }}
</div>
{{ render '@side-menu' }}
{{ render '@icon' octagon.icon }}
</div>
{{/if}}
{{#if links}}
{{#if buttons }}
<div class="header__buttons">
{{#each buttons as |item| }}
<div class="header__icon">
<a
class="
header-button
button
button--icon
button--icon-light
{{ item.class }}
"
href="#"
aria-label="{{ item.ariaLabel }}"
>
{{ render '@icon' item.icon }}
<span class="header-button__label">{{ label }}</span>
</a>
</div>
{{/each}}
{{#if minicart}}
<div class="header__minicart">
<button
type="button"
class="
header-button
button
button--icon
button--icon-light
modal-trigger
margin-left-xs
"
aria-label="{{ minicartTrigger.ariaLabel }}"
data-modal-trigger="modal-minicart"
>
{{ render '@icon' minicartTrigger.icon }}
<span class="header-button__counter">
<span class="header-button__counter-dot">2</span>
</span>
<span class="header-button__label">{{ minicartTrigger.label }}</span>
</button>
</div>
{{ render '@modal--secondary' minicartModal merge=true }}
{{/if}}
</div>
{{/if}}
{{/if}}
{{#if search }}
<div class="header__search-wrapper">
<form class="search-form">
<div class="search-form__wrapper">
{{ render '@input' searchInput }}
{{ render '@button--icon' searchButton }}
</div>
{{#if quicksearch }}
{{ render '@quicksearch' }}
{{/if}}
</form>
</div>
{{/if}}
</div>
</div>
</header>
{{#if megaMenu }}
{{ render '@mega-menu' }}
{{/if}}
{
"contactBar": false,
"sideMenu": true,
"search": false,
"quicksearch": false,
"megaMenu": false,
"skipNav": false,
"marketingBar": false,
"links": false,
"minicart": false,
"buttons": [
{
"ariaLabel": "Account",
"class": "button--icon-fill margin-right-xs",
"label": "Aanmelden",
"icon": {
"id": "new-user",
"title": "Account",
"class": "header-button__icon",
"hidden": true
}
},
{
"ariaLabel": "Wishlist",
"class": "button--icon-fill margin-right-xs",
"label": "Verlanglijstje",
"icon": {
"id": "new-heart",
"title": "Heart",
"class": "header-button__icon",
"hidden": true
}
}
],
"logo": {
"class": "header__logo"
},
"searchInput": {
"class": "search-form__input-wrapper margin-0",
"label": {
"text": "Search products",
"hidden": true
},
"field": {
"class": "search-form__input border-color-light",
"id": "search",
"name": "search",
"type": "search",
"placeholder": "Zoeken in de winkel..."
}
},
"octagon": {
"icon": {
"id": "octagon",
"title": "octagon",
"class": "octagon",
"hidden": true
},
"label": "Winkelwagen",
"link": "/cart",
"ariaLabel": "Shopping cart dropdown trigger"
},
"searchButton": {
"tag": "button",
"text": "",
"class": "button--icon search-form__button",
"icon": {
"id": "search",
"title": "Search",
"class": "button__icon",
"hidden": true
},
"attributes": "type=\"button\" aria-label=\"Search\""
},
"minicartTrigger": {
"icon": {
"id": "new-cart",
"title": "Winkelwagen",
"class": "header-button__icon",
"hidden": true
},
"label": "Winkelwagen",
"link": "/cart",
"ariaLabel": "Shopping cart dropdown trigger"
},
"minicartModal": {
"trigger": false,
"modal": {
"id": "modal-minicart",
"attributes": "aria-labelledby=\"minicart-title\" aria-describedby=\"minicart-products\""
},
"modalComponent": {
"content": "minicart-content",
"contentContext": ""
},
"modalContent": {
"class": "modal__content--block"
},
"script": true,
"modalTop": false,
"modalMiddle": false,
"modalBottom": false
},
"briefInfo": {
"items": [
{
"iconLabel": "",
"icon": {
"class": "brief-info__icon",
"id": "",
"title": "",
"hidden": true
},
"title": {
"class": "",
"tag": "span",
"text": ""
},
"subtitle": {
"class": "",
"tag": "span",
"text": ""
}
}
]
}
}
.header-button {
@include mq($screen-xl) {
margin: $header-button__margin\@extra-large;
}
&__counter {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: $header-button__counter-top;
right: $header-button__counter-right;
padding: 2px;
border: $header-button__counter-border;
border-radius: $header-button__counter-size;
line-height: $header-button__counter-font-size;
font-size: $header-button__counter-font-size;
color: $header-button__counter-color;
background-color: $header-button__counter-background;
z-index: $header-button__counter-z-index;
&--hidden {
display: none;
}
&-dot {
min-width: $header-button__counter-dot-size;
min-height: $header-button__counter-dot-size;
border-radius: $header-button__counter-dot-size;
margin: auto;
background-color: $header-button__counter-dot-bg-color;
}
}
&__summary-count {
@include visually-hidden();
}
&.button--icon-fill {
&:before {
background-color: $button__before-background--icon-light;
}
}
}
$header__border : 0 !default;
$header__border-width : 0 0 $border-width-base 0 !default;
$header__border\@large : 0 !default;
$header__border-width\@large : 0 !default;
$header__background : transparent !default;
$header__background--email : $white !default;
$header__sticky-animation : slide-down 1s !default;
$header__wrapper-margin : 0 !default;
$header__wrapper-padding : 0 0 $spacer !default;
$header__wrapper-padding\@medium : $spacer--semi-medium 0 !default;
$header__wrapper-padding\@large : $spacer--semi-medium 0 !default;
$header__wrapper-column-gap : $spacer--semi-medium !default;
$header__logo-padding : 0 0 $spacer--extra-small 0 !default;
$header__logo-padding\@medium : 0 !default;
$header__logo-order\@medium : 0 !default;
$header__side-menu-order : 1 !default;
$header__side-menu-max-width : 50px !default;
$header__buttons-width : calc(100% - (#{$logo__max-width} * 2 + 5% )) !default;
$header__buttons-width\@medium : calc(2 * 48px + 1 * #{$spacer}) !default;
$header__buttons-order\@medium : 3 !default;
$header__buttons-width\@extra-large : 30% !default;
$header__search-wrapper-z-index : $z-index-high + 1 !default;
$header__search-wrapper-padding : 0 !default;
$header__search-wrapper-padding\@medium : 0 24px !default;
$header__search-wrapper-padding\@large : 0 0 0 !default;
$header__search-wrapper-padding\@extra-large : 0 $spacer--small 0 0 !default;
$header__search-wrapper-order : 3 !default;
$header__search-wrapper-order\@medium : 2 !default;
$header__search-wrapper-max-width\@large : 750px !default;
$header__search-wrapper-max-width\@extra-large: 800px !default;
$header__minicart-border\@medium : $border-base !default;
$header__minicart-border-width\@medium : 0 0 0 1px !default;
$header__brief-info-display : none !default;
$header__brief-info-display\@large : flex !default;
$header__brief-info-min-width : 220px !default;
$header__brief-info-order : 3 !default;
$header__brief-info-subtitle-font-size : $font-size-small !default;
// Buttons
$header-button__margin\@extra-large : 0 0 0 $spacer--medium !default;
$header-button__counter-top : 6px !default;
$header-button__counter-right : 6px !default;
$header-button__counter-font-size : $font-size-small !default;
$header-button__counter-background : $theme-second !default;
$header-button__counter-color : $white !default;
$header-button__counter-size : $spacer--medium !default;
$header-button__counter-border : none !default;
$header-button__counter-z-index : $z-index-low !default;
$header-button__counter-dot-size : $spacer--small !default;
$header-button__counter-dot-bg-color : $theme-second !default;
$header-button__icon-before-bg--icon-fill : $button__before-background--icon-light !default;
// Search
$search-form__position : static !default;
$search-form__position\@medium : static !default;
$search-form__height : 34px !default;
$search-form__width : 100% !default;
$search-form__width--extra-large : 70% !default;
$search-form__alignment : flex-end !default;
$search-form__margin : 0 !default;
$search-form__border : 1px solid $gray-light !default;
$search-form__font-size : $input__placeholder-font-size !default;
$search-form__button-margin : 0 !default;
$search-form__button-top : 1px !default;
$search-form__button-right : 0 !default;
$search-form__button-border : $border-base !default;
$search-form__button-border-width : 0 1px !default;
$search-form__button-border-radius : 0 $form-elements-radius $form-elements-radius 0 !default;
$search-form__button-height : 46px !default;
$search-form__button-background--disabled : none !default;
$search-form__button-icon-fill--disabled : $color-primary !default;
$search-form__placeholder-color : $input__placeholder-color !default;
// Checkout variant
$header__wrapper-padding--checkout : 0 !default;
$header__wrapper-padding--checkout\@medium : $spacer--medium 0 !default;
// Octagon
$octagon__size : 150px !default;
$octagon__size\@large : 500px !default;
$octagon__top : calc(#{$octagon__size} * -0.6) !default;
$octagon__top\@large : calc(#{$octagon__size\@large} * -0.6) !default;
$octagon__right : calc(#{$octagon__size} * -0.3) !default;
$octagon__right\@large : calc(#{$octagon__size\@large} * -0.3) !default;
@import 'header-variables';
@import 'button';
@import 'search-form';
.header {
position: relative;
border: none;
padding: 0;
background: $header__background;
z-index: 51;
width: 100%;
top: 0;
@include mq($screen-l) {
border: none;
padding: 0;
}
.octagon {
position: absolute;
width: $octagon__size;
height: $octagon__size;
top: $octagon__top;
right: $octagon__right;
@include mq($screen-l) {
width: $octagon__size\@large;
height: $octagon__size\@large;
top: $octagon__top\@large;
right: $octagon__right\@large;
}
}
&__top {
@include mq($screen-l) {
margin-top: 0;
}
.usps-top--mobile {
display: block;
@include mq($screen-l) {
display: none;
}
.header-usps--item {
display: none;
}
.slick-track {
.header-usps--item {
display: block;
}
}
}
}
&.sticky {
position: fixed;
background: #fff;
border-bottom: 1px solid #f5f5f5;
animation: $header__sticky-animation;
top: 0;
width: 100%;
margin-top: 0;
z-index: 51;
@include mq($screen-l) {
padding: 0;
.quicksearch {
top: 75%;
}
}
.side-menu__trigger {
filter: drop-shadow(0 0 1px $theme-dark);
}
}
&--checkout {
position: static;
.header__wrapper {
padding: $header__wrapper-padding--checkout;
@include mq($screen-m) {
padding: $header__wrapper-padding--checkout\@medium;
}
}
.header__minicart {
border: none;
}
@include mq($screen-l) {
border: $header__border;
border-width: $header__border-width;
}
.sticky {
position: relative !important; // sass-lint:disable-line no-important
}
}
&--email {
background-color: $header__background--email;
}
&__wrapper {
position: unset;
justify-content: space-between;
display: flex;
flex-flow: row wrap;
padding: $header__wrapper-padding;
@include mq($screen-l) {
flex-wrap: nowrap;
border: $header__border\@large;
border-width: $header__border-width\@large;
padding: $header__wrapper-padding\@large;
margin-top: $header__wrapper-margin;
column-gap: $header__wrapper-column-gap;
}
}
&__logo {
padding: $header__logo-padding;
@include mq($screen-l) {
order: $header__logo-order\@medium;
padding: $header__logo-padding\@medium;
}
}
&__search-wrapper {
display: flex;
flex-flow: column nowrap;
flex: 1 100%;
order: $header__search-wrapper-order;
justify-content: center;
padding: $header__search-wrapper-padding;
z-index: $header__search-wrapper-z-index;
width: 100%;
@include mq($screen-l) {
order: $header__search-wrapper-order\@medium;
flex-direction: column;
justify-content: center;
padding: $header__search-wrapper-padding\@large;
max-width: $header__search-wrapper-max-width\@large;
}
@include mq($screen-xl) {
padding: $header__search-wrapper-padding\@extra-large;
max-width: $header__search-wrapper-max-width\@extra-large;
}
}
&__minicart {
position: relative;
display: flex;
flex-direction: column;
//@include mq($screen-m) {
// border: $header__minicart-border\@medium;
// border-width: $header__minicart-border-width\@medium;
//}
}
&__buttons {
display: flex;
flex: 1 $header__buttons-width;
//max-width: $header__buttons-width;
max-width: 100%;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
padding: $header__search-wrapper-padding;
order: 0;
margin-top: 1rem;
@include mq($screen-l) {
order: $header__buttons-order\@medium;
flex-wrap: nowrap;
flex: 1 $header__buttons-width\@extra-large;
//max-width: $header__buttons-width\@extra-large;
padding: $header__search-wrapper-padding\@large;
}
@include mq($screen-xl) {
padding: $header__search-wrapper-padding\@extra-large;
}
.header-button {
min-width: 35px;
min-height: 35px;
margin: 0;
flex-direction: column;
.icon {
width: 25px;
height: 25px;
}
&__counter {
@include mq($screen-m) {
top: -6px;
right: 32px;
width: 16px;
height: 16px;
}
}
&__label {
display: none;
@include mq($screen-m) {
display: flex;
color: #555;
text-transform: capitalize;
padding: 7px 0 0;
}
}
&:after {
display: none;
}
&:hover {
background: transparent;
.header-button__label {
color: $theme-second;
text-decoration: underline;
}
}
}
}
&__icon {
display: flex;
flex-direction: column;
@include mq($screen-xl) {
margin-right: $spacer--semi-medium;
}
}
&__brief-info {
display: $header__brief-info-display;
align-items: center;
order: $header__brief-info-order;
min-width: $header__brief-info-min-width;
@include mq($screen-l) {
display: $header__brief-info-display\@large;
}
.brief-info__subtitle {
font-size: $header__brief-info-subtitle-font-size;
}
}
.side-menu {
max-width: $header__side-menu-max-width;
order: $header__side-menu-order;
flex: 1 $header__side-menu-max-width;
margin-top: 1rem;
@include mq($screen-l) {
display: flex;
order: 2;
max-width: 48px;
margin-top: 0;
}
}
}
.prismicio-route-view,
.prismicio-direct-page {
.header,
.breadcrumbs {
position: absolute;
}
.breadcrumbs {
z-index: 9;
top: 3rem;
@include mq($screen-m) {
top: 5rem;
}
&__item {
a {
color: $white;
opacity: 0.45;
&:hover {
opacity: 0.9;
}
}
&[aria-current="true"] {
border-bottom: 1px solid $white;
padding: 0.5rem;
color: $white;
opacity: 1;
}
}
}
}
.search-form {
width: $search-form__width;
align-self: $search-form__alignment;
line-height: $font-line-height;
margin: $search-form__margin;
position: $search-form__position;
@include mq($screen-m) {
position: $search-form__position\@medium;
}
&__wrapper {
position: relative;
}
&__input-wrapper {
position: relative;
}
&__input {
width: 100%;
}
&__button {
position: absolute;
top: $search-form__button-top;
right: $search-form__button-right;
height: $search-form__button-height;
min-height: $search-form__button-height;
margin: $search-form__button-margin;
border: $search-form__button-border;
border-width: $search-form__button-border-width;
border-radius: $search-form__button-border-radius;
&:disabled,
&[disabled] {
background: $search-form__button-background--disabled;
&:hover {
background: $search-form__button-background--disabled;
}
.icon {
fill: $search-form__button-icon-fill--disabled;
}
}
}
}
{{#if skipNav }}
{{ render '@skip-nav' }}
{{/if}}
{{#if marketingBar }}
{{ render '@marketing-bar' }}
{{/if}}
{{#if contactBar }}
{{ render '@contact-bar' }}
{{/if}}
<header class="header {{ class }}" {{{ attributes }}}>
<div class="container">
<div class="header__wrapper">
{{#if logo}}
{{ render '@logo' logo merge="true" }}
{{/if}}
{{#if sideMenu}}
{{ render '@side-menu' }}
{{/if}}
{{#if buttons }}
<div class="header__buttons">
{{#each buttons as |item| }}
<div class="header__icon">
<a
class="
header-button
button
button--icon
button--icon-light
{{ item.class }}
"
href="#"
aria-label="{{ item.ariaLabel }}"
>
{{ render '@icon' item.icon }}
<span class="header-button__label">{{ label }}</span>
</a>
</div>
{{/each}}
{{#if minicart}}
<div class="header__minicart">
<button
type="button"
class="
header-button
button
button--icon
button--icon-light
modal-trigger
margin-left-xs
"
aria-label="{{ minicartTrigger.ariaLabel }}"
data-modal-trigger="modal-minicart"
>
{{ render '@icon' minicartTrigger.icon }}
<span class="header-button__counter">
<span class="header-button__counter-dot">2</span>
</span>
<span class="header-button__label">{{ minicartTrigger.label }}</span>
</button>
</div>
{{ render '@modal--secondary' minicartModal merge=true }}
{{/if}}
</div>
{{/if}}
{{#if search }}
<div class="header__search-wrapper">
<form class="search-form">
<div class="search-form__wrapper">
{{ render '@input' searchInput }}
{{ render '@button--icon' searchButton }}
</div>
{{#if quicksearch }}
{{ render '@quicksearch' }}
{{/if}}
</form>
</div>
{{/if}}
</div>
</div>
</header>
{{#if megaMenu }}
{{ render '@mega-menu' }}
{{/if}}
There are no notes for this item.