samagra-chatui
Version:
The React library for Chatbot UI
87 lines (77 loc) • 1.35 kB
text/less
@avatar-gap: 4px;
.Message {
position: relative;
& + & {
margin-top: @message-spacer-y;
}
&.left {
.Message-main {
& > .Avatar {
margin-right: @avatar-gap;
}
}
.Bubble {
margin-right: @bubble-left-gutter;
}
}
&.right {
.Message-main,
.Message-content {
flex-direction: row-reverse;
}
.Message-main {
& > .Avatar {
margin-left: @avatar-gap;
}
}
.Message-author {
text-align: right;
}
.Bubble {
margin-left: @bubble-right-gutter;
border-radius: @bubble-right-border-radius;
background: @bubble-right-bg;
}
}
&.pop {
display: none;
}
}
.Message-meta {
display: flex;
justify-content: center;
margin-bottom: 12px;
text-align: center;
}
.Message-main,
.Message-content {
display: flex;
align-items: flex-start;
}
.Message-inner {
flex: 1;
min-width: 0;
}
.Message-author {
margin-bottom: 6px;
color: var(--gray-2);
font-size: var(--font-size-xs);
line-height: 1.1;
}
// SystemMessage
.SystemMessage {
padding: 0 15px;
font-size: @font-size-xs;
color: var(--gray-2);
text-align: center;
a {
margin-left: 5px;
}
}
.SystemMessage-inner {
display: inline-block;
padding: 6px 9px;
border-radius: 6px;
background: var(--gray-8);
text-align: left;
}