Lists

Lists are used to give different options to choose, for example removing an user from to the chatroom (userlist). There are 2 versions one with a bottom border and the other one without.

Test Item
Test Item

Test Item
Test Item

<ul class="ul">
	<li class="ul__li">
		Test Item
	</li>
	<li class="ul__li">
		Test Item
	</li>
</ul>
<ul class="ul">
	<li class="ul__li ul__li--without-border">
		Test Item
	</li>
	<li class="ul__li ul__li--without-border">
		Test Item
	</li>
</ul>

Notes

To use the list without the border just add --without-border to the item, this also resets the left padding.

SCSS

.ul {
	@include list-unstyled();
	&__li {
		padding: em(10) em(5);
		border-bottom: 1px solid $light-grey;
		&:last-child {
			border-bottom: none;
		}
		&--without-border {
			border: none;
			padding: em(10) 0;
		}
	}
}