Alpaca components for Magento 2

Footer 

<footer class="footer margin-top-xl">
    <div class="footer__handler container">
        <button class="button button--icon footer__scroll-top" type="button" data-focus-top="skip-nav-top" aria-label="scroll to top">
            <svg class="icon " role="presentation" focusable="false">
                <title>Scroll to top</title>
                <use href="/images/icons-sprite.svg#arrow-up"></use>
            </svg>

        </button>

        <section class="footer__newsletter">
            <div class="newsletter ">
                <div class="newsletter__heading ">
                    <h2 class="newsletter__title">
                        JOIN OUR EMAIL LIST
                    </h2>
                    <p class="newsletter__subtitle">
                        Sign up for savings and product announcements
                    </p>
                </div>
                <form class="newsletter__form">
                    <div class="newsletter__controls">
                        <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>

                        <button class="button button--secondary newsletter__button">
                            Sign Up
                        </button>

                    </div>
                    <div class="newsletter__agreements">
                        <div class="checkbox newsletter__checkbox">
                            <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                            <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                <use href="/images/icons-sprite.svg#checked"></use>
                            </svg>
                            <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                <use href="/images/icons-sprite.svg#unchecked"></use>
                            </svg>
                            <label for="newsletter" class="checkbox__label ">
                                <span class="checkbox__text">
                                    I agree to <a href="#" title="Terms and conditions">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions.
                                </span>
                            </label>
                        </div>

                    </div>
                </form>
            </div>

        </section>

        <div class="footer__social-handler ">
            <h3 class="footer__social-list-title">
                Let&#x27;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 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 href="/images/icons-sprite.svg#twitter"></use>
                        </svg>

                    </a>
                </li>
            </ul>

        </div>

        <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 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 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 &amp; 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>

    <section class="footer__bottom-bar ">
        <div class="footer__bottom-bar-handler container">
            <div class="footer__copyright">
                <small>
                    Copyright © 2019 Alpaca
                </small>
            </div>

            <ul class="
                        footer__payments-list
                        list
                        list--horizontal
                        
                    ">
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
                        <title>Visa</title>
                        <use href="/images/icons-sprite.svg#visa"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Master Card</title>
                        <use href="/images/icons-sprite.svg#master-card"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Discover</title>
                        <use href="/images/icons-sprite.svg#discover"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>American Express</title>
                        <use 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--paypal" role="img">
                        <title>PayPal</title>
                        <use href="/images/icons-sprite.svg#paypal"></use>
                    </svg>

                </li>
            </ul>

            <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 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 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 href="/images/icons-sprite.svg#close"></use>
                </svg>

            </button>
        </div>
    </div>
    <script src="/components/raw/cookie-message/cookie-message.js"></script>

</footer>

<script src="/components/raw/footer/footer.js"></script>
 
