BIM-Resource/assets/stylesheets/sass/base/_sidebar_left_sizing.scss

// LAYOUT SIZING - SM
// -----------------------------------------------------------------------------
@media only screen and (max-width: 767px) {
	/* Layout Mobile - Sidebar Left Collapsed & Sidebar Right Opened */
	html.sidebar-left-sm.sidebar-left-collapsed.sidebar-right-opened {
		.sidebar-left {
			margin-left: -$sidebar-left-sm-full-width;
		}
	}
}

@media only screen and (min-width: 768px) {
	/* Layout Base - Sidebar Left */
	html.sidebar-left-sm {
		.sidebar-left {
			width: $sidebar-left-sm-full-width;
			@include font-size(12);

			ul.nav-main li {
				i {
					@include font-size(16);
				}

				a {
					@include font-size(12);
				}
			}

			.sidebar-widget .widget-header h6 {
				@include font-size(12);
			}
		}
	}

	html.sidebar-left-sm.sidebar-left-collapsed {
		.sidebar-left {
			.sidebar-title {
				margin-left: -$sidebar-left-sm-full-width;
			}
		}

		// fixed
		&.fixed {
			.sidebar-left .nano:hover {
				width: $sidebar-left-sm-full-width;
			}
		}
	}

	/* Layout Base - Sidebar Left Opened ( Larger than mobile ) */
	html.sidebar-left-sm.sidebar-left-collapsed {
		.sidebar-left {
			width: $sidebar-left-collapsed-width;
		}
	}

	/* Layout Fixed - Content Body */
	html.fixed.sidebar-left-sm {
		.content-body {
			margin-left: $sidebar-left-sm-full-width;
		}
	}

	/* Layout Fixed - Page header */
	html.fixed.sidebar-left-sm {
		.page-header {
			left: $sidebar-left-sm-full-width;
		}
	}

	/* Layout Fixed - Sidebar Right Opened */
	html.fixed.sidebar-left-sm.sidebar-right-opened {
		.page-header {
			left: 0;
		}
		.sidebar-left {
			left: -$sidebar-left-sm-full-width;
		}
	}

	/* Layout Fixed - Sidebar Left Collapsed */
	html.fixed.sidebar-left-collapsed {
		.page-header {
			left: $sidebar-left-collapsed-width;
		}

		.content-body {
			margin-left: $sidebar-left-collapsed-width;
		}
	}

	/* Layout Fixed - Sidebar Left Collapsed & Sidebar Right Opened */
	html.fixed.sidebar-left-sm.sidebar-left-collapsed.sidebar-right-opened {
		.page-header {
			left: -$sidebar-left-sm-full-width;
		}
	}

	/* Content With Menu + Layout Fixed */
	html.fixed.sidebar-left-sm {
		.inner-menu {
			left: $sidebar-left-sm-full-width;
		}
	}

	/* Content With Menu + Layout Fixed + Sidebar Left Collapsed */
	html.fixed.sidebar-left-sm.sidebar-left-collapsed {
		.inner-menu,
		.inner-menu-toggle,
		.inner-toolbar {
			left: $sidebar-left-collapsed-width;
		}

		&.inner-menu-opened {
			.inner-menu-toggle,
			.inner-toolbar {
				left: $sidebar-left-collapsed-width + $inner-menu-width;
			}
		}
	}

	/* Content With Menu + Layout Fixed + Sidebar Right Opened */
	html.fixed.sidebar-left-sm.sidebar-right-opened {
		.inner-menu,
		.inner-menu-toggle,
		.inner-toolbar {
			left:  -($sidebar-right-width - $sidebar-left-sm-full-width);
		}

		&.inner-menu-opened {
			.inner-menu-toggle,
			.inner-toolbar {
				left:  -($sidebar-right-width - $sidebar-left-sm-full-width + $inner-menu-width);
			}
		}
	}

	/* Content With Menu - Toolbar + Layout Fixed */
	html.fixed.sidebar-left-sm {
		&.inner-menu-opened {
			left: $sidebar-left-sm-full-width + $inner-menu-width;
		}

		.inner-menu-toggle {
			left: $sidebar-left-sm-full-width;
		}
	}
}

/* Resolution gt 1366 - Show Inner Menu */
@media only screen and (min-width: 1366px) {
	html.fixed.sidebar-left-sm,
	html.fixed.sidebar-left-sm.inner-menu-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-sm-full-width + $inner-menu-width;
		}

		.inner-menu-toggle,
		.inner-menu {
			left: $sidebar-left-sm-full-width;
		}
	}

	html.fixed.sidebar-left-sm.sidebar-right-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-sm-full-width + $inner-menu-width - $sidebar-right-width;
		}

		.inner-menu,
		.inner-menu-toggle {
			left: $sidebar-left-sm-full-width - $sidebar-right-width;
		}
	}

	html.fixed.sidebar-left-sm.sidebar-left-collapsed,
	html.fixed.sidebar-left-sm.sidebar-left-collapsed.sidebar-right-opened.inner-menu-opened,
	html.fixed.sidebar-left-sm.sidebar-left-collapsed.inner-menu-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-collapsed-width + $inner-menu-width;
		}

		.inner-menu-toggle,
		.inner-menu {
			left: $sidebar-left-collapsed-width;
		}
	}

	html.fixed.sidebar-left-sm.sidebar-left-collapsed.sidebar-right-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-collapsed-width - $sidebar-right-width + $inner-menu-width;
		}

		.inner-menu,
		.inner-menu-toggle {
			left: $sidebar-left-collapsed-width - $sidebar-right-width;
		}
	}
}

