Maui Jim Style Guide

Form Step: Present 

<div class="form-step">
    <span class="form-step__step-number form-step__step-number--present">1</span>
    <h4 class="form-step__title">Shipping Information</h4>
</div>
 
<div class="form-step">
  <span class="form-step__step-number form-step__step-number--{{stepStatus}}">{{stepNumber}}</span>
  {{#if title}}
  <h4 class="form-step__title">{{title}}</h4>
  {{/if}}
  {{#if editButton}}
  <button class="form-step__edit-button button button--outlined">Edit</button>
  {{/if}}
</div>
 
{
  "stepNumber": "1",
  "title": "Shipping Information",
  "stepStatus": "present"
}
  • Content: 
    // Note that styles for .checkout-form__title, and .checkout-form__step-number
// are handled here for historical reasons (and since some instances of those
// selectors still exist!)
.form-step {
  position: relative;
}

// All checkout form step number styles are handled here.
.checkout-form__step-number,
.form-step__step-number {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid $color-primary;
  border-radius: 50%;
  color: $color-dark;
  font-size: 1.4rem;
  font-weight: $font-weight-bold;
  line-height: 30px;
  text-align: center;

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

.checkout-form__step-number--future,
.form-step__step-number--future {
  border-color: $color-light;
  font-weight: $font-weight-normal;
}

.checkout-form__step-number--past,
.form-step__step-number--past {
  background-color: $color-primary;
  color: $color-white;
}

// All checkout form title styles are handled here.
.checkout-form__title,
.form-step__title {
  position: relative;
  margin: 0 0 20px 40px;
  padding: 0;
  border-bottom: 1px solid $color-light;
  color: $color-dark;
  font-size: 1.6rem;
  font-weight: $font-weight-bold;
  letter-spacing: 1px;
  line-height: 3rem;

  @include breakpoint($breakpoint-xl) {
    padding-top: 2px;
    font-size: 2.4rem;
    line-height: 2.8rem;
  }

  @include breakpoint($page-width-checkout-max) {
    padding-bottom: 4px;
  }
}

.checkout-form__edit-button,
.form-step__edit-button {
  position: absolute;
  right: 0;
  width: auto;

  @include breakpoint(0 ($breakpoint-xl - 1)) {
    top: 0;
    height: 30px;
    padding: 0;
    border: 0;
    color: $color-primary;
    font-weight: $font-weight-normal;
    letter-spacing: 1px;
    line-height: 2.8rem;
    text-transform: none;
  }

  @include breakpoint($breakpoint-xl) {
    top: 5px;
    padding: 0 20px;
    line-height: 2.2rem;
  }
}
  • URL: /components/raw/form-step/form-step.scss
  • Filesystem Path: src/components/01-elements/form-items/form-step/form-step.scss
  • Size: 1.9 KB

There are no notes for this item.