timeline.sass

$timeline-marker-background-color: $white !default
$timeline-marker-border: .1em solid $grey-light !default
$timeline-line: .1rem solid $grey-light !default
$timeline-content-padding: 1em 0 0 2em !default
$timeline-icon-size: $size-5 !default
$timeline-header-width: 4em !default
$dimensions: 16 24 32 48 64 96 128 !default

.timeline
  .timeline-header
    width: $timeline-header-width
    text-align: center
  .timeline-item
    display: flex
    display: -ms-flexbox
    display: -webkit-flex
    position: relative
    border-left: $timeline-line
    margin-left: calc( #{$timeline-header-width} / 2 )
    padding-bottom: 2em
    &::before
      background: $timeline-marker-background-color
      border: $timeline-marker-border
      border-radius: 100%
      content: ""
      display: block
      height: .8rem
      left: -.45em
      position: absolute
      top: 1.2rem
      width: .8rem

    .timeline-marker
      position: absolute
      width: .8em
      left: -.4em
      height: .8em
      top: 1.2em
      .image
        @each $dimension in $dimensions
          &.is-#{$dimension}x#{$dimension}
            height: $dimension * 1px
            width: $dimension * 1px
            left: ( ( $dimension / 2 ) - 4 ) * -1px
        background: $timeline-marker-background-color
        border: $timeline-marker-border
        border-radius: 100%
        display: block
        overflow: hidden
    .timeline-content
      padding: 1em 0 0 .5em
      padding: $timeline-content-padding
      .heading
        font-weight: $weight-semibold

    @each $name, $pair in $colors
      $color: nth($pair, 1)
      $color-invert: nth($pair, 2)
      &.is-#{$name}
        border-left-color: $color
        &::before
          border-color: $color !important
        .timeline-marker
          .image
            border-color: $color !important