Maui Jim Style Guide

Form: Shipping Address Add 

<div class="modal-wrapper js-modal" id="shipping-address-add">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--shipping-address-add">
        <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">Add New Shipping Address</span>
            <div class="modal__content">
                <form class="modal-form modal-form--shipping-address-add js-modal-form">
                    <div class="modal-form__items modal-form__items--3-cols">
                        <div class="modal-form__item-group">
                            <input type="hidden" id="shipping-address-modal-form-item-id" name="id">

                            <div class="form-item form-item--text form-item--shipping-address-first-name form-item--required">
                                <label for="shipping-address-first-name" class="label label--text label--required">First Name</label>
                                <input type="text" id="shipping-address-first-name" name="first-name" class="input input--text" autocomplete="given-name">
                            </div>

                            <div class="form-item form-item--text form-item--shipping-address-last-name form-item--required">
                                <label for="shipping-address-last-name" class="label label--text label--required">Last Name</label>
                                <input type="text" id="shipping-address-last-name" name="last-name" class="input input--text" autocomplete="family-name">
                            </div>

                            <div class="form-item form-item--text form-item--shipping-address-company-name">
                                <label for="shipping-address-company-name" class="label label--text">Company Name or c/o</label>
                                <input type="text" id="shipping-address-company-name" name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization">
                            </div>

                            <div class="form-item form-item--text form-item--shipping-address-address-1 form-item--required">
                                <label for="shipping-address-address-1" class="label label--text label--required">Address 1</label>
                                <input type="text" id="shipping-address-address-1" name="address-1" class="input input--text" autocomplete="shipping address-line1">
                            </div>

                            <div class="form-item form-item--text form-item--shipping-address-address-2">
                                <label for="shipping-address-address-2" class="label label--text">Address 2</label>
                                <input type="text" id="shipping-address-address-2" name="address-2" class="input input--text" placeholder="Optional" autocomplete="shipping address-line2">
                            </div>

                            <div class="form-item form-item--text form-item--shipping-address-city form-item--required">
                                <label for="shipping-address-city" class="label label--text label--required">City</label>
                                <input type="text" id="shipping-address-city" name="city" class="input input--text" autocomplete="shipping address-level2">
                            </div>

                            <div class="form-item form-item--text form-item--shipping-address-zip form-item--required">
                                <label for="shipping-address-zip" class="label label--text label--required">Zip Code</label>
                                <input type="text" id="shipping-address-zip" name="zip" class="input input--text" autocomplete="shipping postal-code">
                            </div>

                            <div class="form-item form-item--select form-item--required">
                                <label for="shipping-address-state" class="label label--required">State</label>
                                <div class="select-wrapper">
                                    <select id="shipping-address-state" name="state" class="select js-select" autocomplete="shipping address-level1">
      <option value="">Select</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="IL">Illinois</option>
    </select>
                                </div>
                            </div>

                            <div class="form-item form-item--select form-item--required form-item--locked">
                                <label for="shipping-address-country" class="label label--required">Country</label>
                                <div class="select-wrapper">
                                    <select id="shipping-address-country" name="country" class="select js-select" autocomplete="shipping country">
      <option value="USA">United States</option>
    </select>
                                </div>
                            </div>

                            <div class="form-item form-item--text form-item--shipping-address-phone-number form-item--required">
                                <label for="shipping-address-phone-number" class="label label--text label--required">Phone Number</label>
                                <input type="text" id="shipping-address-phone-number" name="phone-number" class="input input--text" placeholder="000-123-4567" autocomplete="tel">
                            </div>

                        </div>
                    </div>
                    <div class="modal-form__actions js-modal-form-actions">
                        <div class="modal-form__action">
                            <button class="button button--outlined js-modal-close-button" formnovalidate type="cancel">Cancel</button>

                        </div>
                        <div class="modal-form__action">
                            <button class="button button--primary" type="submit">Save</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": "shipping-address-add",
  "title": "Add New Shipping Address",
  "form": "shipping-address-add",
  "formContext": {
    "columns": 3
  }
}
  • 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.