Progress Steps 

<nav class="c-progress-steps">
    <ol class="c-progress-steps__list">
        <li class="c-progress-steps__item  is-active">
            <a class="c-progress-steps__link" href="#0">
                <h4 class="c-progress-steps__title">General information</h4>
            </a>
        </li>
        <li class="c-progress-steps__item ">
            <a class="c-progress-steps__link" href="#0">
                <h4 class="c-progress-steps__title">Add Material</h4>
            </a>
        </li>
        <li class="c-progress-steps__item ">
            <a class="c-progress-steps__link" href="#0">
                <h4 class="c-progress-steps__title">Review &amp; Allocate</h4>
            </a>
        </li>
        <li class="c-progress-steps__item ">
            <a class="c-progress-steps__link" href="#0">
                <h4 class="c-progress-steps__title">Upload &amp; Complete</h4>
            </a>
        </li>
    </ol>
</nav>
 
<nav class="c-progress-steps">
  <ol class="c-progress-steps__list">
    {{#each steps}}
    <li class="c-progress-steps__item {{#if step.active}} is-active{{/if}}">
      <a class="c-progress-steps__link" href="#0">
        <h4 class="c-progress-steps__title">{{step.title}}</h4>
      </a>
    </li>
    {{/each}}
  </ol>
</nav>
 
{
  "steps": [
    {
      "step": {
        "title": "General information",
        "active": "yes"
      }
    },
    {
      "step": {
        "title": "Add Material"
      }
    },
    {
      "step": {
        "title": "Review & Allocate"
      }
    },
    {
      "step": {
        "title": "Upload & Complete"
      }
    }
  ]
}
  • Content: 
    .c-progress-steps {
}

  .c-progress-steps__list {
    display: flex;
    margin: 0;
    padding: 0;
  }

    .c-progress-steps__item {
      flex: 1;
      list-style-type: none;
      text-align: center;

      &:first-child {
        text-align: left;
      }

      &:last-child {
        text-align: right;
      }

      &.is-active {
        .c-progress-steps__link {
          color: $color-brand-secondary-600;
        }

        .c-progress-steps__title {
          @include font-weight(bold);
          color: currentColor;

          &::before {
            border: rem(3) solid;
            background-color: $color-white;
            box-shadow: 0 0 0 rem(4) $color-white;
          }
        }
      }

      &.is-active ~ * {

        .c-progress-steps__link {
          color: $color-grey-300;

          @include hocus() {
            color: darken($color-grey-300, 5%);

            .c-progress-steps__title {
              color: $color-grey-500;

              &::before {
                color: darken($color-grey-300, 5%);
              }
            }
          }
        }

        .c-progress-steps__title {
          color: $color-grey-400;

          &::before {
            border: 0;
            background-color: $color-grey-300;
          }
        }
      }
    }

      .c-progress-steps__link {
        display: block;
        position: relative;
        width: 100%;
        margin-top: $space-xxxs;
        padding-top: $space-unit;
        border-top: $space-xxxs solid;
        color: $color-brand-secondary-600;
      }

        .c-progress-steps__title {
          @include font-weight(normal);
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          color: $color-brand-secondary-600;

          &::before {
            display: block;
            position: absolute;
            top: -#{$space-xs};
            width: rem(14);
            height: rem(14);
            border: 0;
            border-radius: 50%;
            background-color: currentColor;
            content: '';
          }
        }
  • URL: /components/raw/progress-steps/_progress-steps.scss
  • Filesystem Path: components/_code-components/navigation/progress-steps/_progress-steps.scss
  • Size: 2.1 KB
  • Content: 
    var parentNav = document.querySelectorAll('.c-progress-steps__item');

for (var i = 0, l = parentNav.length; i < l; i++) {

  parentNav[i].onclick = function() {
    parentNav.forEach(function(elem) {
      elem.classList.remove("is-active");
    });
    element = this;
    if (element.classList.contains("is-active")) {
      element.classList.remove("is-active");
    } else {
      element.classList.add("is-active");
    }
    return false;
  }
}
  • URL: /components/raw/progress-steps/progress-steps.js
  • Filesystem Path: components/_code-components/navigation/progress-steps/progress-steps.js
  • Size: 452 Bytes

There are no notes for this item.