quasar-framework/src/css-components/timeline/timeline.ios.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$timeline-badge-size         ?= 3rem
$timeline-badge-space        ?= $timeline-badge-size
$timeline-item-margin-bottom ?= 1rem
$timeline-border-width       ?= .2rem
$timeline-color              ?= $grey-6
$timeline-light-color        ?= lighten($timeline-color, 50%)

.timeline
  position relative
  width 100%
  margin 0 auto

  &:before
    content ''
    position absolute
    top 0
    height 100%
    width $timeline-border-width
    margin-left -2px
    background $timeline-light-color

  for $name, $color in $colors
    &.{$name}
      &:before
        background composite-color($color)
      .timeline-badge
        background $color
        box-shadow 0 0 0 $timeline-border-width composite-color($color)
      .timeline-date, .timeline-label
        color $color

.timeline-badge
  width $timeline-badge-size
  height $timeline-badge-size
  position absolute
  top 0
  border-radius 50%
  color white
  background $timeline-color
  display flex
  align-items center
  justify-content center
  overflow hidden
  box-shadow 0 0 0 $timeline-border-width $timeline-light-color, $shadow-2

  i
    font-size 1.5rem
  img
    max-width 100%

.timeline-title, .timeline-date
  min-height $timeline-badge-size
  display flex
  flex-direction column
  justify-content center
  margin-bottom 1rem
.timeline-title
  font-weight 700
.timeline-date
  color $timeline-color
.timeline-title + .timeline-date // @stylint ignore
  min-height 0
.timeline-content
  margin-top 1rem

.timeline-label
  position relative
  width 100%
  color $timeline-color

.timeline-item
  position relative
  margin-bottom $timeline-item-margin-bottom

  &:last-child
    margin-bottom 0
  &.incomplete
    .timeline-badge
      background darken($timeline-light-color, 10%) !important
      box-shadow 0 0 0 $timeline-border-width $timeline-light-color !important
    .timeline-date, .timeline-title
      color $timeline-light-color

@media only screen and (max-width $layout-small-max)
  .timeline
    &:before
      left ($timeline-badge-size / 2)
  .timeline-item
    margin-left (1.3 * $timeline-badge-space)
  .timeline-date
    position relative
  .timeline-badge
    left (-1.3 * $timeline-badge-space)
  .timeline-label
    margin-bottom $timeline-item-margin-bottom

@media only screen and (min-width $layout-medium-min)
  .timeline:before
    left 50%

  .timeline-item
    width 'calc(50% - %s)' % $timeline-badge-space

    &:nth-child(odd):not(.on-right), &.on-left
      .timeline-badge
        right (- $timeline-badge-size / 2 - $timeline-badge-space)
      .timeline-title
        text-align right
      .timeline-date
        text-align right
        left 'calc(100% + %s)' % (2 * $timeline-badge-space)

    &:nth-child(even):not(.on-left), &.on-right
      margin-left auto
      .timeline-badge
        left (- $timeline-badge-size / 2 - $timeline-badge-space)
      .timeline-date
        right 'calc(100% + %s)' % (2 * $timeline-badge-space)

  .timeline-label
    margin-bottom $timeline-item-margin-bottom
    text-align center