quasar-framework
Version:
Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
92 lines (79 loc) • 2.08 kB
text/stylus
.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)