iMessage UI

by PhilQ

HTML

<ul class="chat">
	<li class="message in">Hi</li>
	<li class="message in last">Hello world..<br/>How're YOU doing?</li>
	<li class="message out">Hello</li>
	<li class="message out last">World</li>
	<li class="message in last unread">Hello</li>
</ul>

SCSS

*, ::before, ::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	padding: 100px;
	font-family: Roboto;
}

.chat {
	$radius: 1.25em;
	$radius-inner: 0.65em;
	$background: #fff;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	list-style: none;
	margin: 0 auto;
	width: 100%;
	max-width: 700px;
	padding: 0 2em 2em 2em;
	background: $background;

	.message {
		font-size: 2em;
		z-index: 1;
		position: relative;
		width: auto;
		height: auto;
		line-height: 1.25;
		min-height: 2em;
		background: #eee;
		color: rgba(0, 0, 0, 0.65);
		border-radius: $radius;
		padding: 0.5em 0.75em;
		margin-top: 0.5em;

		&.last {
			&::before {
				z-index: -1;
				content: '';
				display: inline-block;
				position: absolute;
				top: 100%;
				width: $radius;
				height: $radius;
				background: inherit;
			}

			&::after {
				z-index: -1;
				content: '';
				display: inline-block;
				position: absolute;
				top: calc(100% + 2px);
				width: $radius-inner;
				height: calc(#{$radius} + 2px);
				background: $background;
				transform: translate(0px, -100%);
			}
		}

		&.in {
			align-self: flex-start;

			&.last {
				&::before {
					left: -$radius-inner;
					border-radius: 0 0 $radius 0;
					transform: translate(0.4em, -100%);
				}

				&::after {
					left: -$radius-inner;
					border-radius: 0 0 $radius-inner 0;
				}
			}
		}

		&.out {
			align-self: flex-end;
			background: #2962ff;
			color: rgba(255, 255, 255, 0.9);

			&.last {
				&::before {
					right: -$radius-inner;
					border-radius: 0 0 0 $radius;
					transform: translate(-0.4em, -100%);
				}

				&::after {
					right: -$radius-inner;
					border-radius: 0 0 0 $radius-inner;
				}
			}
		}
		
		&.in + .in {
			margin-top: 0.125em;
		}
		&.out + .out {
			margin-top: 0.125em;
		}
		
		&.unread_ {
			background: #00c853;
			color: rgba(0, 0, 0, 0.65);
		}
	}
}