<div class="modal-wrapper js-modal" id="login">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--login">
        <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">Login To Your Account</span>
            <div class="modal__content">
                <form class="modal-form modal-form--login js-modal-form">
                    <div class="modal-form__items modal-form__items--1-cols">
                        <div class="modal-form__item-group">
                            <div class="form-item form-item--email form-item--login-email">
                                <label for="login-email" class="label label--email">Email Address</label>
                                <input type="email" id="login-email" name="email" class="input input--email" placeholder="name@example.com">
                            </div>

                            <div class="form-item form-item--password form-item--login-password">
                                <label for="login-password" class="label label--password">Password</label>
                                <input type="password" id="login-password" name="password" class="input input--password">
                            </div>

                        </div>
                    </div>
                    <div class="modal-form__actions js-modal-form-actions">
                        <div class="modal-form__action">
                            <button class="button button--primary">Login</button>

                        </div>
                        <div class="modal-form__action">
                            <button class="button button--plain-text js-modal-open-link js-modal-close-button" data-modal-id="reset-password">Forgot password?</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": "login",
  "title": "Login To Your Account",
  "form": "login"
}
  • Content:
    .modal.modal--login {
      .modal__inner {
        max-width: 700px;
      }
    }
    
    .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.5 KB

There are no notes for this item.