pure css steps

this is pure css steps using sass

by Mr_Vasu

HTML

<div class="steps-wrapper">
  <div class="line-unfill"></div>
  <div class="child active">
    <span class="item-icon">1</span>
    <div class="step-title">Residence CPV</div>
  </div>
  <div class="child active">
    <span class="item-icon">2</span>
    <div class="step-title">DDE1</div>
  </div>
  <div class="child">
    <span class="item-icon">3</span>
    <div class="step-title">DDE2</div>
  </div>
  <div class="child warning">
    <span class="item-icon">4</span>
    <div class="step-title">QDE1</div>
  </div>
  <div class="child">
    <span class="item-icon">5</span>
    <div class="step-title">QDE2</div>
  </div>
  <div class="child active">
    <span class="item-icon">6</span>
    <div class="step-title">Underwriter</div>
  </div>
</div>

SCSS

.steps-wrapper {
  width: 100%;
  height: 64px;
  position: relative;
  padding: 0 20px;
  
  .line-unfill {
    width: 80%;
    height: 2px;
    background: #a6acb3;
    position: absolute;
    top: 20px;
    z-index: 1;
  }
  
  .child {
    width:calc(100% / 6);
    height: 2px;
    float: left;
    vertical-align: middle;
    z-index: 2;
    position: relative;
    
    &::before{
      content:"";
      background: #fff;
      border-radius: 50%;
      border: 1px solid #ddd;
      width: 40px;
      height: 40px;
      display: flex;
    }
    &.active {
      background: transparent;
       &::before{
         background: green;
       }
      &::after {
        content: "";
        display: block;
        height: 2px;
        width: 100%;
        background: green;
        position: absolute;
        left: 0;
        top: 20px;
        z-index: -1;
      }
    }
    &.warning {
      background: transparent;
      &:before{
         background: orange;
       }
      &::after {
        content: "";
        display: block;
        height: 2px;
        width: 100%;
        background: #a6acb3;
        position: absolute;
        left: 41px;
        top: 20px;
      }
    }
    &:last-child{
      width:0px;
    }
  }
  .item-icon {
    height: 10px;
    width: 10px;
    position: absolute;
    top: 10px;
    left: 15px;
  }
  .step-title {
    text-align: left;
    top: 43px;
  }
  
}