// LAYOUT SIZING - XS
// -----------------------------------------------------------------------------
@media only screen and (max-width: 767px) {
	/* Layout Mobile - Sidebar Left Collapsed & Sidebar Right Opened */
	html.sidebar-left-xs.sidebar-left-collapsed.sidebar-right-opened {
		.sidebar-left {
			margin-left: -$sidebar-left-xs-full-width;
		}
	}
}

@media only screen and (min-width: 768px) {
	/* Layout Base - Sidebar Left */
	html.sidebar-left-xs {
		.sidebar-left {
			width: $sidebar-left-xs-full-width;
			@include font-size(11);

			ul.nav-main li {
				i {
					@include font-size(14);
				}

				a {
					@include font-size(11);
				}

				.nav-children li a {
					padding-left: 52px;
				}
			}

			.sidebar-widget .widget-header h6 {
				@include font-size(11);
			}

		}
	}

	html.sidebar-left-xs.sidebar-left-collapsed {
		.sidebar-left {
			.sidebar-title {
				margin-left: -$sidebar-left-xs-full-width;
			}
		}

		// fixed
		&.fixed {
			.sidebar-left .nano:hover {
				width: $sidebar-left-xs-full-width;
			}
		}
	}

	/* Layout Base - Sidebar Left Opened ( Larger than mobile ) */
	html.sidebar-left-xs.sidebar-left-collapsed {
		.sidebar-left {
			width: $sidebar-left-collapsed-width;
		}
	}

	/* Layout Fixed - Content Body */
	html.fixed.sidebar-left-xs {
		.content-body {
			margin-left: $sidebar-left-xs-full-width;
		}
	}

	/* Layout Fixed - Page header */
	html.fixed.sidebar-left-xs {
		.page-header {
			left: $sidebar-left-xs-full-width;
		}
	}

	/* Layout Fixed - Sidebar Right Opened */
	html.fixed.sidebar-left-xs.sidebar-right-opened {
		.page-header {
			left: 0;
		}
		.sidebar-left {
			left: -$sidebar-left-xs-full-width;
		}
	}

	/* Layout Fixed - Sidebar Left Collapsed */
	html.fixed.sidebar-left-collapsed {
		.page-header {
			left: $sidebar-left-collapsed-width;
		}

		.content-body {
			margin-left: $sidebar-left-collapsed-width;
		}
	}

	/* Layout Fixed - Sidebar Left Collapsed & Sidebar Right Opened */
	html.fixed.sidebar-left-xs.sidebar-left-collapsed.sidebar-right-opened {
		.page-header {
			left: -$sidebar-left-xs-full-width;
		}
	}

	/* Content With Menu + Layout Fixed */
	html.fixed.sidebar-left-xs {
		.inner-menu {
			left: $sidebar-left-xs-full-width;
		}
	}

	/* Content With Menu + Layout Fixed + Sidebar Left Collapsed */
	html.fixed.sidebar-left-xs.sidebar-left-collapsed {
		.inner-menu,
		.inner-menu-toggle,
		.inner-toolbar {
			left: $sidebar-left-collapsed-width;
		}

		&.inner-menu-opened {
			.inner-menu-toggle,
			.inner-toolbar {
				left: $sidebar-left-collapsed-width + $inner-menu-width;
			}
		}
	}

	/* Content With Menu + Layout Fixed + Sidebar Right Opened */
	html.fixed.sidebar-left-xs.sidebar-right-opened {
		.inner-menu,
		.inner-menu-toggle,
		.inner-toolbar {
			left:  -($sidebar-right-width - $sidebar-left-xs-full-width);
		}

		&.inner-menu-opened {
			.inner-menu-toggle,
			.inner-toolbar {
				left:  -($sidebar-right-width - $sidebar-left-xs-full-width + $inner-menu-width);
			}
		}
	}

	/* Content With Menu - Toolbar + Layout Fixed */
	html.fixed.sidebar-left-xs {
		&.inner-menu-opened {
			left: $sidebar-left-xs-full-width + $inner-menu-width;
		}

		.inner-menu-toggle {
			left: $sidebar-left-xs-full-width;
		}
	}
}

/* Resolution gt 1366 - Show Inner Menu */
@media only screen and (min-width: 1366px) {
	html.fixed.sidebar-left-xs,
	html.fixed.sidebar-left-xs.inner-menu-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-xs-full-width + $inner-menu-width;
		}

		.inner-menu-toggle,
		.inner-menu {
			left: $sidebar-left-xs-full-width;
		}
	}

	html.fixed.sidebar-left-xs.sidebar-right-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-xs-full-width + $inner-menu-width - $sidebar-right-width;
		}

		.inner-menu,
		.inner-menu-toggle {
			left: $sidebar-left-xs-full-width - $sidebar-right-width;
		}
	}

	html.fixed.sidebar-left-xs.sidebar-left-collapsed,
	html.fixed.sidebar-left-xs.sidebar-left-collapsed.sidebar-right-opened.inner-menu-opened,
	html.fixed.sidebar-left-xs.sidebar-left-collapsed.inner-menu-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-collapsed-width + $inner-menu-width;
		}

		.inner-menu-toggle,
		.inner-menu {
			left: $sidebar-left-collapsed-width;
		}
	}

	html.fixed.sidebar-left-xs.sidebar-left-collapsed.sidebar-right-opened {
		.content-with-menu .inner-toolbar {
			left: $sidebar-left-collapsed-width - $sidebar-right-width + $inner-menu-width;
		}

		.inner-menu,
		.inner-menu-toggle {
			left: $sidebar-left-collapsed-width - $sidebar-right-width;
		}
	}
}