placeholder message-base
Example
scss
%message-base {
align-self: flex-start;
background-color: use-color(messages, received);
background-image: $message-box-received-gradient;
border-radius: 4px;
box-shadow: $box-shadow-messages;
font-size: 16px;
margin: 0 16px 8px;
max-width: 70%;
padding: 5px 44px 5px 8px;
position: relative;
width: fit-content;
word-break: break-word;
}
Requires
@mixin use-font()
@function use-color()
$message-box-received-gradient [private]
$box-shadow-messages [private]
placeholder message-sended-base
Example
scss
%message-sended-base {
align-self: flex-end;
background-color: use-color(messages, sended);
background-image: $message-box-sended-gradient;
box-shadow: $box-shadow-messages;
max-width: 70%;
}
Requires
@function use-color()
$message-box-sended-gradient [private]
$box-shadow-messages [private]
placeholder chat-status-icon
Example
scss
%chat-status-icon {
font-family: 'icomoon' !important;
font-size: 16px;
margin-left: 4px;
}
placeholder chat-message-label-icon
Example
scss
%chat-message-label-icon {
color: use-color(secondary);
font-family: 'icomoon' !important;
font-size: 16px;
left: 4px;
position: absolute;
top: 4px;
}