<footer>
<div class="footer-top margin-top-xl">
<div class="newsletter__footer ">
<div class="newsletter__content">
<div class="newsletter__footer--heading ">
<h2 class="newsletter__footer--title">
Wil je 10% korting op je volgende bestelling?
</h2>
<p class="newsletter__footer--subtitle">
Meld je nu aan voor de nieuwsbrief van cruc en ontvang 10% korting op je volgende aankoop.
</p>
</div>
<form class="newsletter__form newsletter__footer--form">
<div class="newsletter__footer--fields">
<div class="control">
<label for="newsletter">
<span class="label">Abonneer u op onze nieuwsbrief</span>
<div class="input newsletter__input" >
<label
class="
label
input__label
label--hidden
newsletter__label
"
for="newsletterEmail"
>
Email for newsletter subscription
</label>
<input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
</div>
</label>
<div class="newsletter__footer--agreements">
<div class="checkbox newsletter__footer--checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
<a href="#" title="Privacy Policy">Privacy Policy</a>
</span>
</label>
</div>
</div>
</div>
</div>
<div class="newsletter__footer--button">
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
</form>
</div>
</div>
</div>
<div class="footer-center">
<div class="contact-bar__footer container">
<div class="row">
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
<span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Stuur een mail</span>
<span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Via Facebook</span>
<span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
</div>
</div>
<div class="col-sm-3 flex--row">
<div class="contact-bar__footer--icon"><svg class="icon " role="img">
<use xlink:href="/images/icons-sprite.svg#chat"></use>
</svg>
</div>
<div class="contact-bar__footer--content flex--column">
<span class="contact-bar__footer--title">Via de Chat</span>
<span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer margin-top-xl">
<div class="footer__handler container">
<button class="button button--icon footer__scroll-top" type="button" aria-label="scroll to top">
<svg
class="icon "
role="presentation"
focusable="false"
>
<title>Scroll to top</title>
<use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
</button>
<section class="footer__links">
<div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
<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-customers" aria-controls="dropdown-customers">
Customers
<svg
class="icon dropdown-list__icon dropdown-list__icon--inner"
role="presentation"
focusable="false"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign in">
Login to My Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign up">
Create an Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Orders">
My Orders
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Cart">
My Cart
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Checkout">
Checkout
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
Information
<svg
class="icon dropdown-list__icon dropdown-list__icon--inner"
role="img"
>
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Hours">
Hours
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="About Us">
About Us
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Contact Us">
Contact Us
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Job Openings">
Job Openings
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Returns">
Returns
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Shipping">
Shipping
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 3
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Privacy Policy">
Privacy Policy
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Terms & Conditions">
Terms & Conditions
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Site Map">
Site Map
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 4
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Reviews">
Reviews
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Email Us!">
Email Us!
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-footer'));
</script>
</section>
<div class="footer__social-handler ">
<h3 class="footer__social-list-title">
Let's get social!
</h3>
<ul class="list list--with-icon list--horizontal footer__social-list">
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
<svg
class="icon footer__social-icon"
role="img"
>
<title>Facebook logo</title>
<use xlink:href="/images/icons-sprite.svg#facebook"></use>
</svg>
</a>
</li>
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
<svg
class="icon footer__social-icon"
role="img"
>
<title>Twitter logo</title>
<use xlink:href="/images/icons-sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</div>
<div class="footer__payments">
<ul class="footer__payments-list list list--horizontal ">
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>AfterPay</title>
<use xlink:href="/images/icons-sprite.svg#afterpay"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>iDEAL</title>
<use xlink:href="/images/icons-sprite.svg#ideal"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
<title>PayPal</title>
<use xlink:href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use xlink:href="/images/icons-sprite.svg#american-express"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
<title>Visa</title>
<use xlink:href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
</ul>
</div>
</div>
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<div class="footer__switchers">
<div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
<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-content1">
German
<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-content1" 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('language-dropdown'));
</script>
<div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
<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-content2">
USD - US Dollar
<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-content2" 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('currency-dropdown'));
</script>
</div>
</div>
</section>
<div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
<div class="cookie-message__container">
<p class="cookie-message__text">
<a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
</p>
<button class="
button
button--icon
cookie-message__close
cookie-message__button
button--rotate-icon
" type="button" aria-label="Close cookie message">
<svg
class="icon button__icon cookie-message__button-icon"
role="presentation"
focusable="false"
>
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
</div>
</footer>
<script src="/components/raw/footer/footer.js"></script>
<footer>
<div class="footer-top {{ class }}">
{{ render '@newsletter--footer' }}
</div>
<div class="footer-center">
{{ render '@contact-bar--footer' }}
</div>
<div class="footer {{ class }}" {{{ attributes }}}>
{{#if handler }}
<div class="footer__handler {{ handlerClass }}">
{{ render '@button--icon' scrollToTop }}
<section class="footer__links">
{{ render '@dropdown-list' linkList }}
</section>
<div class="footer__social-handler {{ socialHandlerClass }}">
<h3 class="footer__social-list-title">
{{ socialListTitle }}
</h3>
{{ render '@list--icon' socialIconList }}
</div>
<div class="footer__payments">
<ul class="footer__payments-list list list--horizontal {{ paymentsList.class }}">
{{#each paymentsList.elements as |element|}}
<li class="list__item">
{{ render '@icon' element }}
</li>
{{/each}}
</ul>
</div>
</div>
{{/if}}
{{#if bottomBar }}
<section
class="footer__bottom-bar {{ bottomBar.class }}"
{{{ bottomBar.attributes }}}
>
<div class="footer__bottom-bar-handler {{ bottomBar.handlerClass }}">
<div class="footer__copyright">
<small>
{{ copyrightText }}
</small>
</div>
<div class="footer__switchers">
{{ render '@dropdown-list--detailed-content' language }}
{{ render '@dropdown-list--detailed-content' currency }}
</div>
</div>
</section>
{{/if}}
{{#if cookieMessage }}
{{ render '@cookie-message' }}
{{/if}}
</div>
</footer>
{{#if script }}
<script src="{{ static 'footer.js' }}"></script>
{{/if}}
{
"script": true,
"cookieMessage": true,
"handler": true,
"class": "margin-top-xl",
"handlerClass": "container",
"scrollToTop": {
"tag": "button",
"class": "footer__scroll-top",
"attributes": "type=\"button\" aria-label=\"scroll to top\"",
"icon": {
"title": "Scroll to top",
"id": "arrow-up",
"hidden": true
}
},
"socialListTitle": "Let's get social!",
"socialHandlerClass": "",
"socialIconList": {
"listTag": "ul",
"elementTag": "li",
"class": "list--with-icon list--horizontal footer__social-list",
"elements": [
{
"linkClass": "button button--icon button--icon-border",
"icon": {
"id": "facebook",
"title": "Facebook logo",
"class": "footer__social-icon"
},
"iconItemLink": "#",
"linkAttributes": "aria-label=\"Go to Our Facebook Page\""
},
{
"linkClass": "button button--icon button--icon-border",
"icon": {
"id": "twitter",
"title": "Twitter logo",
"class": "footer__social-icon"
},
"iconItemLink": "#",
"linkAttributes": "aria-label=\"Check Our on Twitter\""
}
]
},
"linkList": {
"id": "dropdown-footer",
"class": "dropdown-list--with-breakpoint",
"dropdowns": [
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-customers\"",
"title": "Customers",
"id": "dropdown-customers",
"collapse": {
"class": "dropdown-list__icon dropdown-list__icon--inner",
"id": "angle-down",
"title": "Arrow down",
"hidden": true
},
"contentElement": "list--columns",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "footer__links-list",
"columns": [
{
"text": "Column 1",
"class": "list__column--hidden",
"elements": [
{
"text": "Login to My Account",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Sign in\""
},
{
"text": "Create an Account",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Sign up\""
},
{
"text": "My Orders",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"My Orders\""
}
]
},
{
"text": "Column 2",
"class": "list__column--hidden",
"elements": [
{
"text": "My Cart",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"My Cart\""
},
{
"text": "Checkout",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Checkout\""
}
]
}
]
}
},
{
"itemTag": "button",
"itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-information\"",
"title": "Information",
"id": "dropdown-information",
"collapse": {
"class": "dropdown-list__icon dropdown-list__icon--inner",
"id": "angle-down",
"title": "Arrow down"
},
"contentElement": "list--columns",
"contentContext": {
"listTag": "ul",
"elementTag": "li",
"class": "footer__links-list",
"columns": [
{
"text": "Column 1",
"class": "list__column--hidden",
"elements": [
{
"text": "Hours",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Hours\""
},
{
"text": "About Us",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"About Us\""
},
{
"text": "Contact Us",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Contact Us\""
}
]
},
{
"text": "Column 2",
"class": "list__column--hidden",
"elements": [
{
"text": "Job Openings",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Job Openings\""
},
{
"text": "Returns",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Returns\""
},
{
"text": "Shipping",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Shipping\""
}
]
},
{
"text": "Column 3",
"class": "list__column--hidden",
"elements": [
{
"text": "Privacy Policy",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Privacy Policy\""
},
{
"text": "Terms & Conditions",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Terms & Conditions\""
},
{
"text": "Site Map",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Site Map\""
}
]
},
{
"text": "Column 4",
"class": "list__column--hidden",
"elements": [
{
"text": "Reviews",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Reviews\""
},
{
"text": "Email Us!",
"linkClass": "footer__link",
"link": "#",
"linkAttributes": "title=\"Email Us!\""
}
]
}
]
}
}
]
},
"copyrightText": "Copyright © 2019 Alpaca",
"bottomBar": {
"handlerClass": "container"
},
"paymentsList": {
"class": "",
"elements": [
{
"id": "afterpay",
"title": "AfterPay",
"class": "footer__payments-list-icon"
},
{
"id": "ideal",
"title": "iDEAL",
"class": "footer__payments-list-icon"
},
{
"id": "paypal",
"title": "PayPal",
"class": "footer__payments-list-icon footer__payments-list-icon--paypal"
},
{
"id": "american-express",
"title": "American Express",
"class": "footer__payments-list-icon"
},
{
"id": "visa",
"title": "Visa",
"class": "footer__payments-list-icon footer__payments-list-icon--visa"
}
]
},
"language": {
"class": "dropdown-list--detailed-content footer__dropdown-switcher",
"id": "language-dropdown",
"dropdowns": [
{
"itemTag": "a",
"itemAttributes": "href=\"#\" aria-expanded=\"false\"",
"title": "German",
"id": "dropdown-detailed-content1",
"collapse": {
"id": "angle-down",
"title": "Arrow Down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "list"
}
]
},
"currency": {
"class": "dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs",
"id": "currency-dropdown",
"dropdowns": [
{
"itemTag": "a",
"itemAttributes": "href=\"#\" aria-expanded=\"false\"",
"title": "USD - US Dollar",
"id": "dropdown-detailed-content2",
"collapse": {
"id": "angle-down",
"title": "Arrow Down",
"class": "dropdown-list__icon",
"attributes": "aria-hidden=\"true\""
},
"contentElement": "list"
}
]
}
}
$footer__padding : $spacer--medium !default;
$footer__background : $rgb-gray-lighter !default;
$footer__background-color : transparent !default;
$footer__border : 0 !default;
$footer__border-width : 0 !default;
$footer__background-color--email : $white !default;
$footer__handler-padding : $spacer--medium 0 !default;
$footer__handler-padding\@medium : $spacer--medium $spacer--semi-large !default;
$footer__handler-padding\@large : $spacer--medium 0 !default;
$footer__newsletter-width\@large : 75% !default;
$footer__newsletter-margin : 0 $spacer--medium !default;
$footer__newsletter-padding\@large : $spacer--medium $spacer--extra-large $spacer--extra-large $spacer--semi-medium !default;
$footer__newsletter-margin\@large : 0 !default;
$footer__newsletter-border : 0 solid $gray-light !default;
$footer__newsletter-border-width : 0 !default;
$footer__link-font-size : $font-size-medium !default;
$footer__link-color : $gray-darker !default;
$footer__link-color-hover : $color-primary !default;
$footer__link-font-weight : $font-weight-base !default;
$footer__link-margin : 0 !default;
$footer__link-margin\@medium : 0 !default;
$footer__links-width : 100% !default;
$footer__links-padding : 0 !default;
$footer__links-padding\@large : 0 0 $spacer--large !default;
$footer__links-dropdown-background : $white !default;
$footer__links-dropdown-padding\@medium : 0 !default;
$footer__links-label-background : $white !default;
$footer__links-label-color : $color-primary !default;
$footer__links-content-margin : 0 !default;
$footer__links-dropdown-list-margin : 0 0 $spacer--semi-medium !default;
$footer__links-dropdown-list-padding\@medium : $spacer--large 0 0 !default;
$footer__links-dropdown-list-padding\@large : $spacer--large $spacer--extra-large 0 !default;
$footer__links-dropdown-list-padding\@extra-large : $spacer--large $spacer--semi-medium 0 !default;
$footer__links-dropdown-list-border : $spacer--extra-small solid $gray-light !default;
$footer__links-dropdown-list-border-width : 0 0 $spacer--extra-small 0 !default;
$footer__links-dropdown-list-border-width\@large : 0 !default;
$footer__links-dropdown-list-item-width : 100% !default;
$footer__links-dropdown-list-item-width-first-child\@medium: 100% !default;
$footer__links-dropdown-list-item-border : $border-base !default;
$footer__links-dropdown-icon-color : $color-secondary !default;
$footer__links-dropdown-icon-color-hover : $color-primary !default;
$footer__links-dropdown-icon-color-open : $color-primary !default;
$footer__links-list-item-min-width\@medium : 204px !default;
$footer__links-list-padding : 0 0 $spacer--medium 0 !default;
$footer__social-handler-margin : $spacer 0 !default;
$footer__social-handler-margin\@large : 0 !default;
$footer__social-handler-padding : 0 $spacer--medium !default;
$footer__social-handler-padding\@large : 56px $spacer--large !default;
$footer__social-list-title-font-size : $font-size-large !default;
$footer__social-list-title-font-family : $font-family-base !default;
$footer__social-list-title-margin : 0 0 $spacer--medium 0 !default;
$footer__social-list-title-margin\@medium : 0 $spacer--large 0 0 !default;
$footer__social-list-title-margin\@large : 0 0 $spacer--large 0 !default;
$footer__social-list-title-font-weight : $font-weight-bold !default;
$footer__social-list-title-color : $color-primary !default;
$footer__address--background-color : $gray-lighter !default;
$footer__bottom-bar-background : $white !default;
$footer__bottom-bar-color : $theme-dark !default;
$footer__bottom-min-height : 80px !default;
$footer__bottom-padding\@large : 0 $spacer--semi-large !default;
$footer__bottom-padding\@xl : 0 !default;
$footer__bottom-align : center !default;
$footer__bottom-border : 2px solid $theme-tertiary !default;
$footer__copywrite-padding : $spacer 0 !default;
$footer__copywrite-padding\@medium : $spacer--medium 0 !default;
$footer__copywrite-font-size : $font-size-medium !default;
$footer__copywrite-color : $theme-dark !default;
$footer__payments-width : 100% !default;
$footer__payments-border-top : 1px solid $gray-light !default;
$footer__payments-list-margin : 0 auto !default;
$footer__payments-list-margin\@medium : 0 auto !default;
$footer__payments-list-icon-width : 64px !default;
$footer__payments-list-icon-height : 48px !default;
$footer__payments-list-icon-width--visa : 68px !default;
$footer__payments-list-icon-width--paypal : 96px !default;
$footer__payments-list-icon-fill : $gray !default;
$footer__payments-list-width : 90% !default;
$footer__payments-list-width\@medium : 60% !default;
$footer__scroll-top-top : -49px !default;
$footer__scroll-top-right : 0 !default;
$footer__scroll-top-before-transform : $button__before-transform-hover !default;
$footer__scroll-top-icon-fill : $white !default;
$footer__scroll-top-bg : $color-primary !default;
$footer__scroll-top-bg-hover : $color-primary !default;
$footer__social-list__item-padding : 0 !default;
$footer__social-list__item-margin : 0 $spacer 0 0 !default;
$footer__social-list__item-margin-last-child : 0 !default;
$footer__social-list__icon-link-size : 48px !default;
$footer__social-list__icon-link-padding : 0 !default;
$footer__social-list__icon-link-margin\@large : 0 0 $spacer !default;
$footer__switchers-padding : $spacer 0 !default;
$footer__switchers-width\@small : 100% !default;
$footer__switchers-width\@xl : auto !default;
$footer__switchers-order : 3 !default;
$footer__switcher-background-color : transparent !default;
$footer__switcher-label-background-color : $gray-darkest !default;
$footer__switcher-label-padding : $spacer--small $spacer--semi-large $spacer--small $spacer--small !default;
$footer__switcher-label-color : $white !default;
$footer__switcher-content-bottom : 100% !default;
$footer__switcher-content-width : 100% !default;
$footer__switcher-content-padding : $spacer--small $spacer--small 0 !default;
$footer__switcher-button-font-weight : $font-weight-normal !default;
$footer__switcher-button-min-height : 0 !default;
$footer__switcher-button-text-decoration : none !default;
$footer__switcher-button-hover-text-decoration : underline !default;
// Footer Checkout variant
$footer__bottom-bar-handler-padding--checkout : $spacer--semi-medium 0 0 0 !default;
@import 'footer-variables';
footer {
background-color: $footer__background;
}
.footer {
flex-shrink: 0;
border: $footer__border;
border-width: $footer__border-width;
background-color: $footer__background-color;
&--checkout {
.footer__bottom-bar-handler {
padding: $footer__bottom-bar-handler-padding--checkout;
@include mq($screen-m) {
padding: 0;
}
}
}
&--email {
background-color: $footer__background-color--email;
}
&__handler {
position: relative;
display: flex;
flex-direction: column;
padding: $footer__handler-padding;
@include mq($screen-m) {
padding: $footer__handler-padding\@medium;
}
@include mq($screen-l) {
flex-flow: row wrap;
padding: $footer__handler-padding\@large;
}
}
&__newsletter {
border: $footer__newsletter-border;
border-width: $footer__newsletter-border-width;
@include mq($screen-l) {
width: $footer__newsletter-width\@large;
padding: $footer__newsletter-padding\@large;
margin: $footer__newsletter-margin\@large;
}
input {
border: none;
}
.newsletter__controls {
width: 100%;
}
}
&__links {
width: $footer__links-width;
padding: $footer__links-padding;
@include mq($screen-m) {
max-width: 75%;
}
@include mq($screen-l) {
padding: $footer__links-padding\@large;
}
.dropdown-list {
background-color: $footer__links-dropdown-background;
@include mq($screen-m) {
padding: $footer__links-dropdown-padding\@medium;
}
&__label {
background-color: $footer__links-label-background;
color: $footer__links-label-color;
&:hover,
&.focus-visible {
& > .dropdown-list__icon {
fill: $footer__links-dropdown-icon-color-hover;
}
}
&[aria-expanded="true"] {
& > .dropdown-list__icon {
fill: $footer__links-dropdown-icon-color-open;
}
}
}
&__content {
margin: $footer__links-content-margin;
}
&__list {
margin: $footer__links-dropdown-list-margin;
border: $footer__links-dropdown-list-border;
border-width: $footer__links-dropdown-list-border-width;
@include mq($screen-m) {
padding: $footer__links-dropdown-list-padding\@medium;
}
@include mq($screen-l) {
padding: $footer__links-dropdown-list-padding\@large;
border-width: $footer__links-dropdown-list-border-width\@large;
}
@include mq($screen-xl) {
padding: $footer__links-dropdown-list-padding\@extra-large;
}
}
&__item {
width: $footer__links-dropdown-list-item-width;
border-bottom: $footer__links-dropdown-list-item-border;
@include mq($screen-m) {
border: none;
}
&:first-child {
@include mq($screen-m) {
width: $footer__links-dropdown-list-item-width-first-child\@medium;
}
}
&:last-child {
border: none;
}
}
&__icon {
fill: $footer__links-dropdown-icon-color;
}
}
.list__item {
@include mq($screen-m) {
min-width: $footer__links-list-item-min-width\@medium;
}
}
.no-display {
display: none;
}
}
&__links-list {
padding: $footer__links-list-padding;
}
&__link {
display: block;
margin: $footer__link-margin;
font-size: $footer__link-font-size;
font-weight: $footer__link-font-weight;
color: $footer__link-color;
text-decoration: none;
@include mq($screen-m) {
margin: $footer__link-margin\@medium;
}
&:hover {
color: $footer__link-color-hover;
}
}
&__social-handler {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: $footer__social-handler-margin;
order: 1;
@include mq($screen-m) {
align-items: center;
flex-direction: row;
}
@include mq($screen-l) {
flex-direction: column;
flex: 1;
order: 0;
margin: $footer__social-handler-margin\@large;
padding: $footer__social-handler-padding\@large;
border-bottom: $footer__newsletter-border;
position: relative;
//&:before {
// content: '';
// position: absolute;
// left: 0;
// top: 0;
// width: 1px;
// height: 90%;
// background: $gray;
//}
}
}
&__social-list {
@include mq($screen-l) {
align-self: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.list__item {
padding: $footer__social-list__item-padding;
margin: $footer__social-list__item-margin;
&:last-child {
margin: $footer__social-list__item-margin-last-child;
}
}
.list__icon-link {
width: $footer__social-list__icon-link-size;
height: $footer__social-list__icon-link-size;
padding: $footer__social-list__icon-link-padding;
@include mq($screen-l) {
margin: $footer__social-list__icon-link-margin\@large;
}
}
}
&__social-list-title {
display: flex;
align-items: center;
color: $footer__social-list-title-color;
font-family: $footer__social-list-title-font-family;
font-size: $footer__social-list-title-font-size;
font-weight: $footer__social-list-title-font-weight;
margin: $footer__social-list-title-margin;
@include mq($screen-m) {
margin: $footer__social-list-title-margin\@medium;
}
@include mq($screen-l) {
align-self: flex-start;
margin: $footer__social-list-title-margin\@large;
}
}
&__payments {
width: $footer__payments-width;
border-top: $footer__payments-border-top;
&-list {
justify-content: space-around;
margin: $footer__payments-list-margin;
width: $footer__payments-list-width;
@include mq($screen-m) {
flex-flow: row wrap;
margin: $footer__payments-list-margin\@medium;
order: 2;
width: $footer__payments-list-width\@medium;
}
}
&-list-icon {
width: $footer__payments-list-icon-width;
height: $footer__payments-list-icon-height;
fill: $footer__payments-list-icon-fill;
&--visa {
width: $footer__payments-list-icon-width--visa;
}
&--paypal {
width: $footer__payments-list-icon-width--paypal;
}
}
}
&__address {
display: flex;
flex-direction: column;
padding: $spacer--2;
background: $footer__address--background-color;
@include mq($screen-s) {
flex-direction: row;
border-radius: 10px;
}
}
&__store {
display: flex;
flex-direction: column;
margin-right: $spacer--4;
&--address {
margin-bottom: $spacer--2;
@include mq($screen-s) {
margin-bottom: 0;
}
}
& span.day {
margin-right: $spacer--25;
}
}
&__bottom-bar {
color: $footer__bottom-bar-color;
background-color: $footer__bottom-bar-background;
border-top: $footer__bottom-border;
}
&__bottom-bar-handler {
display: flex;
align-items: $footer__bottom-align;
flex-direction: column;
min-height: $footer__bottom-min-height;
@include mq($screen-m) {
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
@include mq($screen-l) {
padding: $footer__bottom-padding\@large;
}
@include mq($screen-xl) {
padding: $footer__bottom-padding\@xl;
}
}
&__copyright {
display: block;
order: 2;
padding: $footer__copywrite-padding;
text-align: center;
color: $footer__copywrite-color;
@include mq($screen-m) {
order: 1;
padding: $footer__copywrite-padding\@medium;
}
small {
font-size: $footer__copywrite-font-size;
}
}
&__scroll-top {
position: absolute;
right: $footer__scroll-top-right;
top: $footer__scroll-top-top;
background-color: $footer__scroll-top-bg;
&:before {
transform: $footer__scroll-top-before-transform;
background: none;
}
&:hover {
background-color: $footer__scroll-top-bg-hover;
}
.icon {
fill: $footer__scroll-top-icon-fill;
}
}
&__switchers {
display: flex;
align-items: center;
flex-direction: column;
padding: $footer__switchers-padding;
order: $footer__switchers-order;
@include mq($screen-s) {
flex-direction: row;
justify-content: center;
width: $footer__switchers-width\@small;
}
@include mq($screen-xl) {
width: $footer__switchers-width\@xl;
}
}
&__dropdown-switcher {
width: auto;
background-color: $footer__switcher-background-color;
.dropdown-list__label {
background-color: $footer__switcher-label-background-color;
padding: $footer__switcher-label-padding;
color: $footer__switcher-label-color;
white-space: nowrap;
&[aria-expanded=true] {
background-color: $footer__switcher-label-color;
color: $footer__switcher-label-background-color;
&:hover {
.dropdown-list__icon {
fill: $footer__switcher-label-background-color;
}
}
}
&:hover {
.dropdown-list__icon {
fill: $footer__switcher-label-color;
}
}
}
.dropdown-list__content {
position: absolute;
bottom: $footer__switcher-content-bottom;
width: $footer__switcher-content-width;
padding: $footer__switcher-content-padding;
background-color: $footer__switcher-label-color;
.button {
font-weight: $footer__switcher-button-font-weight;
min-height: $footer__switcher-button-min-height;
text-decoration: $footer__switcher-button-text-decoration;
&:hover,
&:focus,
&.focus-visible {
text-decoration: $footer__switcher-button-hover-text-decoration;
}
}
}
.dropdown-list__icon {
fill: $footer__switcher-label-color;
}
}
}
.belco-widget {
.belco-activator-frame {
z-index: 51;
bottom: 5rem;
right: 1rem;
}
}
.text-color-white {
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
color: #ffffff!important; //sass-lint:disable-line no-important
}
}
'use strict';
const scrollToTop = document.querySelector('.footer__scroll-top');
scrollToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
});
There are no notes for this item.