📝 write doc messenger component

This commit is contained in:
yanyongyu
2022-01-08 13:00:08 +08:00
parent d13ca9aee6
commit cd94672999
3 changed files with 125 additions and 7 deletions

View File

@ -0,0 +1,30 @@
.message {
@apply flex flex-row flex-wrap justify-start;
}
.messageRight {
@apply justify-end;
}
.message .messageAvatar {
@apply relative inline-flex items-center justify-center text-center align-middle h-9 w-9 rounded-full;
}
.message .messageBox {
@apply relative w-fit max-w-[55%] px-2 py-[0.375rem] mx-3 my-2 rounded-lg bg-light;
}
:global(.dark) .message .messageBox {
@apply bg-dark;
}
.message .messageBox::after {
content: "";
border-bottom: 7px solid;
@apply absolute top-0 right-full w-2 h-3 text-light rounded-bl-lg;
}
:global(.dark) .message .messageBox::after {
@apply text-dark;
}
.message.messageRight .messageBox::after {
@apply !left-full !right-auto !rounded-bl-[0] !rounded-br-lg;
}