You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.3 KiB
Stylus
65 lines
1.3 KiB
Stylus
$corner-size = 10px
|
|
|
|
.messagepad__message
|
|
overflow: hidden
|
|
display: flex
|
|
margin-bottom: rem(30px)
|
|
|
|
&:last-child
|
|
margin-bottom: 0
|
|
|
|
&.side--self
|
|
justify-content: flex-end
|
|
|
|
.messagepad__message__body
|
|
font-size: rem($font-size-secondary)
|
|
line-height: 1.5
|
|
padding: rem(15px)
|
|
margin-bottom: rem(8px)
|
|
position: relative
|
|
min-width: rem(100px)
|
|
white-space: pre-wrap
|
|
word-wrap()
|
|
|
|
time
|
|
opacity: 0.6
|
|
font-size: rem($font-size-small)
|
|
|
|
&:after
|
|
position: absolute
|
|
width: 0
|
|
height: 0
|
|
content: ''
|
|
top: 0
|
|
|
|
.side--other
|
|
.messagepad__message__body
|
|
margin-left: rem($corner-size + 10px)
|
|
background: $primary-color
|
|
color: #FFF
|
|
order: 1
|
|
|
|
&:after
|
|
left: rem(-($corner-size))
|
|
border-top: $corner-size solid $primary-color
|
|
border-right: 0 solid transparent
|
|
border-bottom: 0 solid transparent
|
|
border-left: $corner-size solid transparent
|
|
|
|
.side--self
|
|
.messagepad__message__body
|
|
margin-right: rem($corner-size + 10px)
|
|
background: #F0F0F0
|
|
color: #222
|
|
order: -1
|
|
|
|
time
|
|
text-align: right
|
|
|
|
&:after
|
|
right: rem(-($corner-size))
|
|
border-top: $corner-size solid #F0F0F0
|
|
border-right: $corner-size solid transparent
|
|
border-bottom: 0 solid transparent
|
|
border-left: 0 solid transparent
|