Maui Jim Style Guide

Form: Repair Purchase 

<div class="modal-wrapper js-modal" id="repair-purchase">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--repair-purchase modal--repair-options">
        <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>
            <div class="modal__content">
                <form class="modal-form modal-form--repair-options js-modal-form">
                    <div class="modal-form__items modal-form__items--1-cols">
                        <div class="modal-form__item-group">
                            <p class="paragraph">It looks like you haven’t completed your repair request yet. Before shopping for other Maui Jim product, please complete your repair requst. Otherwise, you will have to re-enter your repair request.</p>

                        </div>
                    </div>
                    <div class="modal-form__actions js-modal-form-actions">
                        <div class="modal-form__action">
                            <button class="button button--outlined">Start Shopping</button>

                        </div>
                        <div class="modal-form__action">
                            <button class="button button--primary js-modal-close-button" formnovalidate>Continue with Repair Order</button>

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

            </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}}{{#unless (equals id form)}} modal--{{form}}{{/unless}}">
    <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}}
        {{render (dynamicVariant 'modal-form' form) formContext merge=true}}
      </div>
    </div>
  </div>
</div>
 
{
  "modal": true,
  "id": "repair-purchase",
  "title": null,
  "form": "repair-options",
  "formContext": {
    "columns": "1",
    "formItemGroups": [
      {
        "formItems": [
          {
            "component": "paragraph",
            "classes": true,
            "value": "It looks like you haven’t completed your repair request yet. Before shopping for other Maui Jim product, please complete your repair requst. Otherwise, you will have to re-enter your repair request."
          }
        ]
      }
    ],
    "actions": [
      {
        "type": "outlined",
        "buttonValue": "Start Shopping"
      },
      {
        "type": "primary",
        "buttonValue": "Continue with Repair Order",
        "noValidate": true,
        "classes": [
          "js-modal-close-button"
        ]
      }
    ]
  }
}
  • Content: 
    .modal.modal--shipping-address-add {
  @include breakpoint($breakpoint-md) {
    .modal__content {
      padding-right: 60px;
      padding-left: 60px;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .modal__content {
      margin: 0 auto;
      padding-right: 50px;
      padding-left: 50px;
    }
  }
}

.modal.modal--repair-options {
  .modal__inner {
    position: relative;
    max-width: 660px;
    height: auto;
    margin: 0 $gutter-width / 2;
  }

  .modal__content {
    padding: 60px $gutter-width / 2 50px;
  }

  @include breakpoint($breakpoint-sm-only) {
    .modal-form__action {
      text-align: center;
    }
  }

  @include breakpoint($breakpoint-md) {
    .modal__inner {
      margin: 0 auto;
      padding-bottom: 0;
    }

    .modal__content {
      padding-right: 40px;
      padding-left: 40px;
    }

    .modal-form__actions {
      margin-right: -10px;
      margin-left: -10px;
    }

    .modal-form__action {
      width: 50%;
      float: left;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .modal__inner {
      max-width: 700px;
      padding-bottom: 0;
    }
  }
}

.modal.modal--data-protection  {
  text-align: center;

  .modal__inner {
    position: relative;
    max-width: 660px;
    margin: 0 $gutter-width / 2;
  }

  .modal__content {
    padding: 60px $gutter-width / 2 50px;
  }

  @include breakpoint($breakpoint-sm-only) {
    .modal__inner {
      top: 40%;
      max-height: 155px;
    }

    .modal__content {
      padding-top: 50px;
      overflow: hidden;
    }
  }

  @include breakpoint($breakpoint-md) {
    .modal__inner {
      margin: 0 auto;
      padding-bottom: 0;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .modal__inner {
      max-width: 700px;
    }
  }

  a {
    color: $color-primary;
    font-weight: normal;

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

.modal.modal--style-number-help {
  @include breakpoint($breakpoint-md) {
    display: table-cell;

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      display: block;
    }

    .modal__inner {
      height: 510px;
      margin: 0 auto;
      vertical-align: middle;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .modal__inner {
      height: 625px;
    }
  }
}

.modal.modal--product-variant-selector {
  @include breakpoint($breakpoint-md) {
    .modal__content {
      padding: $gutter-width-half;
    }
  }
}
  • URL: /components/raw/form-modal/form-modal.scss
  • Filesystem Path: src/components/01-elements/modals/form-modal/form-modal.scss
  • Size: 2.4 KB

There are no notes for this item.