<div class="form-step">
    <span class="form-step__step-number form-step__step-number--past">1</span>
    <h4 class="form-step__title">Shipping Information</h4>
    <button class="form-step__edit-button button button--outlined">Edit</button>
</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": "past",
  "editButton": true
}
  • 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.