stepper - horizontal

by charmis

HTML

<ol class="sprk-c-Stepper" data-sprk-stepper="container" data-id="stepper-1" role="tablist" aria-orientation="vertical">
  <li role="tab" class="sprk-c-Stepper__step sprk-c-Stepper__step--first" data-sprk-stepper="step" aria-selected="false">
    <div class="sprk-c-Stepper__step-content">
      <span class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain">
        <span class="sprk-c-Stepper__step-icon"></span>

      </span>
    </div>
  </li>

  <li role="tab" class="sprk-c-Stepper__step sprk-c-Stepper__step" aria-selected="true" data-sprk-stepper="step" tabindex="0">
    <div class="sprk-c-Stepper__step-content">
      <span class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain">
        <span class="sprk-c-Stepper__step-icon"></span>

      </span>
    </div>
  </li>

  <li role="tab" class="sprk-c-Stepper__step sprk-c-Stepper__step" data-sprk-stepper="step" aria-selected="false">
    <div class="sprk-c-Stepper__step-content">
      <span class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain">
        <span class="sprk-c-Stepper__step-icon"></span>

    </div>
  </li>

  <li role="tab" class="sprk-c-Stepper__step sprk-c-Stepper__step--last sprk-c-Stepper__step--selected" data-sprk-stepper="step" aria-selected="false">
    <div class="sprk-c-Stepper__step-content">
      <span class="sprk-c-Stepper__step-header sprk-b-Link sprk-b-Link--plain">
        <span class="sprk-c-Stepper__step-icon"></span>

    </div>
  </li>
</ol>

CSS

.sprk-c-Stepper {
  background-color: rgba(0, 0, 0, 0);
  list-style-type: none;
  position: relative;
}

.sprk-c-Stepper__step {
  display: inline-block;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.sprk-c-Stepper__step:focus {
  outline: 0;
}

.sprk-c-Stepper__step::before {
  background-color: blue;
  content: '';
  height: 2px;
  position: absolute;
  width: 104%;
  top: 50%;
}

.sprk-c-Stepper__step--has-slider.sprk-c-Stepper__step--first::before,
.sprk-c-Stepper__step--has-slider.sprk-c-Stepper__step--last::before,
.sprk-c-Stepper__step--first::before,
.sprk-c-Stepper__step--last::before {
  height: 2px;
}

.sprk-c-Stepper__step--last.sprk-c-Stepper__step--has-slider::before,
.sprk-c-Stepper__step--last::before {
  top: 50%;
  left: -70%;
}

.sprk-c-Stepper__step--has-slider.sprk-c-Stepper__step--first::before,
.sprk-c-Stepper__step--first::before {
  bottom: 0;
  left: 30%;
}

.sprk-c-Stepper__step-icon {
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid gray;
  display: inline-block;
  height: 16px;
  left: -41px;
  position: absolute;
  transition: 0.3s all ease-in-out;
  width: 16px;
  z-index: 1
}

.sprk-c-Stepper__step-content {
  background-color: rgba(0, 0, 0, 0);
  margin-left: 66px;
  padding: 24px;
  position: relative;
}

.sprk-c-Stepper__step-content--has-description {
  border-radius: 5px;
}

.sprk-c-Stepper__slider--active .sprk-c-Stepper__step-description,
.sprk-c-Stepper__step--selected .sprk-c-Stepper__step-description {
  display: block
}

.sprk-c-Stepper__slider--active .sprk-c-Stepper__step-heading,
.sprk-c-Stepper__step--selected .sprk-c-Stepper__step-heading {
  font-weight: 400;
  color: #333
}

.sprk-c-Stepper__slider--active .sprk-c-Stepper__step-icon,
.sprk-c-Stepper__step--selected .sprk-c-Stepper__step-icon {
  background-color: #fff;
  border-color: #008473;
  box-shadow: 0 0 0 8px #008473
}

.sprk-c-Stepper__slider--active .sprk-c-Stepper__step-header:hover...