Timeline

by Marc Malignan

HTML

<div class="timeline">
  <div class="timeline-title">Timeline</div>
  <div class="timeline-wrapper">
    <div class="timeline-event left">LEFT</div>
    <div class="timeline-event">CENTERED</div>
    <div class="timeline-event right">RIGHT</div>
  </div>
</div>

SCSS

body {
  background: #ddd;
}

$timeline-spacing: 40px;
$timeline-line-width: 6px;
$timeline-line-color: #aaa;
$timeline-event-width: 200px;
$timeline-arrow-size: 20px;
$timeline-dot-size: 12px;

.timeline {
  font-family: Arial;
  
  &-title {
    margin-bottom: $timeline-spacing/2;
    font-weight: bold;
    text-align: center;
  }
  
  &-wrapper {
    position: relative;
    padding: $timeline-spacing/2 0;
    
    &:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: $timeline-line-width;
      margin-left: -$timeline-line-width/2;
      background: $timeline-line-color;
    }
  }
  
  &-event {
    position: relative;
    width: $timeline-event-width;
    margin: 0 auto $timeline-spacing;
    padding: 20px;
    background: white;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &.left,
    &.right {
      &:before {
        content: '';
        position: absolute;
        top: 50%;
        border: $timeline-arrow-size solid transparent;
        transform: translateY(-50%) scale(1, .5);
      }
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        width: $timeline-dot-size;
        height: $timeline-dot-size;
        background: $timeline-line-color;
        border-radius: 50%;
      }
    }
    
    &.left {
      text-align: left;
      transform: translateX((-$timeline-event-width/2) - $timeline-spacing);
      
      &:before {
        right: -$timeline-arrow-size*2;
        border-left-color: white;
      }
      &:after {
        right: 0;
        margin-right: -$timeline-spacing;
        transform: translateX(50%) translateY(-50%);
      }
    }
    
    &.right {
      text-align: right;
      transform: translateX(($timeline-event-width/2) + $timeline-spacing);
      
      &:before {
        left: -$timeline-arrow-size*2;
  ...