<footer>
    <div class="footer-top margin-top-xl footer--checkout">
        <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 snurky 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 footer--checkout">

        <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>
</footer>
<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 class="kiyoh-tww flex width-full margin-top-l">
                        <div class="kiyoh margin-right-l">
                            <!-- Plaats hieronder de kiyoh_widget -->
                            <iframe frameborder="0" allowtransparency="true" src="https://www.kiyoh.com/retrieve-widget.html?color=white&amp;allowTransparency=true&amp;button=false&amp;lang=nl&amp;tenantId=98&amp;locationId=1077275" width="120" height="160" data-dashlane-frameid="3823"></iframe>
                        </div>
                        <div class="thuiswinkel">
                            <!-- Hier de thuiswinkel code -->
                            <a href="https://www.thuiswinkel.org/leden/online-slaapcomfort/certificaat/">
                                <img src="https://onlinebinnenstad.cdn.prismic.io/onlinebinnenstad/461dfeea-2991-4eaf-9cfd-defdf67ca2c0_logo-thuiswinkel_waarborg.svg" height="150" width="154" loading="lazy" class=" lazyloaded">
                            </a>
                        </div>
                    </div>
                </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": false,
  "cookieMessage": false,
  "handler": false,
  "class": "margin-top-xl footer--checkout",
  "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"
      }
    ]
  }
}
  • Content:
    $footer__padding                                           : $spacer--medium !default;
    $footer__background                                        : $theme-tertiary !default;
    $footer__background-color                                  : $theme-second !default;
    $footer__border                                            : 0 !default;
    $footer__border-width                                      : 0 !default;
    $footer__background-color--email                           : $black !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                                : 3rem 0 !default;
    $footer__newsletter-padding\@large                         : 4rem !default;
    $footer__newsletter-margin\@large                          : 0 !default;
    $footer__newsletter-border                                 : 0 solid $gray-light !default;
    $footer__newsletter-border-width                           : 0 0 $spacer--extra-small 0 !default;
    
    $footer__link-font-size                                    : $font-size-medium !default;
    $footer__link-color                                        : $black !default;
    $footer__link-color-hover                                  : $black !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                         : $theme-second !default;
    $footer__links-dropdown-padding\@medium                    : 0 !default;
    $footer__links-label-background                            : $theme-second !default;
    $footer__links-label-color                                 : $theme-tertiary !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: 50% !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                           : $black !default;
    
    $footer__address--background-color                         : $gray-lighter !default;
    
    $footer__bottom-bar-background                             : $theme-second !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-second !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                                   : $black !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;
    
  • URL: /components/raw/footer/_footer-variables.scss
  • Filesystem Path: build/components/Organisms/footer/_footer-variables.scss
  • Size: 9 KB
  • Content:
    @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;
            }
        }
    
        &__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;
                        }
                        @include mq($screen-l) {
                            width: $footer__links-dropdown-list-item-width;
                        }
                    }
    
                    &: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;
    
            .kiyoh-tww {
                flex-direction: row-reverse;
            }
    
            @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-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;
            }
        }
        .cookie-message {
            &__text {
                color: $white;
                a {
                    color: $theme-tertiary;
                    &:hover {
                        color: $white;
                    }
                }
            }
        }
    }
    .belco-widget {
        .belco-activator-frame {
            z-index: 51;
            bottom: 5rem;
            right: 1rem;
        }
    }
    
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: build/components/Organisms/footer/_footer.scss
  • Size: 12.5 KB
  • Content:
    'use strict';
    
    const scrollToTop = document.querySelector('.footer__scroll-top');
    
    scrollToTop.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    });
    
  • URL: /components/raw/footer/footer.js
  • Filesystem Path: build/components/Organisms/footer/footer.js
  • Size: 207 Bytes

There are no notes for this item.