UNPKG

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
.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)