<footer class="footer {{ class }}" {{{ attributes }}}>
    {{#if handler }}
        <div class="footer__handler {{ handlerClass }}">
            {{#if scrollToTop}}
                {{ render '@button--icon' scrollToTop }}
            {{/if}}

            {{#if newsletter}}
                <section class="footer__newsletter">
                    {{ render '@newsletter' }}
                </section>
            {{/if}}

            {{#if socialIconList}}
                <div class="footer__social-handler {{ socialHandlerClass }}">
                    {{#if socialListTitle}}
                        <h3 class="footer__social-list-title">
                            {{ socialListTitle }}
                        </h3>
                    {{/if}}

                    {{ render '@list--icon' socialIconList }}
                </div>
            {{/if}}

            {{#if linkList}}
                <section class="footer__links">
                    {{ render '@dropdown-list' linkList }}
                </section>
            {{/if}}
        </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>

                <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>

                {{#if (or language currency)}}
                    <div class="footer__switchers">
                        {{#if language}}
                            {{ render '@dropdown-list--detailed-content' language }}
                        {{/if}}

                        {{#if currency}}
                            {{ render '@dropdown-list--detailed-content' currency }}
                        {{/if}}
                    </div>
                {{/if}}
            </div>
        </section>
    {{/if}}

    {{#if cookieMessage }}
        {{ render '@cookie-message' }}
    {{/if}}
</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\" data-focus-top=\"skip-nav-top\" aria-label=\"scroll to top\"",
    "icon": {
      "title": "Scroll to top",
      "id": "arrow-up",
      "hidden": true
    }
  },
  "newsletter": 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": "visa",
        "title": "Visa",
        "class": "footer__payments-list-icon footer__payments-list-icon--visa"
      },
      {
        "id": "master-card",
        "title": "Master Card",
        "class": "footer__payments-list-icon"
      },
      {
        "id": "discover",
        "title": "Discover",
        "class": "footer__payments-list-icon"
      },
      {
        "id": "american-express",
        "title": "American Express",
        "class": "footer__payments-list-icon"
      },
      {
        "id": "paypal",
        "title": "PayPal",
        "class": "footer__payments-list-icon footer__payments-list-icon--paypal"
      }
    ]
  },
  "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__background-color                                  : $gray-lighter !default;
$footer__flex-shrink                                       : 0 !default;
$footer__border                                            : $border-secondary !default;
$footer__border-width                                      : 1px 0 0 0 !default;
$footer__background-color--email                           : $white !default;

$footer__handler-position                                  : relative !default;
$footer__handler-display                                   : flex !default;
$footer__handler-flex-direction                            : column !default;
$footer__handler-padding                                   : $spacer--medium $spacer--semi-medium !default;
$footer__handler-padding\@medium                           : $spacer--medium $spacer--semi-large !default;
$footer__handler-padding\@large                            : $spacer--medium 0 !default;
$footer__handler-flex-flow\@large                          : row wrap !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                                 : $spacer--extra-small solid $gray-light !default;
$footer__newsletter-border-width                           : 0 0 $spacer--extra-small 0 !default;

$footer__link-display                                      : block !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__link-text-decoration                              : none !default;

$footer__links-width                                       : 100% !default;
$footer__links-padding                                     : 0 !default;
$footer__links-padding\@large                              : 0 0 $spacer--large !default;
$footer__links-dropdown-background                         : $gray-lighter !default;
$footer__links-dropdown-padding\@medium                    : 0 !default;
$footer__links-label-background                            : $gray-lighter !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: 50% !default;
$footer__links-dropdown-list-item-border                   : $border-base !default;
$footer__links-dropdown-list-item-border\@medium           : none !default;
$footer__links-dropdown-list-item-border-last-child        : none !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-order                                      : 1 !default;
$footer__social-order\@large                               : 0 !default;

$footer__social-handler-display                            : flex !default;
$footer__social-handler-flex-direction                     : column !default;
$footer__social-handler-flex-direction\@medium             : row !default;
$footer__social-handler-flex-direction\@large              : column !default;
$footer__social-handler-align-items                        : flex-start !default;
$footer__social-handler-align-items\@medium                : center !default;
$footer__social-handler-flex\@large                        : 1 !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-handler-position\@large                    : relative !default;
$footer__social-handler-before-position\@large             : absolute !default;
$footer__social-handler-before-left\@large                 : 0 !default;
$footer__social-handler-before-top\@large                  : 0 !default;
$footer__social-handler-before-width\@large                : 1px !default;
$footer__social-handler-before-height\@large               : 90% !default;
$footer__social-handler-before-background\@large           : $gray !default;

$footer__social-list-title-display                         : flex !default;
$footer__social-list-title-align-items                     : center !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__social-list-title-align-self\@large               : flex-start !default;

$footer__bottom-bar-background                             : $color-primary !default;
$footer__bottom-bar-color                                  : $gray-lighter !default;
$footer__bottom-min-height                                 : 80px !default;
$footer__bottom-padding\@large                             : 0 $spacer--semi-large !default;
$footer__bottom-padding\@xl                                : 0 !default;
$footer__bottom-display                                    : flex !default;
$footer__bottom-align                                      : center !default;
$footer__bottom-flex-direction                             : column !default;
$footer__bottom-flex-direction\@medium                     : row !default;
$footer__bottom-justify-content\@medium                    : space-between !default;
$footer__bottom-flex-wrap\@medium                          : wrap !default;

$footer__copywrite-display                                 : block !default;
$footer__copywrite-order                                   : 2 !default;
$footer__copywrite-order\@medium                           : 1 !default;
$footer__copywrite-padding                                 : $spacer 0 !default;
$footer__copywrite-padding\@medium                         : $spacer--medium 0 !default;
$footer__copywrite-text-align                              : center !default;
$footer__copywrite-font-size                               : $font-size-medium !default;
$footer__copywrite-color                                   : $gray-lighter !default;

$footer__payments-list-justify-content                     : space-around !default;
$footer__payments-list-margin                              : 0 $spacer--semi-medium !default;
$footer__payments-list-margin\@medium                      : 0 0 0 $spacer--semi-medium !default;
$footer__payments-list-flex-flow\@medium                   : row wrap !default;
$footer__payments-list-order\@medium                       : 2 !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-lighter !default;

$footer__scroll-top-position                               : absolute !default;
$footer__scroll-top-top                                    : -49px !default;
$footer__scroll-top-right                                  : 0 !default;
$footer__scroll-top-before-transform                       : scaleX(1) !default;
$footer__scroll-top-before-background                      : none !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-align-self\@large                     : flex-start !default;
$footer__social-list-justify-content\@large                : flex-start !default;
$footer__social-list-flex-wrap\@large                      : wrap !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-display                                 : flex !default;
$footer__switchers-align-items                             : center !default;
$footer__switchers-flex-direction                          : column !default;
$footer__switchers-flex-direction\@small                   : row !default;
$footer__switchers-justify-content\@small                  : center !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-width                                    : auto !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-label-white-space                        : nowrap !default;

$footer__switcher-content-position                         : absolute !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__border--checkout                                  : $border-secondary !default;
$footer__border-width--checkout                            : 0 !default;
$footer__background-color--checkout                        : $white !default;

$footer__bottom-bar-handler-padding--checkout              : $spacer--semi-medium 0 0 0 !default;
$footer__bottom-bar-handler-padding--checkout\@medium      : 0 !default;
$footer__bottom-bar-handler-padding--checkout\@large       : 0 !default;
$footer__bottom-bar-handler-padding--checkout\@extra-large : 0 !default;
  • URL: /components/raw/footer/_footer-variables.scss
  • Filesystem Path: build/components/Organisms/footer/_footer-variables.scss
  • Size: 13 KB
  • Content: 
    @import 'footer-variables';

.footer {
    flex-shrink: $footer__flex-shrink;
    border: $footer__border;
    border-width: $footer__border-width;
    background-color: $footer__background-color;

    &--checkout {
        border: $footer__border--checkout;
        border-width: $footer__border-width--checkout;
        background-color: $footer__background-color--checkout;

        .footer__bottom-bar-handler {
            padding: $footer__bottom-bar-handler-padding--checkout;

            @include mq($screen-m) {
                padding: $footer__bottom-bar-handler-padding--checkout\@medium;
            }

            @include mq($screen-l) {
                padding: $footer__bottom-bar-handler-padding--checkout\@large;
            }

            @include mq($screen-xl) {
                padding: $footer__bottom-bar-handler-padding--checkout\@extra-large;
            }
        }
    }

    &--email {
        background-color: $footer__background-color--email;
    }

    &__handler {
        position: $footer__handler-position;
        display: $footer__handler-display;
        flex-direction: $footer__handler-flex-direction;
        padding: $footer__handler-padding;

        @include mq($screen-m) {
            padding: $footer__handler-padding\@medium;
        }

        @include mq($screen-l) {
            flex-flow: $footer__handler-flex-flow\@large;
            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-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: $footer__links-dropdown-list-item-border\@medium;
                }

                &:first-child {
                    @include mq($screen-m) {
                        width: $footer__links-dropdown-list-item-width-first-child\@medium;
                    }
                }

                &:last-child {
                    border: $footer__links-dropdown-list-item-border-last-child;
                }
            }

            &__icon {
                fill: $footer__links-dropdown-icon-color;
            }
        }

        .list__item {
            @include mq($screen-m) {
                min-width: $footer__links-list-item-min-width\@medium;
            }
        }
    }

    &__links-list {
        padding: $footer__links-list-padding;
    }

    &__link {
        display: $footer__link-display;
        margin: $footer__link-margin;
        font-size: $footer__link-font-size;
        font-weight: $footer__link-font-weight;
        color: $footer__link-color;
        text-decoration: $footer__link-text-decoration;

        @include mq($screen-m) {
            margin: $footer__link-margin\@medium;
        }

        &:hover {
            color: $footer__link-color-hover;
        }
    }

    &__social {
        order: $footer__social-order;

        @include mq($screen-l) {
            order: $footer__social-order\@large;
        }
    }

    &__social-handler {
        display: $footer__social-handler-display;
        flex-direction: $footer__social-handler-flex-direction;
        align-items: $footer__social-handler-align-items;
        margin: $footer__social-handler-margin;

        @include mq($screen-m) {
            align-items: $footer__social-handler-align-items\@medium;
            flex-direction: $footer__social-handler-flex-direction\@medium;
        }

        @include mq($screen-l) {
            flex-direction: $footer__social-handler-flex-direction\@large;
            flex: $footer__social-handler-flex\@large;
            margin: $footer__social-handler-margin\@large;
            padding: $footer__social-handler-padding\@large;
            border-bottom: $footer__newsletter-border;
            position: $footer__social-handler-position\@large;

            &:before {
                content: '';
                position: $footer__social-handler-before-position\@large;
                left: $footer__social-handler-before-left\@large;
                top: $footer__social-handler-before-top\@large;
                width: $footer__social-handler-before-width\@large;
                height: $footer__social-handler-before-height\@large;
                background: $footer__social-handler-before-background\@large;
            }
        }
    }

    &__social-list {
        @include mq($screen-l) {
            align-self: $footer__social-list-align-self\@large;
            justify-content: $footer__social-list-justify-content\@large;
            flex-wrap: $footer__social-list-flex-wrap\@large;
        }

        .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: $footer__social-list-title-display;
        align-items: $footer__social-list-title-align-items;
        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: $footer__social-list-title-align-self\@large;
            margin: $footer__social-list-title-margin\@large;
        }
    }

    &__bottom-bar {
        color: $footer__bottom-bar-color;
        background-color: $footer__bottom-bar-background;
    }

    &__bottom-bar-handler {
        display: $footer__bottom-display;
        align-items: $footer__bottom-align;
        flex-direction: $footer__bottom-flex-direction;
        min-height: $footer__bottom-min-height;

        @include mq($screen-m) {
            justify-content: $footer__bottom-justify-content\@medium;
            flex-direction: $footer__bottom-flex-direction\@medium;
            flex-wrap: $footer__bottom-flex-wrap\@medium;
        }

        @include mq($screen-l) {
            padding: $footer__bottom-padding\@large;
        }

        @include mq($screen-xl) {
            padding: $footer__bottom-padding\@xl;
        }
    }

    &__copyright {
        display: $footer__copywrite-display;
        order: $footer__copywrite-order;
        padding: $footer__copywrite-padding;
        text-align: $footer__copywrite-text-align;
        color: $footer__copywrite-color;

        @include mq($screen-m) {
            order: $footer__copywrite-order\@medium;
            padding: $footer__copywrite-padding\@medium;
        }

        small {
            font-size: $footer__copywrite-font-size;
        }
    }

    &__payments-list {
        justify-content: $footer__payments-list-justify-content;
        margin: $footer__payments-list-margin;

        @include mq($screen-m) {
            flex-flow: $footer__payments-list-flex-flow\@medium;
            margin: $footer__payments-list-margin\@medium;
            order: $footer__payments-list-order\@medium;
        }
    }

    &__payments-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;
        }
    }

    &__scroll-top {
        position: $footer__scroll-top-position;
        right: $footer__scroll-top-right;
        top: $footer__scroll-top-top;
        background-color: $footer__scroll-top-bg;

        &:before {
            transform: $footer__scroll-top-before-transform;
            background: $footer__scroll-top-before-background;
        }

        &:hover,
        &:focus,
        &.focus-visible {
            background-color: $footer__scroll-top-bg-hover;
        }

        .icon {
            fill: $footer__scroll-top-icon-fill;
        }
    }

    &__switchers {
        display: $footer__switchers-display;
        align-items: $footer__switchers-align-items;
        flex-direction: $footer__switchers-flex-direction;
        padding: $footer__switchers-padding;
        order: $footer__switchers-order;

        @include mq($screen-s) {
            flex-direction: $footer__switchers-flex-direction\@small;
            justify-content: $footer__switchers-justify-content\@small;
            width: $footer__switchers-width\@small;
        }

        @include mq($screen-xl) {
            width: $footer__switchers-width\@xl;
        }
    }

    &__dropdown-switcher {
        width: $footer__switcher-width;
        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: $footer__switcher-label-white-space;

            &[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: $footer__switcher-content-position;
            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;
        }
    }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: build/components/Organisms/footer/_footer.scss
  • Size: 13 KB
  • Content: 
    'use strict';

const scrollToTop = document.querySelector('.footer__scroll-top');

scrollToTop.addEventListener('click', () => {
  // move focus to first focusable element on the page - skip nav link on top
  const focusable = document.querySelectorAll('a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), object, embed, *[tabindex]:not([tabindex="-1"])');
  const firstFocusable = focusable[0];
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
  firstFocusable.focus();
});
  • URL: /components/raw/footer/footer.js
  • Filesystem Path: build/components/Organisms/footer/footer.js
  • Size: 554 Bytes

No notes defined.