<footer class="footer footer--default">
    <div class="footer-nav u-page-width-max">
        <a class="footer-nav__action footer-nav__action--phone" href="tel:+1800229933">
      1-888-666-5905
      <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--contact" href="#">
      Contact Us
      <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--retailers" href="#">
      Find a Retailer
      <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

    </a>
        <div class="footer-nav__menus">
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Zeal Optics
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">About Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Sunglasses Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Goggles Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Events</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Careers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Flagship Store</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Trade Login</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Blog</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Media</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Adventures</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Customer Service
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Contact Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Order Status</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Repairs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Prescription</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Tech Goggle Support</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Retailers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">FAQs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shipping Information</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="footer-catalogs">Catalogs</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Legal
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Terms &amp; Privacy</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Gift Cards
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">VIP &amp; Gift Cardholder</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shop Gift Card</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-nav__forms">
            <form class="footer__retailer-form">
                <label class="footer__retailer-label" for="footer__retailer-input">Retailers</label>
                <input class="footer__retailer-input" name="footer__retailer-input" type="text" placeholder="ZIP code or City" />
                <button class="footer__retailer-submit" type="submit">
          <svg class="icon icon--angle-right">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

        </button>
            </form>
            <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
                <form class="subscribe-form">
                    <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
                    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
                </form>
                <div class="subscribe-form-status">
                    <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                    <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
                </div>
                <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
            </div>

        </div>
    </div>
    <div class="footer__bottom">
        <div class="u-page-width-max">
            <a class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-identifier" href="#">
        <span class="footer__geo-label">Country:</span>
        <span class="footer__geo-current">
          United Arab Emirates
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </a>
            <ul class="social-icons">
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-instagram">
  <use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-facebook">
  <use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-twitter">
  <use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-tumblr">
  <use xlink:href="/assets/icons/icons.svg#social-tumblr"></use>
</svg>
</a>
                </li>
            </ul>

        </div>
    </div>
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/zeal-brand-logo-small-white.png">
        <span class="footer__copyright-text">©2016 Zeal Optics, Colorado</span>
    </div>
