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

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

placeholder chat-status-icon

Example

scss
%chat-status-icon {
  font-family: 'chattigoicons';
  font-size: 16px;
  margin-left: 4px;
}

Example

scss
%chat-message-label-icon {
  color: use-color(secondary);
  font-family: 'chattigoicons';
  font-size: 16px;
  left: 4px;
  position: absolute;
  top: 4px;
}

Requires

@function use-color()