tracim_v2/src/component/Timeline/Timeline.styl

@import '../../css/Variable.styl'

.timeline
  display flex
  flex-direction column
  margin 10px 10px 10px 5px
  border-radius 10px
  height 100%
  &__header
    flex 0 1 auto
    border-radius 10px 10px 0 0
    padding 15px
    text-align center
    font-size 20px
    color darkGrey
    background-color grey-hover
  &__messagelist
    flex 1 1 auto
    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 0 35px
      &__avatar
        position relative
        top 40px
        left -20px
        border-radius 50%
        width 45px
        height 45px
        & > img
          width 45px
          height 45px
          border-radius 25px
      &__createhour
        margin-left 35px
        opacity 0.7
        font-size 14px
      &__content
        display inline-block
        border 1px solid grey
        border-radius 5px
        padding 15px
        background-color off-white
        font-size 15px
    &__version
      display flex
      justify-content space-between
      margin 40px 0 20px 0
      padding 10px 15px
      width 100%
      background-color lightGrey
      &__btn
        display flex
        justify-content center
        padding 5px 20px
        border-radius 5px
        width 145px
        color white
        font-size 17px
        cursor pointer
        & > i
          margin-right 10px
          color off-white
          font-size 22px
      &__date
        color fontColor
        font-size 17px
        margin auto 0
  &__texteditor
    flex 1 0 auto
    margin 20px
    &__textinput
      width 100%
      & > textarea
        border-radius 5px
        border 1.5px solid grey
        padding 5px
        height 80px
        width 100%
    &__wrapper
      display flex
      align-items center
      justify-content flex-end
      margin-top 10px
    &__advancedtext
      margin-right 15px
    &__submit
      &__btn
        display inline-block
        cursor pointer
        &__icon
          display inline-block
          margin-left 20px

.received
  text-align right
  .timeline__messagelist__item
    &__wrapper
      display flex
      flex-direction row-reverse
    &__avatar
      left 20px
    &__createhour
      margin-left 0
      margin-right 35px
    &__content
      color white


.mce-btn-group:not(:first-child)
  border-left none!important //remove the left borders of the wysiwyg for a better aesthetic result


/**** MEDIA 576px & 1199px ****/

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

  .timeline
    &__messagelist
      min-height 350px
      max-height 700px
      &__item
        margin-right 55px

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

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

  .timeline
    &__messagelist__item
      margin-right 35px
    &__texteditor
      display flex
      align-items center
      &__wysiwyg
        width 70%
        & > textarea
          border-radius 5px
          height 40px
      &__submit
        width 30%
        margin-left 10px

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

@media (max-width: max-xs)

  .timeline
    &__texteditor
      display flex
      align-items center
      &__wysiwyg
        width 70%
        & > textarea
          border-radius 5px
          height 40px
      &__submit
        width 30%
        margin-left 10px