<div class="modal-wrapper js-modal" id="reset-password">
    <div class="modal-overlay js-modal-overlay"></div>
    <div class="modal modal--reset-password modal--mobile-overlay">
        <div class="modal__inner">
            <div class="reset-password">
                <div class="reset-password__content">
                    <form class="login-form login-form--reset-password">
                        <h4 class="login-form__title">Reset password</h4>
                        <p class="login-form__description">Enter the email address associated with your account in order to receive instructions on how to reset your password.</p>
                        <div class="login-form__form-items">
                            <div class="form-item form-item--email form-item--reset-password-email form-item--required">
                                <label for="reset-password-email" class="label label--email label--required">Email Address</label>
                                <input type="email" id="reset-password-email" name="email" class="input input--email" placeholder="name@example.com" autocomplete="email">
                            </div>

                        </div>
                        <div class="login-form__actions">
                            <button class="button button--primary">Send Email</button>

                        </div>
                    </form>

                    <button class="modal__alternate-close js-modal-close-button">Close</button>
                </div>
            </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">
      <div class="reset-password">
        <div class="reset-password__content">
          {{render (dynamicVariant 'login-form' form) formOverrides merge=true}}
          <button class="modal__alternate-close js-modal-close-button">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "reset-password",
  "form": "reset-password",
  "formOverrides": {
    "actions": [
      {
        "type": "primary",
        "buttonValue": "Send Email"
      }
    ]
  }
}
  • Content:
    .modal.modal--reset-password,
    .modal.modal--reset-password-feedback {
      .modal__inner {
        max-width: 700px;
      }
    }
    
    .reset-password__content {
      max-width: 460px;
      margin: 0 auto;
      padding: 55px 30px 30px;
      text-align: center;
    
      .login-form {
        @include clearfix;
        margin-bottom: 30px;
        text-align: left;
    
        @include breakpoint($breakpoint-md) {
          margin-bottom: 10px;
        }
      }
    
      .login-form__title {
        margin-bottom: 35px;
        text-align: center;
    
        .modal--reset-password-feedback & {
          margin-bottom: 75px;
        }
      }
    
      .login-form__description {
        margin-bottom: 15px;
    
        .modal--reset-password-feedback & {
          margin-bottom: 90px;
        }
      }
    
      .login-form__form-items {
        width: 100%;
      }
    
      .login-form__actions {
        width: 100%;
        margin-top: 10px;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        .button {
          width: 100%;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        padding-top: 65px;
        padding-bottom: 10px;
    
        .login-form {
          margin-bottom: 40px;
        }
    
        .login-form__title {
          margin-bottom: 20px;
    
          .modal--reset-password-feedback & {
            margin-bottom: 70px;
          }
        }
    
        .login-form__description {
          margin-bottom: 35px;
    
          .modal--reset-password-feedback & {
            margin-bottom: 60px;
          }
        }
    
        .button {
          &:after {
            content: none;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        padding-bottom: 20px;
    
        .login-form {
          margin-bottom: 80px;
        }
    
        .login-form__title {
          font-weight: $font-weight-medium;
    
          .modal--reset-password-feedback & {
            margin-bottom: 60px;
          }
        }
    
        .login-form__description {
          font-size: 1.9rem;
          line-height: 2.3rem;
    
          .modal--reset-password-feedback & {
            margin-bottom: 0;
          }
        }
      }
    }
    
  • URL: /components/raw/reset-password/reset-password.scss
  • Filesystem Path: src/components/01-elements/modals/reset-password/reset-password.scss
  • Size: 1.8 KB

There are no notes for this item.