quasar-framework/src/components/chat/chat.ios.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-name
  padding-left $chat-message-text-padding-horiz

.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
    &:last-child
      &:before
        left -7px
        border-left 20px solid currentColor
        border-bottom-right-radius 16px 14px
      &:after
        left 23px
        border-bottom-right-radius 10px
  .q-message-text-content
    color $chat-message-received-color

.q-message-sent
  .q-message-name
    text-align right
    padding-right $chat-message-text-padding-horiz
  .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
    &:last-child
      &:before
        right -7px
        border-right 20px solid currentColor
        border-bottom-left-radius 16px 14px
      &:after
        right -37px
        border-bottom-left-radius 10px
  .q-message-text-content
    color $chat-message-sent-color

.q-message-text
  background currentColor
  padding $chat-message-text-padding-vert $chat-message-text-padding-horiz
  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, &:after
      content ''
      position absolute
      bottom -2px
      height 20px
      transform translate(0, -2px)
    &:after
      background white
      width 7px
      transform translate(-30px, -2px)