Vertical Step Navigation

by Bouteille Dimitri

HTML

<div class="step-vertical">
  <div class="step-item">
    <span class="step-item-label">Informations générales</span>
  </div>
  <div class="step-item">
  <span class="step-item-label">Informations Parents</span>
  </div>
  <div class="step-item">
  <span class="step-item-label">Droit à l'image</span>
  </div>  
  <div class="step-item">
  <span class="step-item-label">Certificat médical</span>
  </div>
  <div class="step-item">
  <span class="step-item-label">Confirmation</span>
  </div>

</div>

SCSS

.step {
  
  &-item{
    position:relative;
    
    &:before{
      position:absolute;
      left: 0;
      top: 0;
      bottom:0;
      width: 3px;
      background: #888;
      content: "";
    }
    &-label{
      position: relative;      
      padding-left: 20px;
      &:after{
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        background: orange;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-left: -5.5px;
        border-radius: 50%;
      }
    }
    ~ .step-item {
      padding-top: 30px;
    }
  }
  
}