Timeline

by Wagner Souza

HTML

<div class="timeline">
  <div class="border">
    <div class="item">
      <span class="border-item"></span>
      <span class="border-label">Item 02</span>
    </div>
    
    <div class="item">
      <span class="border-item"></span>
      <span class="border-label">Item 02</span>
    </div>
    
    <div class="item">
      <span class="border-item"></span>
      <span class="border-label">Item 02</span>
    </div>
  </div>
</div>

SCSS

body {
  background-color: #333;
  padding-top: 5rem;
}

.border {
  /* background-color: #d80808; */
  background-color: #eeeeee;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  padding: .3rem;
  height: 20px;
  position: relative;
  
  &-item {
    background-color: #d80808;
    display: flex;
  }
}

.item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #fff;
  width: 100%;
  flex-basis: 100%;
  background-color: #d80808;
  
  &.active ~ .item {
    background-color: #fff;
  }
  
  .border-label {
    transform: translateY(200%);
  }
  
  
  &:nth-child(odd) {
    .border-label {
      transform: translateY(-200%);
    }
  }
  
  &:first-child {
    justify-content: flex-start;
  }
  
  &:last-child {
    justify-content: flex-end;
  }
}