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

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

.q-message-name, .q-message-stamp, .q-message-label
  font-size small

.q-message-label
  margin (3 * $chat-message-distance) 0

.q-message-stamp
  color inherit
  margin-top 4px
  opacity .6
  display none

.q-message-avatar
  border-radius 50%
  width $chat-message-avatar-size
  height $chat-message-avatar-size

.q-message
  margin-bottom $chat-message-distance
  &:first-child .q-message-label
    margin-top 0

.q-message-received
  .q-message-avatar
    margin-right 8px
  .q-message-text
    color $chat-message-received-bg
    border-radius $chat-message-border-radius $chat-message-border-radius $chat-message-border-radius 0
    &:last-child:before
      right 100%
      border-right 0 solid transparent
      border-left 8px solid transparent
      border-bottom 8px solid currentColor
  .q-message-text-content
    color $chat-message-received-color

.q-message-sent
  .q-message-name
    text-align right
  .q-message-avatar
    margin-left 8px
  .q-message-container
    flex-direction row-reverse
  .q-message-text
    color $chat-message-sent-bg
    border-radius $chat-message-border-radius $chat-message-border-radius 0 $chat-message-border-radius
    &:last-child:before
      left 100%
      border-left 0 solid transparent
      border-right 8px solid transparent
      border-bottom 8px solid currentColor
  .q-message-text-content
    color $chat-message-sent-color

.q-message-text
  background currentColor
  padding $chat-message-text-padding
  line-height max(1.2, $min-line-height)
  word-break break-word
  position relative
  transform translate3d(0, 0, 0)

  & + &
    margin-top 3px

  &:last-child
    min-height $chat-message-avatar-size

    .q-message-stamp
      display block
    &:before
      content ''
      position absolute
      bottom 0
      width 0
      height 0