@microsoft/atlas-css 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",

package/src/components/layout.scss

@@ -5,6 +5,9 @@ $half-widescreen: math.div($breakpoint-widescreen, 2);
 $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 $default-flyout-width-desktop: 320px;
 $default-flyout-width-widescreen: 480px;
+$default-aside-min-width: 300px;
+$eighth-widescreen: math.div($breakpoint-widescreen, 8); // 225px
+$five-eighths-widescreen: math.div($breakpoint-widescreen, 8) * 5; // 1125px
 
 :root {
 	--window-inner-height: 100vh; // to be overwritten by JS
@@ -184,6 +187,86 @@ $default-flyout-width-widescreen: 480px;
 	}
 }
 
+// layout-menu-collapsed is a modifier that works with layouts that have a menu
+// It hides the menu and adjusts the main/aside areas accordingly
+
+.layout.layout-menu-collapsed {
+	// Styles for main and aside when menu is collapsed (only for holy-grail)
+
+	&.layout-holy-grail {
+		.layout-body-main {
+			width: 100%;
+			max-width: $half-widescreen !important;
+		}
+
+		.layout-body-aside {
+			flex-shrink: 0 !important;
+			width: 100% !important;
+			min-width: $default-aside-min-width !important;
+		}
+	}
+
+	// holy-grail layout with collapsed menu needs different grid proportions
+
+	&.layout-holy-grail .layout-body {
+		@include tablet {
+			grid-template:
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto auto / minmax(0, 1fr)
+				minmax(0, 7fr) minmax(0, 1fr);
+			grid-template-areas:
+				'header header header'
+				'hero hero hero'
+				'. main .'
+				'. aside .'
+				'footer footer footer';
+		}
+
+		@include desktop {
+			grid-template:
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 7fr)
+				minmax(0, 23fr) minmax(0, 10fr);
+			grid-template-areas:
+				'header header header'
+				'hero hero hero'
+				'menu main aside'
+				'footer footer footer';
+		}
+
+		@include widescreen {
+			grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$eighth-widescreen} #{$five-eighths-widescreen} #{$quarter-widescreen} auto;
+			grid-template-areas:
+				'header header header header header'
+				'hero hero hero hero hero'
+				'. menu main aside .'
+				'footer footer footer footer footer';
+		}
+	}
+
+	// sidecar-left layout with collapsed menu - centers main content
+
+	&.layout-sidecar-left .layout-body {
+		@include tablet {
+			grid-template:
+				minmax(auto, max-content) auto var(--atlas-contained-height) auto / minmax(0, 1fr)
+				minmax(0, 7fr) minmax(0, 1fr);
+			grid-template-areas:
+				'header header header'
+				'hero hero hero'
+				'. main .'
+				'footer footer footer';
+		}
+
+		@include widescreen {
+			grid-template: minmax(auto, max-content) auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} auto;
+			grid-template-areas:
+				'header header header'
+				'hero hero hero'
+				'. main .'
+				'footer footer footer';
+		}
+	}
+}
+
 .layout.layout-sidecar-left {
 	.layout-body-aside {
 		display: none;