<div class="modal-wrapper js-modal" id="footer-catalogs">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--footer-catalogs modal--mobile-overlay">
        <div class="modal__inner">
            <button class="modal__close js-modal-close-button">
        <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

      </button>
            <span class="modal__title">Catalogs</span>
            <div class="modal__content">
                <div class="modal-options">
                    <ul class="modal-options__options">
                        <li class="modal-options__option">
                            <a class="modal-options__option-link" href="#">
                <img class="modal-options__option-image" src="/assets/images/catalogs-zeal-goggles.jpg">
                <span class="modal-options__option-label">2016/2017 Goggle Catalog</span>
              </a>
                        </li>
                        <li class="modal-options__option">
                            <a class="modal-options__option-link" href="#">
                <img class="modal-options__option-image" src="/assets/images/catalogs-zeal-brand.jpg">
                <span class="modal-options__option-label">Brand Essence</span>
              </a>
                        </li>
                        <li class="modal-options__option">
                            <a class="modal-options__option-link" href="#">
                <img class="modal-options__option-image" src="/assets/images/catalogs-zeal-sunglasses.jpg">
                <span class="modal-options__option-label">2017 Sunglasses Catalog</span>
              </a>
                        </li>
                    </ul>
                    <button class="modal__alternate-close js-modal-close-button">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal" id="{{id}}">
  <div class="modal-overlay js-modal-overlay"></div>
  <div class="modal modal--{{id}} modal--mobile-overlay">
    <div class="modal__inner">
      <button class="modal__close js-modal-close-button">
        {{render '@icons--close-large'}}
      </button>
      {{#if title}}
      <span class="modal__title">{{title}}</span>
      {{/if}}
      <div class="modal__content">
        {{#if description}}
        <p class="modal__description">{{description}}</p>
        {{/if}}
        <div class="modal-options">
          <ul class="modal-options__options">
            {{#each options}}
            <li class="modal-options__option">
              <a class="modal-options__option-link" href="{{this.path}}">
                <img class="modal-options__option-image" src="{{image}}">
                <span class="modal-options__option-label">{{label}}</span>
              </a>
            </li>
            {{/each}}
          </ul>
          <button class="modal__alternate-close js-modal-close-button">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "footer-catalogs",
  "title": "Catalogs",
  "options": [
    {
      "image": "/assets/images/catalogs-zeal-goggles.jpg",
      "label": "2016/2017 Goggle Catalog",
      "path": "#"
    },
    {
      "image": "/assets/images/catalogs-zeal-brand.jpg",
      "label": "Brand Essence",
      "path": "#"
    },
    {
      "image": "/assets/images/catalogs-zeal-sunglasses.jpg",
      "label": "2017 Sunglasses Catalog",
      "path": "#"
    }
  ]
}
  • Content:
    .modal.modal--footer-catalogs {
    
      .modal__inner {
        max-width: 840px;
        padding-top: 35px;
      }
    
      .modal__title {
        color: $color-darkest;
        font-size: 2.4rem;
        letter-spacing: 1px;
        line-height: 2.8rem;
        text-transform: uppercase;
      }
    
      .modal__content {
        padding: 0 $gutter-width-half 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        .modal__inner {
          padding-top: 45px;
        }
    
        .modal__alternate-close {
          margin-bottom: 30px;
        }
      }
    }
    
    .modal-options {
      text-align: center;
    }
    
    .modal-options__options {
      @include reset-list;
    
      @include breakpoint($breakpoint-md) {
        display: table;
        width: 100%;
        margin-bottom: 60px;
        table-layout: fixed;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 75px;
      }
    }
    
    .modal-options__option {
      @include breakpoint($breakpoint-md) {
        display: table-cell;
      }
    }
    
    .modal-options__option-link {
      display: block;
      margin: 45px 0;
      transition: color $transition-standard;
      color: $color-dark;
      font-size: 1.9rem;
      line-height: 2.3rem;
      text-decoration: none;
    
      &:hover {
        color: $color-primary;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        &:first-child {
          margin-top: 25px;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 50px 0 0;
        font-size: 1.4rem;
        line-height: 1.7rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    
    .modal-options__option-image {
      width: auto;
      max-width: 110px;
      height: auto;
      max-height: 65px;
      margin: 0 auto;
    
      @include breakpoint($breakpoint-xl) {
        max-width: none;
        max-height: none;
      }
    }
    
    .modal-options__option-label {
      display: block;
      margin-top: 25px;
    }
    
  • URL: /components/raw/options-modal/options-modal.scss
  • Filesystem Path: src/components/01-elements/modals/options-modal/options-modal.scss
  • Size: 1.7 KB

There are no notes for this item.