Form Steps

There are no notes for this item.

<nav class="form-steps{{ modifier ? ' ' ~ modifier }}" aria-labelledby="form-steps-{{ steps.length }}{{ active }}{{ modifier ? '-' ~ modifier }}">
  <h2 id="form-steps-{{ steps.length }}{{ active }}{{ modifier ? '-' ~ modifier }}" class="visually-hidden">Steps in this wizard</h2>
  {% spaceless %}
    <ol class="form-steps-list">
      {% for key, step in steps %}
        <li class="{% if key + 1 < active %}completed{% endif %}{% if key + 1 == active %}active{% endif %}">
          {% if step.url and (key + 1) != active %}
            <a href="{{ step.url }}"><span>{{ step.text }}</span></a>
          {% else %}
            <span><span>{{ step.text }}</span></span>
          {% endif %}
        </li>
      {% endfor %}
    </ol>
  {% endspaceless %}
</nav>
<!-- Default -->
<nav class="form-steps" aria-labelledby="form-steps-73">
    <h2 id="form-steps-73" class="visually-hidden">Steps in this wizard</h2>
    <ol class="form-steps-list">
        <li class="completed"><a href="#"><span>first step</span></a></li>
        <li class="completed"><a href="#"><span>second step</span></a></li>
        <li class="active"><span><span>active step</span></span></li>
        <li class=""><a href="#"><span>Step with a long name</span></a></li>
        <li class=""><span><span>inactive fifth step</span></span></li>
        <li class=""><span><span>inactive sixth step</span></span></li>
        <li class=""><span><span>inactive seventh step</span></span></li>
    </ol>
</nav>

<!-- Vertical -->
<nav class="form-steps vertical" aria-labelledby="form-steps-73-vertical">
    <h2 id="form-steps-73-vertical" class="visually-hidden">Steps in this wizard</h2>
    <ol class="form-steps-list">
        <li class="completed"><a href="#"><span>first step</span></a></li>
        <li class="completed"><a href="#"><span>second step</span></a></li>
        <li class="active"><span><span>active step</span></span></li>
        <li class=""><a href="#"><span>Step with a long name</span></a></li>
        <li class=""><span><span>inactive fifth step</span></span></li>
        <li class=""><span><span>inactive sixth step</span></span></li>
        <li class=""><span><span>inactive seventh step</span></span></li>
    </ol>
</nav>

/* Default */
{
  "steps": [
    {
      "text": "first step",
      "url": "#"
    },
    {
      "text": "second step",
      "url": "#"
    },
    {
      "text": "active step",
      "url": "#"
    },
    {
      "text": "Step with a long name",
      "url": "#"
    },
    {
      "text": "inactive fifth step"
    },
    {
      "text": "inactive sixth step"
    },
    {
      "text": "inactive seventh step"
    }
  ],
  "active": 3
}

/* Vertical */
{
  "steps": [
    {
      "text": "first step",
      "url": "#"
    },
    {
      "text": "second step",
      "url": "#"
    },
    {
      "text": "active step",
      "url": "#"
    },
    {
      "text": "Step with a long name",
      "url": "#"
    },
    {
      "text": "inactive fifth step"
    },
    {
      "text": "inactive sixth step"
    },
    {
      "text": "inactive seventh step"
    }
  ],
  "active": 3,
  "modifier": "vertical"
}

  • Content:
    .form-steps,
    .wizard-steps { /// @deprecated
      ol.form-steps-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        counter-reset: item;
        list-style-type: none;
    
        li {
          display: inline-block;
          margin-bottom: .8rem;
    
          &:not(:first-child):not(:last-child):not(.active) {
            @include desktop-and-below {
              // clip
              position: absolute;
              width: 1px;
              height: 1px;
              margin: -1px;
              padding: 0;
              border: 0;
              overflow: hidden;
              // also hide from screenreaders
              visibility: hidden;
              clip: rect(0 0 0 0);
            }
          }
    
          span > span,
          a > span {
            @include desktop-and-below {
              position: absolute;
              width: 1px;
              height: 1px;
              margin: -1px;
              padding: 0;
              border: 0;
              overflow: hidden;
              clip: rect(0 0 0 0);
            }
          }
    
          a {
            @include reset-link-background;
            padding: 0;
            vertical-align: middle;
    
            &:hover,
            &:focus {
              background-color: transparent;
    
              &::before {
                @include theme('border-color', 'color-primary--darken-1', 'form-step--active-border-color');
              }
            }
    
            > span {
              @include link-background('color-primary', null, 'link-underline-color');
              padding: 0 0 .2rem;
            }
          }
    
          a::before,
          > span::before {
            @include theme('border-color', 'color-primary--lighten-5', 'form-step--active-border-color');
            @include theme('background-color', 'color-primary--lighten-5', 'form-step--active-border-color');
            @include theme('color', 'color-tertiary', 'default-text-color');
            @include bold-text;
    
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            margin-right: .8rem;
            transition: .2s ease-in-out;
            border: 2px solid;
            border-radius: 1rem;
            font-size: .8rem;
            content: counter(item);
            counter-increment: item;
          }
    
          &.active {
            @include bold-text;
    
            > span::before {
              @include theme('border-color', 'color-primary--darken-1', 'form-step--active-border-color');
    
              background-color: transparent;
            }
          }
    
          &.completed:not(.active) {
            a,
            > span {
              @include icon(checkmark, before);
            }
    
            a::before,
            > span::before {
              border-color: color('green', -3);
              background-color: color('green', -3);
              font-size: 1.5rem;
              line-height: 1.25;
              vertical-align: middle;
            }
    
            a:hover,
            a:focus {
              &::before {
                border-color: color('green', 1);
              }
            }
          }
    
          @include desktop-and-below {
            &.active {
              margin-bottom: 0;
    
              ::before,
              ::after {
                margin-bottom: .8rem;
              }
    
              &::before,
              &::after {
                @include theme('border-color', 'color-primary--darken-2', 'form-step-hellip-background-color');
                @include theme('background-color', 'color-primary--darken-2', 'form-step-hellip-background-color');
                @include theme('color', 'color-secondary', 'form-step-hellip-color');
    
                display: inline-block;
                width: 2rem;
                height: 2rem;
                margin-right: .8rem;
                margin-bottom: .8rem;
                border: 2px solid;
                border-radius: 1rem;
                text-align: center;
                content: '\2026';
              }
            }
    
            &:first-child::before,
            &:nth-child(2)::before,
            &:nth-last-child(2)::after,
            &:last-child::after {
              content: none;
            }
          }
        }
      }
    
      &:not(.vertical) ol.form-steps-list {
        @include desktop {
          li:not(:last-child)::after {
            @include theme('border-color', 'color-primary--lighten-3', 'form-step--active-border-color');
    
            display: inline-block;
            width: .8rem;
            margin: 0 .6rem;
            border-bottom: 2px solid;
            content: '';
            vertical-align: middle;
          }
        }
      }
    
      &.vertical ol.form-steps-list {
        @include desktop {
          flex-direction: column;
    
          li {
            margin-bottom: .6rem;
    
            &:not(:last-child)::after {
              @include theme('border-color', 'color-primary--lighten-3', 'form-step--active-border-color');
    
              display: block;
              width: 1rem;
              height: .8rem;
              margin: .6rem 0 0;
              border-right: 2px solid;
              content: '';
            }
          }
        }
      }
    }
    
  • URL: /components/raw/form-steps/_form-steps.scss
  • Filesystem Path: components/31-molecules/form-steps/_form-steps.scss
  • Size: 4.7 KB