Treeview

treeview.scss

.treeview {

	& > ul > li:first-of-type {
		& > span {
			padding-left: 12px !important;
		}
		&::before {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			border-radius: 30px;
			@include linear-gradient(#666, #111);
			margin: 0px 0 0 -12px;
			border: 7px solid #eee;
		}
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0 0 0 5px;

		ul {
			margin-left: 0;
			padding-left: 15px;
		}

		li:last-of-type ul {
			margin-left: -1px;
			border-left: 1px solid #eee;
		}

		li {
			margin: 0;
			padding: 0;
			border-left: 1px dotted #aaa;

			&::before {
				content: ' ';
				position: absolute;
				width: 5px;
				height: 1px;
				border-top: 1px dotted #666;
				margin: 12px 0 0 -1px;
			}

			&:last-of-type::before {
				content: ' ';
				height: 13px;
				border-left: 1px dotted #eee;
			}

			span {
				display: block;
				padding: 5px 10px;
			}
		}
	}
}