Chat Elements

Chat Bubbles

There are 2 different Bubble, one for all other users and one for message a user wrote himself.

Alice:

Hello there!

<div class="chat-bubble chat-bubble--other">
	<h4 class="chat-bubble__user-name">Alice:</h4>
	<p class="chat-bubble__text">Hello there!</p>
</div>
<div class="chat-bubble chat-bubble--self">
	<p class="chat-bubble__text">Hello there!</p>
</div>

Notes

The Chatbubble gets a different color according to the modifier (--other or --self). If you want to include the username in the comment add a h4 with the class chat-bubble__user-name.

SCSS

.chat-bubble {
	box-shadow: $box-shadow-1;
	display: inline-block;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 15px 20px;
	&--other {
		color: #fff;
		background: $primary;
		border-bottom-right-radius: 20px;
	}
	&--self {
		background: $primary-light;
		border-bottom-left-radius: 20px;
	}	

	&__user-name {
		font-family: $objectivity;
		margin: 0;
	}
	&__text {
		margin: 0;
		font-weight: 300;
	}
}