wizard steps

by Dru Dro

HTML

<div class="container">
  <div class="steps">
    <div class="step complete">Pick</div>
    <div class="step active">Style</div>
    <div class="step">Shop</div>
    <div class="step">Checkout</div>
  </div>
</div>

SCSS

.steps {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin: 20px auto;
  .step {
    position: relative;
    text-align: center;
    flex: 1 1 auto;
    color: #9a88c3;
    border-top: 1px solid #9a88c3;
    &:before {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #9a88c3;
      top: -2px;
      left: 50%;
      transform: translateX(-50%);
    }
    &:after {
      content: "";
      position: absolute;
      top: -1px;
      width: 50%;
      height: 1px;
      background: #9a88c3;
      left: 0%;
    }
    &.active,&.complete {
      color: #000;
      &:before {
        background: #000;
      }
      &:after {
        background: #000;
      }
    }
    &.complete {
      border-color:#000;
    }
  }
}