<h1>Step Trackers</h1>

<h2>Arrow Style</h2>
<ol class="arrows reversed">
  <li class="arrows__arrow">
    <span class="arrow-label">
      Set a Portfolio
    </span>
  </li>
  
  <li class="arrows__arrow">
    <span class="arrow-label">
      Create Portfolio
    </span>
  </li>
  
  <li class="arrows__arrow is-current">
    <span class="arrow-label">
      Review Portfolio
    </span>
  </li>
  
  <li class="arrows__arrow">
    <span class="arrow-label">
      Add Funds
    </span>
  </li>
</ol>

<h2>Progress Bar Style</h2>

<ol class="bar-steps">
  <li class="bar-steps__step is-complete">
    <span class="step-label">
      Set a Portfolio
    </span>
  </li>
  
  <li class="bar-steps__step is-complete">
    <span class="step-label">
      Create Portfolio
    </span>
  </li>
  
  <li class="bar-steps__step is-current">
    <span class="step-label">
      Review Portfolio
    </span>
  </li>
  
  <li class="bar-steps__step">
    <span class="step-label">
      Add Funds
    </span>
  </li>
</ol>
// variables / settings
// ----------------------------
$theme-color: desaturate(navy, 15%);

$arrows-height: 3em;
$arrows-border: $theme-color;
$arrows-fill: #fff;

$arrows-current-border: $arrows-border;
$arrows-current-fill: $arrows-current-border;

$bar: #aaa;
$bar-complete: $theme-color;

// patterns: layout
// ----------------------------
%l-unequal-cell {
  display: flex;
  
  > * {
    flex-grow: 1;
    min-width: min-content; // Safari bug fix
  }
}

%l-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

// base 
// ----------------------------
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif; font-size: 14px; background: lighten($theme-color, 70%); color: $theme-color; margin: 0; padding: .5em 1.5em;}

// components
// ----------------------------
// Arrow Style Step Tracker:
.arrows {
  @extend %l-unequal-cell;
  counter-reset: custom-counter 5;
  list-style-type: none;
  line-height: 1;
  margin: 0;
  padding: 0 ($arrows-height / 2) 0 0;
  
  &__arrow {
    @extend %l-flex-center;
    background: $arrows-fill;
    border: 1px solid $arrows-border;
    border-right: 0;
    padding: 0 0.5em;
    height: $arrows-height;
    position: relative;
    
    // arrow point
    &:after {
      background: inherit;
      border: solid $arrows-border;
      box-shadow: -1px -1px 1px -1px $arrows-border; // beef up border
      border-width: 1px 0 0 1px;
      border-radius: 4px;
      content: "";
      display: block;
      width: $arrows-height;
      margin: auto 0;
      margin-left: -($arrows-height / 2);
      position: absolute;
      z-index: 2;
      top: -2px;
      bottom: -2px;
      left: 100%;
      transform: rotate(136deg) scale(.7);
      // Check browser compatibility (extra, not really needed with use of inner "label" wrapper):
      clip-path: polygon(
        0% 0%,
        115% -5%,
        -5% 115%,
        0% 0%
      );
    }
    
    &.is-current {
      background: $arrows-current-fill;
      border-color: $arrows-current-border;
      color: #fff;
      font-weight: bold;
    }
    
    + .arrows__arrow {
      border-left: 0;
      padding-left: 2em;
    }
  }
}

.arrow-label {
  counter-increment: custom-counter -1;
  display: inline-block;
  position: relative;
  z-index: 3;
  
  &:before {
    content: counter(custom-counter) ". ";
    display: inline;
  }
}

// Progress Bar Style Step Tracker:
.bar-steps {
  @extend %l-unequal-cell;
  list-style: none;
  line-height: 1;
  margin: 0;
  padding: 0;
  
  &__step {
    border-bottom: 8px solid $bar;
    padding: 0 0.5em;
    padding-bottom: 0.8em;
    
    &.is-complete,
    &.is-current {
      border-color: $bar-complete;
    }
    
    &.is-current {
      font-weight: bold;
    }
  }
}
View Compiled
// Forked from Kristin Bradley
// https://codepen.io/KristinB/pen/vgLWeE

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.