thinkful-ui/src/Sidebar/layout.less

Shared navigation and UI resources for Thinkful.

@import "~tfstyleguide/vars";

.sidebar-layout-container {
	display: flex;
	min-height: 100vh;
	align-items: stretch;
	margin-top: -30px; // To account for nav margin
	background-image: linear-gradient(
		to right,
		@gray5 0%,
		@gray5 50%,
		transparent 50%,
		transparent 100%);
	background-size: cover;
}

.sidebar-layout-sidebar {
	width: (3 * @column-px) + (2 * @gutter-px);
	margin-left: auto;
	padding-left: @gutter-px;
	flex-shrink: 0;
	padding-top: 60px;
}

.sidebar-layout-main {
	width: (10 * @column-px) + (9 * @gutter-px);
	padding-right: @gutter-px;
	margin-right: auto;
	border-left: 1px solid @gray15;
	padding-left: @column-px;
	background-color: @white;
	padding-top: 60px;
}