<button class="shipping-address shipping-address--button js-modal-open-link" data-modal-id="shipping-address-add" formnovalidate>
  <svg class="icon icon--new-address">
  <use xlink:href="/assets/icons/icons.svg#new-address"></use>
</svg>

  <p class="shipping-address__button-label">Add New Shipping Address</p>
  <span class="shipping-address__accent"></span>
</button>
<button class="shipping-address shipping-address--button{{#if buttonModal}} js-modal-open-link{{/if}}"{{#if buttonModal}} data-modal-id="{{buttonModal}}"{{/if}} formnovalidate>
  {{#if icon}}
  {{render (dynamicVariant 'icons' icon)}}
  {{/if}}
  {{#if label}}
  <p class="shipping-address__button-label">{{label}}</p>
  {{/if}}
  <span class="shipping-address__accent"></span>
</button>
{
  "id": "checkout-shipping-address-1",
  "name": "checkout-shipping-address",
  "label": "Add New Shipping Address",
  "actions": [
    {
      "action": "edit",
      "buttonValue": "Edit",
      "modifier": "plain-text",
      "buttonModal": "shipping-address-edit",
      "noValidate": true,
      "classes": [
        "shipping-address__edit",
        "js-modal-form-item-edit-button"
      ]
    },
    {
      "action": "delete",
      "buttonValue": "Delete",
      "modifier": "plain-text",
      "classes": [
        "shipping-address__delete"
      ]
    }
  ],
  "pageModals": [
    {
      "component": "form-modal--shipping-address-add"
    }
  ],
  "icon": "new-address",
  "buttonModal": "shipping-address-add",
  "action": null
}
  • Content:
    // The JavaScript that handles the "Edit" button functionality can be found in
    // ../input-fake/input-fake.js.
    
  • URL: /components/raw/shipping-address/shipping-address.js
  • Filesystem Path: src/components/01-elements/form-items/shipping-address/shipping-address.js
  • Size: 111 Bytes
  • Content:
    .shipping-address {
      position: relative;
      min-height: 150px;
      padding: 10px;
      box-sizing: border-box;
    
      .radio--default + label {
        padding-left: 5px;
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
    
        &:before {
          top: 0;
          right: 10px;
          left: auto;
          transform: none;
        }
    
        &:after {
          top: 4px;
          right: 14px;
          left: auto;
        }
    
        @include breakpoint($breakpoint-xl) {
          color: $color-darkest;
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        min-height: 180px;
      }
    
      @include breakpoint($breakpoint-xl) {
        min-height: 200px;
      }
    }
    
    .shipping-address--button {
      @include reset-button;
      display: block;
      width: 100%;
    
      .icon {
        fill: $color-medium-dark;
        pointer-events: none;
      }
    
      .icon--new-address {
        width: 24px;
        height: 24px;
      }
    
      @include breakpoint($breakpoint-xl) {
        .icon--new-address {
          width: 35px;
          height: 36px;
        }
      }
    }
    
    .shipping-address__name {
      margin: 5px 0 10px;
      padding-right: 34px;
      font-weight: $font-weight-medium;
      word-break: break-all;
      hyphens: auto;
    
      @include breakpoint($breakpoint-md) {
        margin: 10px 0;
        font-weight: $font-weight-bold;
      }
    }
    
    .shipping-address__address {
      margin: 5px 0 0;
    }
    
    // Removes the need for JS to change the border when the radio is checked.
    .shipping-address__accent {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 1px solid $color-light;
      pointer-events: none;
    
      .radio--default:checked ~ & {
        border: 3px solid $color-primary;
      }
    }
    
    .shipping-address__button-label {
      margin: 8px 0;
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
      pointer-events: none;
    
      @include breakpoint($breakpoint-xl) {
        margin: 10px 0;
      }
    }
    
    .shipping-address__actions {
      position: absolute;
      right: 0;
      bottom: 0;
      text-align: right;
    
      .button--plain-text {
        position: relative;
        min-width: 0;
        height: 30px;
        line-height: 30px;
        overflow: visible;
        z-index: 10;
    
        &:not(:first-child)::before {
          display: block;
          position: absolute;
          top: 9px;
          bottom: 9px;
          left: -4px;
          width: 1px;
          height: 12px;
          border-right: 1px solid $color-light;
          content: '';
        }
      }
    
      @include breakpoint($breakpoint-md) {
        bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        right: 10px;
      }
    }
    
    .shipping-address__edit {
      color: $color-darkest;
    }
    
    .shipping-address__delete {
      color: $color-error;
    
      &:hover {
        color: $color-error;
      }
    }
    
  • URL: /components/raw/shipping-address/shipping-address.scss
  • Filesystem Path: src/components/01-elements/form-items/shipping-address/shipping-address.scss
  • Size: 2.6 KB

There are no notes for this item.