<div class="modal-wrapper js-modal" id="address-validation">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--address-validation 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>
            <h2 class="modal__title">Address Validation</h2>
            <div class="modal__content">
                <form class="address-validation">
                    <p class="modal__description">We found another address while verifying yours. Please confirm which address to use for shipping.</p>
                    <div class="form-item form-item--radio">
                        <input type="radio" id="address-validation-corrected" value="" name="address-validation" class="radio radio--default">
                        <label for="address-validation-corrected">
    
    <span class="radio__label-text">
      112W MONROE ST CHICAGO, IL 60603, UNITED STATES
    </span>
  </label>
                    </div>

                    <div class="form-item form-item--radio">
                        <input type="radio" id="address-validation-entered" value="" name="address-validation" class="radio radio--default" checked="true">
                        <label for="address-validation-entered">
    
    <span class="radio__label-text">
      Use the address I entered
    </span>
  </label>
                    </div>

                    <div class="address-validation__actions">
                        <button class="button button--primary">Continue</button>

                    </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}} modal--mobile-overlay">
    <div class="modal__inner">
      <button class="modal__close js-modal-close-button">
        {{render '@icons--close-large'}}
      </button>
      {{#if title}}
      <h2 class="modal__title">{{title}}</h2>
      {{/if}}
      <div class="modal__content">
        <form class="address-validation">
        {{#each addresses}}
          {{#if subtitle}}
          <h6 class="modal__subtitle">{{subtitle}}</h6>
          {{/if}}
          {{#if description}}
          <p class="modal__description">{{description}}</p>
          {{/if}}
          {{#each options}}
          {{render '@radio' this}}
          {{/each}}
        {{/each}}
        <div class="address-validation__actions">
          {{#each actions}} {{render (dynamicVariant 'buttons' type) this merge=true}} {{/each}}
        </div>
        </form>
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "address-validation",
  "title": "Address Validation",
  "addresses": [
    {
      "description": "We found another address while verifying yours. Please confirm which address to use for shipping.",
      "options": [
        {
          "modifier": "default",
          "label": "112W MONROE ST CHICAGO, IL 60603, UNITED STATES",
          "id": "address-validation-corrected",
          "name": "address-validation"
        },
        {
          "modifier": "default",
          "label": "Use the address I entered",
          "id": "address-validation-entered",
          "name": "address-validation",
          "checked": true
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Continue"
    }
  ]
}
  • Content:
    .modal.modal--address-validation {
      .modal__inner {
        max-width: 520px;
      }
    
      .modal__content {
        max-width: 400px;
        margin: 0 auto;
        padding: 0 20px;
      }
    
      .modal__title {
        margin: 0;
        font-size: 2.4rem;
        line-height: 5.0rem;
      }
    
      .modal__description {
        margin-bottom: 0;
        color: $color-darkest;
        line-height: 2.0rem;
      }
    
      .modal__subtitle {
        margin: 15px 0 0;
        color: $color-darkest;
        font-size: 1.4rem;
      }
    
      // Give second-and-up subtitles a bit more margin.
      * + .modal__subtitle {
        margin-top: 35px;
      }
    
      .radio:checked + label {
        @include font-bold;
      }
    
      @include breakpoint($breakpoint-md) {
        .modal__content {
          padding: 0;
        }
    
        .modal__title {
          font-size: 1.6rem;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .modal__title {
          padding: 5px 0;
          font-size: 2.4rem;
        }
    
        .modal__description {
          font-size: 1.4rem;
        }
      }
    }
    
    .address-validation__actions {
      margin: 55px 0 10px;
      text-align: center;
    
      .button {
        max-width: 100%;
      }
    }
    
  • URL: /components/raw/address-validation/address-validation.scss
  • Filesystem Path: src/components/01-elements/modals/address-validation/address-validation.scss
  • Size: 1.1 KB

There are no notes for this item.