quasar-framework/src/components/timeline/timeline.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-timeline
  padding 0
  width 100%
  list-style none
  h6
    line-height inherit

.q-timeline-title
  margin-top 0
  margin-bottom 16px

.q-timeline-subtitle
  font-size 12px
  margin-bottom 8px
  opacity .4
  text-transform uppercase
  letter-spacing 1px
  font-weight 700

.q-timeline-dot
  position absolute
  top 0
  bottom 0
  left 0
  width 15px
  &:before, &:after
    content ''
    background currentColor
    display block
    position absolute
  &:before
    border 3px solid transparent
    border-radius 100%
    height 15px
    width 15px
    top 4px
    left 0
    transition background .3s ease-in-out, border .3s ease-in-out
  &:after
    width 3px
    opacity .4
    top 24px
    bottom 0
    left 6px

.q-timeline-entry-with-icon
  .q-timeline-dot
    width 31px
    left -8px
    &:before
      height 31px
      width 31px
    &:after
      top 41px
      left 14px
  .q-timeline-subtitle
    padding-top 8px

.q-timeline-dot .q-icon
  position absolute
  display inline-flex
  top 0
  left 0
  right 0
  font-size 16px
  height 38px
  color white
  transition color .3s ease-in-out

.q-timeline-dark
  color white
  .q-timeline-subtitle
    opacity .7

.q-timeline-entry
  padding-left 40px
  position relative
  line-height 22px
  &:last-child
    padding-bottom 0
    .q-timeline-dot:after
      content none
.q-timeline-hover .q-timeline-entry
  &:hover
    .q-timeline-dot:before
      background transparent
      border 3px solid currentColor
  &.q-timeline-entry-with-icon:hover .q-timeline-dot .q-icon
    color currentColor

.q-timeline-content
  padding-bottom 24px

.q-timeline-heading
  position relative
  &:first-child .q-timeline-heading-title
    padding-top 0
  &:last-child .q-timeline-heading-title
    padding-bottom 0
.q-timeline-heading-title
  padding 32px 0
  margin 0

@media (min-width $breakpoint-md-min) and (max-width $breakpoint-md-max)
  .q-timeline-responsive
    .q-timeline-heading
      display table-row
      font-size 200%
      > div
        display table-cell
    .q-timeline-heading-title
      margin-left -50px
    .q-timeline
      display table
    .q-timeline-entry
      display table-row
      padding 0
    .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
      display table-cell
      vertical-align top
    .q-timeline-subtitle
      text-align right
      width 35%
    .q-timeline-dot
      position relative
    .q-timeline-content
      padding-left 30px
    .q-timeline-entry-with-icon .q-timeline-content
      padding-top 8px
    .q-timeline-subtitle
      padding-right 30px

@media (min-width $breakpoint-lg-min)
  .q-timeline-responsive
    .q-timeline-heading-title
      text-align center
      margin-left 0
    .q-timeline-entry, .q-timeline-subtitle, .q-timeline-dot, .q-timeline-content
      display block
      margin 0
      padding 0
    .q-timeline-dot
      position absolute
      left 50%
      margin-left -7.15px
    .q-timeline-entry-with-icon .q-timeline-dot
      left 50%
      margin-left -15px
    .q-timeline-subtitle, .q-timeline-content
      width 50%
    .q-timeline-entry-left .q-timeline-content,
    .q-timeline-entry-right .q-timeline-subtitle
      float left
      padding-right 30px
      text-align right
    .q-timeline-entry-left .q-timeline-subtitle,
    .q-timeline-entry-right .q-timeline-content
      float right
      text-align left
      padding-left 30px
    .q-timeline-entry-with-icon .q-timeline-content
      padding-top 8px
    .q-timeline-entry
      padding-bottom 24px
      overflow hidden