<div class="modal-wrapper js-modal" id="shipping-address-edit">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--shipping-address-edit 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">Edit 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-edit",
  "title": "Edit 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.