</footer>
<footer class="footer footer--{{modifier}}">
  {{#unless bottomOnly}}
  <div class="footer-nav u-page-width-max">
    {{#each actions}}
    <a class="footer-nav__action footer-nav__action--{{id}}" href="{{this.path}}">
      {{label}}
      {{render (dynamicVariant 'icons' icon)}}
    </a>
    {{/each}}
    <div class="footer-nav__menus">
      {{#each navigation}}
      <div class="footer-nav__menu-column">
        {{#each this}}
        <div class="footer-nav__menu js-footer-nav-menu">
          <button class="footer-nav__menu-button js-footer-nav-button">
            {{this.label}}
            {{render '@icons--arrow-up'}}
            {{render '@icons--arrow-right'}}
            {{render '@icons--arrow-down'}}
          </button>
          <ul class="footer-nav__menu-items">
            {{#each this.items}}
            <li class="footer-nav__menu-item">
              <a class="footer-nav__menu-link{{#each classes}} {{this}}{{/each}}" href="{{this.path}}"{{#each data}} data-{{@key}}="{{this}}"{{/each}}>{{this.label}}</a>
            </li>
            {{/each}}
          </ul>
        </div>
        {{/each}}
      </div>
      {{/each}}
    </div>
    <div class="footer-nav__forms">
      <form class="footer__retailer-form">
        <label class="footer__retailer-label" for="footer__retailer-input">{{retailers.label}}</label>
        <input class="footer__retailer-input" name="footer__retailer-input" type="text" placeholder="{{retailers.placeholder}}" />
        <button class="footer__retailer-submit" type="submit">
          {{render '@icons--angle-right'}}
        </button>
      </form>
      {{render '@subscribe-form--mini'}}
    </div>
  </div>
  <div class="footer__bottom">
    <div class="u-page-width-max">
      <a class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="{{countryModal}}" href="#">
        <span class="footer__geo-label">{{country.label}}:</span>
        <span class="footer__geo-current">
          {{country.current}}
          {{render '@icons--arrow-right'}}
        </span>
      </a>
      {{#if mauijim}}
      <a class="footer__geo footer__geo--language js-modal-open-link" data-modal-id="language-selector" href="#">
        <span class="footer__geo-current">
          {{language.current}}
          {{render '@icons--arrow-right'}}
        </span>
      </a>
      {{/if}}
      {{render '@social-icons' socialIcons}}
    </div>
  </div>
  {{/unless}}
  <div class="footer__copyright">
    <img class="footer__copyright-logo" src="{{copyright.logo}}">
    <span class="footer__copyright-text">{{copyright.text}}</span>
  </div>
</footer>
{
  "socialIcons": {
    "icons": [
      "social-instagram",
      "social-facebook",
      "social-twitter",
      "social-tumblr"
    ]
  },
  "countryModal": "country-identifier",
  "mauijim": null,
  "zeal": true,
  "modifier": "default",
  "actions": [
    {
      "id": "phone",
      "label": "1-888-666-5905",
      "path": "tel:+1800229933",
      "icon": "action-phone"
    },
    {
      "id": "contact",
      "label": "Contact Us",
      "path": "#",
      "icon": "action-mail"
    },
    {
      "id": "retailers",
      "label": "Find a Retailer",
      "path": "#",
      "icon": "action-location"
    }
  ],
  "navigation": [
    [
      {
        "label": "Zeal Optics",
        "items": [
          {
            "label": "About Us",
            "path": "#"
          },
          {
            "label": "Sunglasses Technology",
            "path": "#"
          },
          {
            "label": "Goggles Technology",
            "path": "#"
          },
          {
            "label": "Events",
            "path": "#"
          },
          {
            "label": "Careers",
            "path": "#"
          },
          {
            "label": "Flagship Store",
            "path": "#"
          },
          {
            "label": "Trade Login",
            "path": "#"
          },
          {
            "label": "Blog",
            "path": "#"
          },
          {
            "label": "Media",
            "path": "#"
          },
          {
            "label": "Adventures",
            "path": "#"
          }
        ]
      }
    ],
    [
      {
        "label": "Customer Service",
        "items": [
          {
            "label": "Contact Us",
            "path": "#"
          },
          {
            "label": "Order Status",
            "path": "#"
          },
          {
            "label": "Repairs",
            "path": "#"
          },
          {
            "label": "Prescription",
            "path": "#"
          },
          {
            "label": "Tech Goggle Support",
            "path": "#"
          },
          {
            "label": "Retailers",
            "path": "#"
          },
          {
            "label": "FAQs",
            "path": "#"
          },
          {
            "label": "Shipping Information",
            "path": "#"
          },
          {
            "label": "Catalogs",
            "path": "#",
            "classes": [
              "js-modal-open-link"
            ],
            "data": {
              "modal-id": "footer-catalogs"
            }
          }
        ]
      }
    ],
    [
      {
        "label": "Legal",
        "items": [
          {
            "label": "Terms & Privacy",
            "path": "#"
          }
        ]
      },
      {
        "label": "Gift Cards",
        "items": [
          {
            "label": "VIP & Gift Cardholder",
            "path": "#"
          },
          {
            "label": "Shop Gift Card",
            "path": "#"
          }
        ]
      }
    ]
  ],
  "retailers": {
    "label": "Retailers",
    "placeholder": "ZIP code or City"
  },
  "country": {
    "label": "Country",
    "current": "United Arab Emirates",
    "options": []
  },
  "language": {
    "current": "English",
    "options": []
  },
  "copyright": {
    "logo": "/assets/images/zeal-brand-logo-small-white.png",
    "text": "©2016 Zeal Optics, Colorado"
  }
}
  • Content:
    (function (window) {
      'use strict';
    
      const footer = document.querySelector('.footer');
      const navigationMenus = document.querySelectorAll('.js-footer-nav-menu');
      const activeMenuClass = 'js-footer-nav-menu--active';
    
      let setToSmall;
    
      function toggleMenu(e) {
        const menu = e.target.parentNode;
        const submenu = menu.querySelector('.footer-nav__menu-items');
    
        menu.classList.toggle(activeMenuClass);
        submenu.style.height = menu.classList.contains(activeMenuClass) ? `${submenu.scrollHeight}px` : 0;
      }
    
      function widthChange(mq) {
        if (mq.matches === true && setToSmall !== false) {
          const elements = document.querySelectorAll('.footer-nav__menu-items');
          for (let i = 0; i < elements.length; i++)
            elements[i].style.height = 'auto';
          setToSmall = false;
        } else if (setToSmall !== true) {
          const elements = document.querySelectorAll('.footer-nav__menu');
          for (let i = 0; i < elements.length; i++) {
            const submenu = elements[i].querySelector('.footer-nav__menu-items');
            submenu.style.height = elements[i].classList.contains(activeMenuClass) ? `${submenu.scrollHeight}px` : 0;
          }
          setToSmall = true;
        }
      }
    
      if (footer) {
        for (let i = 0; i < navigationMenus.length; i++) {
          const menu = navigationMenus[i];
          const button = menu.querySelector('.js-footer-nav-button');
    
          if (button) {
            button.addEventListener('click', toggleMenu);
          }
        }
    
        // media query event handler
        if (matchMedia) {
          const mq = window.matchMedia('(min-width: 680px)');
          mq.addListener(widthChange);
        }
      }
    
    })(this);
    
  • URL: /components/raw/footer/footer.js
  • Filesystem Path: src/components/02-components/footer/footer.js
  • Size: 1.6 KB
  • Content:
    .footer {
      background: url('../images/#{$footer-background-filename}') center top;
      -webkit-font-smoothing: antialiased;
    
      // Text input placeholders
      ::-webkit-input-placeholder {
        color: $color-white;
      }
    
      ::-moz-placeholder {
        color: $color-white;
      }
    
      :-ms-input-placeholder {
        color: $color-white;
      }
    
      @media print {
        display: none;
      }
    }
    
    .footer-nav {
      padding: 20px 10px 10px;
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        padding: 20px 0;
    
        .footer--mini & {
          position: relative;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        //background-color: map-get($footer-nav-background-color, xl);
    
        .footer--default & {
          display: flex;
        }
      }
    }
    
    .footer-nav__menus {
      @include breakpoint($breakpoint-md) {
        .footer--default & {
          display: flex;
          flex-flow: row nowrap;
          align-items: stretch;
          justify-content: space-between;
          width: 100%;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .footer--default & {
          width: 75%;
          float: left;
        }
      }
    
      @include breakpoint($page-width-max) {
        .footer--mini & {
          display: inline;
        }
      }
    }
    
    .footer-nav__menu-column {
      @include breakpoint($breakpoint-md) {
        .footer--default & {
          position: relative;
          flex: 1;
          padding: 0 $gutter-width-half;
    
          &:not(:first-of-type):before {
            position: absolute;
            top: 35px;
            bottom: 0;
            left: -10px;
            border-left: 1px solid $color-medium-dark;
            content: '';
          }
        }
    
        .footer--mini & {
          display: inline;
        }
      }
    }
    
    .footer-nav__menu {
      @include breakpoint($breakpoint-sm-only) {
        position: relative;
        min-height: 40px;
        overflow: hidden;
      }
    
      @include breakpoint($breakpoint-md) {
        .footer--default &:not(:first-child) {
          margin-top: 50px;
        }
    
        .footer--mini & {
          display: inline-block;
          margin: -20px 10px 0;
          padding-top: 35px;
        }
      }
    }
    
    .footer-nav__action,
    .footer-nav__menu-button {
      @include text-ui($color-white);
      display: block;
      position: relative;
      margin-bottom: 20px;
      line-height: 2rem;
      text-transform: uppercase;
      z-index: 0;
    
      @include breakpoint($breakpoint-md) {
        transition: none;
      }
    
      .icon {
        position: absolute;
        fill: $color-white;
      }
    }
    
    .footer-nav__action {
      text-decoration: none;
    
      .icon {
        top: 3px;
        right: 2px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .footer-nav__menu-button {
      @include reset-button;
      width: 100%;
      text-align: left;
    
      .icon {
        top: 5px;
        right: 5px;
      }
    
      .icon--arrow-up,
      .icon--arrow-right {
        display: none;
      }
    
      .icon--arrow-down {
        visibility: hidden;
        z-index: -1;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 10px;
        cursor: default;
    
        .footer--default & {
          .icon {
            display: none !important;
          }
        }
    
        .footer--mini & {
          padding-right: 35px;
    
          .icon:not(.icon--arrow-up) {
            display: none !important;
          }
    
          .icon--arrow-up {
            display: inline-block;
            top: 6px;
            right: 12px;
          }
        }
      }
    }
    
    @include breakpoint($breakpoint-sm-only) {
      .footer-nav__menu-button:before,
      .footer-nav__menu-button:after {
        position: absolute;
        top: 7px;
        width: 7px;
        height: 1px;
        transition: transform .3s linear;
        background: $color-white;
        content: '';
      }
    
      .footer-nav__menu-button:before {
        right: 9px;
        transform: rotate(36deg);
      }
    
      .footer-nav__menu-button:after {
        right: 4px;
        transform: rotate(-36deg);
      }
    
      .footer-nav__menu.js-footer-nav-menu--active {
        .footer-nav__menu-button:before {
          transform: rotate(-36deg);
          transition: transform .3s linear;
        }
    
        .footer-nav__menu-button:after {
          transform: rotate(36deg);
          transition: transform .3s linear;
        }
      }
    }
    
    .footer-nav__menu-items {
      @include reset-list;
    
      @include breakpoint($breakpoint-sm-only) {
        height: 0;
        transition: opacity .3s cubic-bezier(.55, -.01, .39, .96) .2s, height .6s cubic-bezier(.5, 0, .4, 1);
        opacity: 0;
        overflow: hidden;
    
        @include breakpoint($breakpoint-md) {
          transition: none;
        }
    
    
        .js-footer-nav-menu--active & {
          opacity: 1;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        .footer--default & {
          display: block;
        }
    
        .footer--mini .footer-nav__menu:hover & {
          display: block;
          position: absolute;
          top: 0;
          min-width: 250px;
          padding: 2px 10px 0;
          transform: translateY(-100%);
          background-color: $color-white;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
          z-index: 5;
    
          &:after {
            position: absolute;
            top: 100%;
            left: 25px;
            width: 0;
            height: 0;
            border-top: 10px solid $color-white;
            border-right: 15px solid transparent;
            border-left: 15px solid transparent;
            content: '';
          }
        }
      }
    }
    
    .footer-nav__menu-item {
      @include text-label;
      line-height: 4.2rem;
    
      @include breakpoint($breakpoint-md) {
        padding-right: 25px;
        line-height: 3.2rem;
      }
    }
    
    @include breakpoint($breakpoint-sm-only) {
      .footer-nav__menu-item:first-child {
        margin-top: -10px;
      }
    
      .footer-nav__menu-item:last-child {
        margin-bottom: 20px;
      }
    }
    
    .footer-nav__menu-link {
      color: $color-white;
      text-decoration: none;
    
      &:hover {
        text-decoration: underline;
      }
    
      @include breakpoint($breakpoint-md) {
        .footer--mini & {
          color: $color-darkest;
        }
      }
    }
    
    .footer-nav__forms {
      @include breakpoint($breakpoint-md) {
        .footer--default & {
          margin-top: 25px;
          padding: 0 $gutter-width-half;
          box-sizing: border-box;
        }
    
        .footer--mini & {
          margin-top: 20px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .footer--default & {
          width: 25%;
          margin: 0;
          float: right;
        }
      }
    
      @include breakpoint($page-width-max) {
        .footer--mini & {
          display: inline;
          margin: 0;
        }
      }
    }
    
    .footer__retailer-form {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: block;
    
        .footer--mini & {
          @include span(6);
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .footer--default & {
          position: relative;
          height: 100%;
    
          &:before {
            position: absolute;
            top: 35px;
            bottom: 0;
            left: -20px;
            border-left: 1px solid $color-medium-dark;
            content: '';
          }
        }
      }
    
      @include breakpoint($page-width-max) {
        .footer--mini & {
          @include span(3);
          float: right;
        }
      }
    }
    
    .footer__retailer-label {
      @include text-ui($color-white);
      display: block;
      margin-bottom: 5px;
      line-height: 2.0rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 15px;
    
        .footer--mini & {
          display: none;
        }
      }
    }
    
    .footer__retailer-input {
      @include text-label($color-white);
      width: calc(100% - 62px);
      height: 50px;
      padding-left: 20px;
      border: 1px solid $color-white;
      border-right: 0;
      border-radius: 0;
      background-color: transparent;
      letter-spacing: 1px;
      box-sizing: border-box;
    }
    
    .footer__retailer-submit {
      width: 62px;
      height: 50px;
      float: right;
      border: 0;
      border-radius: 0;
      background-color: $color-white;
      text-transform: uppercase;
      cursor: pointer;
    
      .icon {
        position: relative;
        top: 1px;
        left: 1px;
        fill: $color-darkest;
      }
    }
    
    .footer .subscribe-form-wrapper {
      display: none;
    }
    
    .footer--mini {
      .subscribe-form-wrapper {
        @include span(6);
    
        @include breakpoint($breakpoint-md) {
          display: block;
        }
    
        @include breakpoint($page-width-max) {
          @include span(3);
          float: right;
        }
      }
    
      .subscribe-form__input {
        width: calc(100% - 50px);
        height: 50px;
        border-right: 0;
        border-color: $color-white;
        background-color: transparent;
        color: $color-white;
      }
    
      .subscribe-form__submit {
        width: 50px;
        height: 50px;
        background-color: $color-white;
    
        .icon {
          fill: $color-darkest;
        }
      }
    
      .subscribe-form-legal,
      .subscribe-form-legal__link {
        color: $color-white;
      }
    }
    
    .footer__bottom {
      padding: 10px 10px 20px;
      border-top: 1px solid $color-white;
      background-color: map-get($footer-bottom-background-color, sm);
    
      @include breakpoint($breakpoint-md) {
        @include clearfix;
        border-color: $color-medium-dark;
        overflow: hidden;
    
        .footer--default & {
          padding: 20px 0 10px;
        }
    
        .footer--mini & {
          padding: 10px 0;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        background-color: map-get($footer-bottom-background-color, xl);
    
        .footer--default & {
          padding: 20px 0;
        }
      }
    }
    
    .footer__geo {
      @include text-label;
      display: block;
      position: relative;
      margin: 20px 0;
      text-decoration: none;
    
      .icon {
        position: absolute;
        top: 0;
        right: 5px;
        fill: $color-white;
      }
    
      @include breakpoint($breakpoint-md) {
        &.footer__geo--country {
          @include span($footer-geo-country-span-md);
        }
    
        &.footer__geo--language {
          @include span(3);
        }
    
        .icon {
          position: relative;
          top: -1px;
          right: auto;
          left: 8px;
          height: 7px;
        }
      }
    
      @include breakpoint($page-width-max) {
        &.footer__geo--country {
          @include span($footer-geo-country-span-max);
        }
    
        &.footer__geo--language {
          @include span(3);
        }
      }
    }
    
    .footer__geo-label {
      display: none;
    
      @include breakpoint($breakpoint-md) {
        display: inline-block;
        color: $color-medium-light;
        font-weight: $font-weight-bold;
        letter-spacing: 2px;
        text-transform: uppercase;
        pointer-events: none;
      }
    }
    
    .footer__geo-current {
      display: inline-block;
      color: $color-white;
      pointer-events: none;
    }
    
    .footer .social-icons {
      text-align: center;
    
      .icon {
        fill: $color-white;
      }
    
      @include breakpoint($breakpoint-md) {
        @include span($footer-social-icons-span-md);
        position: relative;
        right: -5px;
        margin-top: 14px;
        text-align: right;
        z-index: 1;
      }
    
      @include breakpoint($page-width-max) {
        @include span($footer-social-icons-span-max);
        margin-top: 12px;
      }
    }
    
    .footer__copyright {
      width: 100%;
      height: 100px;
      padding-top: 2px;
      background: map-get($footer-copyright-background-color, sm);
      text-align: center;
      text-transform: uppercase;
      box-sizing: border-box;
    
      @include breakpoint($breakpoint-md) {
        height: 90px;
        font-weight: $font-weight-bold;
      }
    
      @if $brand == 'mauijim' {
        background: url('../images/#{map-get($footer-copyright-background, sm)}') center top;
        background-size: cover;
    
        @include breakpoint($breakpoint-md) {
          background-image: url('../images/#{map-get($footer-copyright-background, md)}');
        }
    
        @include breakpoint($breakpoint-lg) {
          background-image: url('../images/#{map-get($footer-copyright-background, lg)}');
        }
    
        @include breakpoint($breakpoint-xl) {
          background-image: url('../images/#{map-get($footer-copyright-background, xl)}');
        }
    
        @include breakpoint($page-width-max) {
          background-image: url('../images/#{map-get($footer-copyright-background, max)}');
        }
      }
    }
    
    .footer__copyright-logo {
      display: block;
      height: 44px;
      margin: 12px auto;
    
      @include breakpoint($breakpoint-md) {
        display: inline-block;
        margin: 24px 20px 24px 0;
        vertical-align: middle;
      }
    }
    
    .footer__copyright-text {
      display: block;
      color: $color-white;
      font-size: 1.4rem;
      font-weight: $font-weight-bold;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        display: inline-block;
        letter-spacing: 2px;
        vertical-align: middle;
      }
    }
    
  • URL: /components/raw/footer/footer.scss
  • Filesystem Path: src/components/02-components/footer/footer.scss
  • Size: 11.7 KB
  • The .footer__bottom background color is a placeholder pending forthcoming design updates.
  • The Mini footer variation was originally designed to provide less distractions for users on pages like the PDP. At this point it is uncertain if it will be used at all, so it should not be implemented yet.