<h1>Navigation wizard example with equal width steps and flexible width of the last step</h1>

<div class="container">
    
  <ul class="wizard">
    <li class="wizard__step">
      <a href="#1" class="wizard__step-link">
        This is the first step
      </a>
    </li>
    <li class="wizard__step">
      <a href="#2" class="wizard__step-link">
        This is the second step
      </a>
    </li>
    <li class="wizard__step">
      <a href="#3" class="wizard__step-link">
        This is the third step
      </a>
    </li>
    <li class="wizard__step">
      <a href="#4" class="wizard__step-link">
        This is the fourth step
      </a>
    </li>
    <li class="wizard__step">
      <a href="#5" class="wizard__step-link">
        This is the last step with the flexible width
      </a>
    </li>
  </ul>
    
</div>

<p style="text-align:center">Read more: <a href="https://auralinna.blog/post/2018/navigation-wizard-example" target="_blank">Navigation wizard example with equal width steps and flexible width of the last step</a></p>

html, body {
  color: #333;
  font-size: 16px;
  line-height: 20px;
}
body {
  margin: 20px;
}

h1 {
  line-height: 1.2;
  margin-bottom: 35px;
  text-align: center;
}

.container {
  background: #eee;
  margin: 0 auto 35px;
  max-width: 920px;
  padding: 20px;
}

/* Actual code example */

.wizard {
  counter-reset: stepNo;
  display: flex;
  margin: 0;
  padding: 0;
}

.wizard__step {
  flex: 1 0 0;
  list-style: none;
  padding: 0 2% 0 0;
  position: relative;

  &::before {
    border-top: 3px solid #333;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 25px;
  }

  &:last-child {
    border: 0;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;

    &::before {
      border: 0 none;
    }
  }
}

@for $i from 2 through 10 {
  .wizard__step:last-child:nth-child(#{$i}) {
    max-width: 100% / $i;
  }
}

.wizard__step-link {
  color: #333;
  display: block;
  font-size: 1rem;
  font-weight: bold;
  position: relative;
  text-decoration: none;
  z-index: 10;

  &:before {
    background: #333;
    color: #fff;
    counter-increment: stepNo;
    content: counter(stepNo) ".";
    display: block;
    font-size: 2rem;
    height: 50px;
    line-height: 50px;
    margin-bottom: 12px;
    text-align: center;
    width: 50px;
  }

  &:hover,
  &:focus {
    color: #000;
    text-decoration: none;

    &:before {
      background: #fff;
      border: 1px solid #333;
      color: #333;
    }
  }
}

/** This JS is just for the demo to show dynamic width of last step */

const lastStepTyper = () => {
  const delay = 200;
  const lastStep = document.querySelector('.wizard__step:last-child .wizard__step-link')
  const txt = lastStep.text.trim().split('')
  
  lastStep.text = ''
  
  for (i = 0; i < txt.length; i++) {
    setTimeout(() => {
      lastStep.append(txt.shift())
    }, delay * i)
  }
  
  setTimeout(() => {
    lastStepTyper()
  }, delay * i + 1000)
}

lastStepTyper()