documize/gui/app/styles/core/layout/layout.scss

// *****************************************************************
// Define mobile-first layout for top navigation bar and toolbar.
// *****************************************************************
.master-navigation {
	display: block;
	height: auto;
	width: 100%;

	> .navbar {
		display: block;
		height: 40px;
		width: 100%;
		background-color: $theme-500;
		text-align: center;
		padding: 0;
		z-index: 999;

		> .container {
			display: flex;
			flex-grow: 1;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 20px;

			> .options {
				> .selected {
					> .dicon {
						color: $color-white !important;
					}
				}

				> .option {
					cursor: pointer;
					display: inline-block;

					> .dicon {
						display: inline-block;
						color: $theme-300;
						font-size: 20px;
						padding: 10px 10px;
					}

					&:hover {
						> .dicon {
							color: $theme-400 !important;
						}
					}
				}

				> a.option {
					color: $theme-300;

					&:hover {
						color: $color-white;
					}
				}

				> .invalid-plan {
					> .dicon {
						color: map-get($yellow-shades, 600) !important;
					}
				}

				> .user-gravatar-container {
					display: inline-block;
					margin: 0;
					padding: 7px 10px;
					vertical-align: top;

					> .user-gravatar {
						display: inline-block;
						cursor: pointer;
						position: relative;
						width: 26px;
						height: 26px;
						line-height: 26px;
						padding: 0;
						border-radius: 50%;
						font-size: 0.85rem;
						text-align: center;
						color: $theme-500;
						font-weight: bold;
						background-color: $color-white;
						@extend .no-select;
					}
				}
			}
		}
	}

	> .toolbar {
		display: block;
		height: auto;
		height: 50px;
		width: 100%;
		background-color: $color-sidebar;
		background-color: $theme-100;
		text-align: center;
		padding: 0;
		z-index: 999;

		> .container {
			display: flex;
			flex-grow: 1;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 10px;

			> div[class^="zone-"], div[class*=" zone-"] {
				margin: 0;
				padding: 10px 10px;
				justify-content: center;

				> .label {
					font-size: 1rem;
				}
			}
		}
	}
}

// *****************************************************************
// Define mobile-first layout for main content zone with a sidebar.
// *****************************************************************
.master-grid-container {
	display: block;
	height: auto;
	width: 100%;

	.master-sidebar {
		display: block;
		height: auto;
		width: 100%;
		padding: 10px;
	}

	.master-content {
		display: block;
		height: auto;
		width: 100%;
		padding: 10px;
	}
}

// $sidebar-height: calc(100vh - 90px);
$sidebar-height: auto;

// Tablet starts around 700px
@media (min-width: $display-break-1) {
	.master-grid-container {
		display: grid;
		grid-template-columns: 200px auto;

		.master-sidebar {
			width: 200px;
			height: $sidebar-height;
			// overflow-x: hidden;
			// overflow-y: auto;
			padding: 20px 15px;
		}

		.master-content {
			grid-column-start: 2;
			padding: 20px;
			max-width: calc(100vw - 210px);
		}
	}
}

// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
	.master-grid-container {
		display: grid;
		grid-template-columns: 240px auto;

		.master-sidebar {
			width: 240px;
		}

		.master-content {
			grid-column-start: 2;
			padding: 20px;
			max-width: calc(100vw - 250px);
		}
	}
}

// Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) {
	.master-grid-container {
		display: grid;
		grid-template-columns: 300px auto;

		.master-sidebar {
			width: 300px;
			padding: 40px 20px;
		}

		.master-content {
			grid-column-start: 2;
			padding: 40px 30px;
			max-width: calc(100vw - 310px);
		}
	}
}

// Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) {
	.master-grid-container {
		display: grid;
		grid-template-columns: 350px minmax(auto, 1200px);

		.master-sidebar {
			width: 350px;
			padding: 40px 20px;
		}

		.master-content {
			grid-column-start: 2;
			padding: 40px 40px;
			max-width: 1200px;
		}
	}
}

// *****************************************************************
// Define mobile-first layout for content without a sidebar.
// *****************************************************************
.master-container {
	display: block;
	height: auto;
	width: 100%;
	padding: 20px;
}

// Tablet starts around 700px
@media (min-width: $display-break-1) {
	.master-container {
		padding: 20px;
	}
}

// Small screen starts around 900px
@media (min-width: $display-break-2) and (min-height: 650px) {
	.master-container {
		padding: 20px;
	}
}

// Medium screen starts around 1200px
@media (min-width: $display-break-3) and (min-height: 650px) {
	.master-container {
		padding: 30px;
	}
}

// Large screen starts around 1600px
@media (min-width: $display-break-4) and (min-height: 650px) {
	.master-container {
		padding: 40px;
		max-width: 1200px;
	}
}