Maui Jim Style Guide

Login Forms: Create Password Feedback 

<form class="login-form login-form--create-password-feedback">
    <h4 class="login-form__title">Create a new password</h4>
    <p class="login-form__description">Your password has been changed. Please go to the login page.</p>
    <div class="login-form__actions">
        <button class="button button--primary">Go to login</button>

    </div>
</form>
 
<form class="login-form login-form--{{_self.name}}">
  <h4 class="login-form__title">{{title}}</h4>
  <p class="login-form__description">{{description}}</p>
  {{#if formItems}}
  <div class="login-form__form-items">
    {{#each formItems}}
    {{render (dynamicComponent component) this merge=true}}
    {{/each}}
  </div>
  {{/if}}
  {{#if actions}}
  <div class="login-form__actions">
    {{#each actions}}
    {{render (dynamicVariant 'buttons' type) this merge=true}}
    {{/each}}
  </div>
  {{/if}}
</form>
 
{
  "title": "Create a new password",
  "description": "Your password has been changed. Please go to the login page.",
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Go to login"
    }
  ]
}
  • Content: 
    .login-form__title {
  margin: 0 0 13px;
  color: $color-dark;
  font-size: 1.6rem;
  font-weight: $font-weight-bold;
  letter-spacing: 1px;
  line-height: 1.9rem;
  text-transform: uppercase;

  @include breakpoint($breakpoint-md) {
    margin-bottom: 10px;
  }

  @include breakpoint($breakpoint-xl) {
    width: calc(100% + 15px);
    margin-bottom: 11px;
    font-size: 2.4rem;
    line-height: 2.8rem;
  }
}

.login-form__description {
  margin: 13px 0 20px;
  color: $color-dark;
  font-size: 1.4rem;
  letter-spacing: normal;
  line-height: 1.7rem;

  @include breakpoint($breakpoint-md) {
    margin: 10px 0 20px;
  }

  @include breakpoint($breakpoint-xl) {
    font-size: 1.9rem;
    line-height: 2.3rem;
  }

  .login-form--login &,
  .login-form--create-account & {
    @include breakpoint($breakpoint-lg) {
      min-height: 34px;
    }

    @include breakpoint($breakpoint-xl) {
      min-height: 46px;
    }
  }
}

.login-form__form-items {
  .label {
    margin-bottom: 7px;
  }

  .form-item {
    margin-bottom: 10px;
  }

  .input {
    padding: 10px 20px;
  }

  @include breakpoint($breakpoint-xl) {
    .form-item {
      margin-bottom: 13px;
    }
  }
}

.login-form__actions {
  margin-top: 20px;

  @include breakpoint($breakpoint-sm-only) {
    .button {
      display: block;
      margin: 0 auto 8px;
    }

    .button--plain-text {
      width: auto;
    }
  }

  @include breakpoint($breakpoint-md) {
    .button {
      width: 100%;
    }

    .button:not(:first-child) {
      margin-left: 10px;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .button {
      width: auto;
    }
  }
}
  • URL: /components/raw/login-form/login-form.scss
  • Filesystem Path: src/components/01-elements/forms/login-form/login-form.scss
  • Size: 1.6 KB

There are no notes for this item.