<footer class="footer footer--default">
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/mauijim-brand-logo-monochromatic.svg">
        <span class="footer__copyright-text">©2016 Maui Jim, Inc. Lahana, Hawaii</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-twitter",
      "social-facebook",
      "social-instagram"
    ]
  },
  "countryModal": "country-selector",
  "mauijim": true,
  "zeal": null,
  "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": "Maui Jim",
        "items": [
          {
            "label": "About Us",
            "path": "#"
          },
          {
            "label": "Contact Us",
            "path": "#"
          },
          {
            "label": "Technology",
            "path": "#"
          },
          {
            "label": "Golf Events",
            "path": "#"
          },
          {
            "label": "Corporate Gifts",
            "path": "#"
          },
          {
            "label": "Careers",
            "path": "#",
            "classes": [
              "js-modal-open-link"
            ],
            "data": {
              "modal-id": "data-protection"
            }
          },
          {
            "label": "Austine Wood Comarow Polage ® Art",
            "path": "#"
          },
          {
            "label": "Trade Login",
            "path": "#"
          }
        ]
      }
    ],
    [
      {
        "label": "Customer Service",
        "items": [
          {
            "label": "Order Status",
            "path": "#"
          },
          {
            "label": "Repairs",
            "path": "#"
          },
          {
            "label": "Returns",
            "path": "#"
          },
          {
            "label": "Product Registration",
            "path": "#"
          },
          {
            "label": "Prescription",
            "path": "#"
          },
          {
            "label": "Retailers",
            "path": "#"
          },
          {
            "label": "FAQs",
            "path": "#"
          },
          {
            "label": "Shipping Information",
            "path": "#"
          }
        ]
      }
    ],
    [
      {
        "label": "Legal",
        "items": [
          {
            "label": "Terms of Use",
            "path": "#"
          },
          {
            "label": "Privacy Policy",
            "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/mauijim-brand-logo-monochromatic.svg",
    "text": "©2016 Maui Jim, Inc. Lahana, Hawaii"
  },
  "bottomOnly": true
}
  • 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.