tracim_v2/src/css/Timeline.styl

.timeline
  display flex
  flex-direction column
  margin 10px
  border-radius 10px
  width 45%
  height 100%
  &__header
    border-radius 10px 10px 0 0
    padding 15px
    text-align center
    font-size 20px
    color dark-grey
    background-color grey-hover
  &__messagelist
    flex 1 1 0
    margin-bottom 0
    padding-left 0
    border-bottom 1px solid grey
    background-color off-white
    overflow-Y auto
    list-style none
    &__item
      padding 0 25px 20px 35px
      &__avatar
        position relative
        top 43px
        left -25px
        width 45px
        height 45px
      &__createhour
        margin-left 30px
        opacity 0.7
        font-size 14px
      &__content
        border 1px solid grey
        border-radius 5px
        padding 15px
        background-color off-white
        font-size 15px
        z-index -1
    &__version
      display flex
      justify-content space-between
      margin-top 40px
      padding 10px 15px
      width 100%
      background-color lightGrey
      &__btn
        padding 5px 25px
        border-radius 5px
        width 145px
        color white
        font-size 17px
        & > i
          margin-right 10px
          color dark-grey
          font-size 22px
      &__date
        color fontColor
        font-size 17px
        margin auto 0
  &__texteditor
    padding 2px
    &__simpletext
      display none
      width 70%
      margin-right 35px
      &__icon
        cursor pointer
    &__wysiwyg
      display block
      & > textarea
        width 100%
        height 130px
    &__submit
      margin 10px 0
      &__btn
        display flex
        cursor pointer
        &:hover , &:focus
          box-shadow shadow-all-btn
        &__icon
          margin-left 10px

.sended
  .timeline__messagelist__item__content
    margin-right 25%

.received
  .timeline__messagelist__item
    &__avatar
      left 93%
    &__createhour
      text-align right
      margin-right 50px
    &__content
      margin-left 25%
      color white

/**** MEDIA 992px & 1199px ****/

@media (min-width: min-lg) and (max-width: max-lg)

  .timeline__messagelist__item
    margin-right 55px

  .received
    .timeline__messagelist__item
      &__avatar
        left 96%

/**** MEDIA 768px & 991px ****/

@media (min-width: min-md) and (max-width: max-md)

  .timeline__messagelist__item
    margin-right 55px

  .received
    .timeline__messagelist__item
      &__avatar
        left 96%

/**** MEDIA 576px & 767px ****/

@media (min-width: min-sm) and (max-width: max-sm)

  .timeline__messagelist__item
    margin-right 35px

  .received
    .timeline__messagelist__item
      &__avatar
        left 94%

/**** MEDIA 575px ****/

@media (max-width: max-xs)

  .received
    .timeline__messagelist__item
      &__avatar
        left 90%