@microsoft/atlas-css 3.50.1 → 3.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.50.1",
+	"version": "3.52.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/atomics/width.scss

@@ -1,6 +1,6 @@
 @use 'sass:list';
 
-$universal-widths: auto, 100, 150, 200, 250, 300, 350 !default;
+$universal-widths: auto, fit-content, 100, 150, 200, 250, 300, 350 !default;
 $mobile-incompatible-widths: 400, 450, 500, unset !default;
 $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
 
@@ -11,7 +11,7 @@ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
 }
 
 @each $width in $universal-widths {
-	$unit: if($width != auto, 'px', '');
+	$unit: if($width != auto and $width != fit-content, 'px', '');
 	.width-#{$width} {
 		width: #{$width}#{$unit} !important;
 	}
@@ -23,7 +23,7 @@ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
 	}
 
 	@each $width in $all-widths {
-		$unit: if($width != auto and $width != unset, 'px', '');
+		$unit: if($width != auto and $width != unset and $width != fit-content, 'px', '');
 		.width-#{$width}-tablet {
 			width: #{$width}#{$unit} !important;
 		}
@@ -36,7 +36,7 @@ $all-widths: list.join($universal-widths, $mobile-incompatible-widths);
 	}
 
 	@each $width in $all-widths {
-		$unit: if($width != auto and $width != unset, 'px', '');
+		$unit: if($width != auto and $width != unset and $width != fit-content, 'px', '');
 		.width-#{$width}-desktop {
 			width: #{$width}#{$unit} !important;
 		}

package/src/components/layout.scss

@@ -4,6 +4,13 @@ $quarter-widescreen: math.div($breakpoint-widescreen, 4);
 $half-widescreen: math.div($breakpoint-widescreen, 2);
 $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 
+:root {
+	--window-inner-height: 100vh; // to be overwritten by JS
+	--atlas-header-height: 0px; // to be overwritten by JS
+	--atlas-footer-height: 0px; // to be overwritten by JS
+	--atlas-contained-height: 1fr; // default value, does not contain the height
+}
+
 .layout {
 	display: flex;
 	flex-direction: column;
@@ -82,7 +89,10 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'aside' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto auto / minmax(0, 1fr) minmax(0, 2fr);
+			grid-template: auto auto var(--atlas-contained-height) auto auto / minmax(0, 1fr) minmax(
+					0,
+					2fr
+				);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -92,7 +102,10 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr) minmax(
+					0,
+					1fr
+				);
 			grid-template-areas:
 				'header header header'
 				'hero hero hero'
@@ -101,7 +114,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include widescreen {
-			grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
+			grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$half-widescreen} #{$quarter-widescreen} auto;
 			grid-template-areas:
 				'header header header header header'
 				'hero hero hero hero hero'
@@ -121,7 +134,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		grid-template-areas: 'header' 'hero' 'menu' 'main' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 2fr);
+			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 2fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -130,7 +143,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 3fr);
+			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 3fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -139,7 +152,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include widescreen {
-			grid-template: auto auto 1fr auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
+			grid-template: auto auto var(--atlas-contained-height) auto / auto #{$quarter-widescreen} #{$three-quarters-widescreen} auto;
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero hero'
@@ -159,7 +172,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		grid-template-areas: 'header' 'hero' 'main' 'aside' 'footer';
 
 		@include tablet {
-			grid-template: auto auto 1fr auto / minmax(0, 2fr) minmax(0, 1fr);
+			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 2fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -168,7 +181,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include desktop {
-			grid-template: auto auto 1fr auto / minmax(0, 3fr) minmax(0, 1fr);
+			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 3fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -177,7 +190,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 
 		@include widescreen {
-			grid-template: auto auto 1fr auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
+			grid-template: auto auto var(--atlas-contained-height) auto / auto #{$three-quarters-widescreen} #{$quarter-widescreen} auto;
 			grid-template-areas:
 				'header header header header'
 				'hero hero hero hero'
@@ -198,7 +211,7 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 
 		// note that to make some extra room this layout is not constrained by the widescreen breakpoint like others
 		@include tablet {
-			grid-template: auto auto 1fr auto / minmax(0, 1fr) minmax(0, 1fr);
+			grid-template: auto auto var(--atlas-contained-height) auto / minmax(0, 1fr) minmax(0, 1fr);
 			grid-template-areas:
 				'header header'
 				'hero hero'
@@ -207,3 +220,55 @@ $three-quarters-widescreen: math.div($breakpoint-widescreen, 4) * 3;
 		}
 	}
 }
+
+@mixin constrained-layout-child {
+	position: sticky;
+	inset-block-start: 0;
+	overflow-x: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+
+@include tablet {
+	.layout.layout-constrained {
+		&.layout-twin,
+		&.layout-sidecar-left,
+		&.layout-sidecar-right {
+			// 👇 minus two pixel at the end to account for percentage points and rounding, one px generally suffices though
+			--atlas-contained-height: calc(
+				var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 2px
+			);
+		}
+
+		&.layout-twin,
+		&.layout-sidecar-right {
+			.layout-body-main,
+			.layout-body-aside {
+				@include constrained-layout-child;
+			}
+		}
+
+		&.layout-sidecar-left {
+			.layout-body-menu,
+			.layout-body-main {
+				@include constrained-layout-child;
+			}
+		}
+	}
+}
+
+// Because the holy grail has two rows (containing menu main, menu aside) on tablet, we cannot apply height constraints at that size
+@include desktop {
+	.layout.layout-constrained.layout-holy-grail {
+		// 👇 minus two pixel at the end to account for percentage points and rounding, one px generally suffices though
+		--atlas-contained-height: calc(
+			var(--window-inner-height) - var(--atlas-header-height) - var(--atlas-footer-height) - 2px
+		);
+
+		.layout-body-main,
+		.layout-body-menu,
+		.layout-body-aside {
+			@include constrained-layout-child;
+		}
+	}
+}