Recursive List - Full Width

index.html

<ul>
	<li class="level-0">
		<div>Level 1</div>
		<ul>
			<li class="level-1">
				<div>Level 2</div>
				<ul>
					<li class="level-2">
						<div>Level 3</div>
						<ul>
							<li class="level-3">
								<div>Level 4</div>
								<ul>
									<li class="level-4">
										<div>Level 5</div>
										<ul>
											<li class="level-5">
												<div>Level 6</div>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="level-2">
						<div>Level 2 B</div>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="level-0">
		<div>Level 1 B</div>
	</li>
</ul>

Recursive List - Full Width.markdown

Recursive List - Full Width

Using Sass, style a list with each line full width, but content is inset appropriately, and recursively.

A Pen by Jennifer on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
	margin: 0;
	background-color: #ababab;
	font-family: 'Raleway', sans-serif;
	color: #fff;
}

$i:0;
@for $i from 0 through 6 {
	.level-#{$i} {
		& div {
			margin-left: 40px * $i !important;
		}
	}
}

ul {
	margin: 0;
	padding: 0;
	li {
		list-style-type: none;
		padding: 0;
		margin: 0;
		border: 1px solid #fff;
		border-width: 1px 0px 0px;
		background-color: transparentize(#000, .75);
	}
	& > ul > li {
		background-color: transparent;
	}
	& div {
		padding: 20px;
		&:last-child {
			border-bottom-width: 5px;
		}
	}
}