@microsoft/atlas-css - npm Package Compare versions

Comparing version 4.2.0 to 4.3.0

package.json

 {
 	"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.",
@@ -5,0 +5,0 @@ "scripts": {

src/components/layout.scss

@@ -8,2 +8,5 @@ @use 'sass:math';
 $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
 
@@ -188,2 +191,82 @@ :root {
 
+// 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 {
@@ -190,0 +273,0 @@ .layout-body-aside {

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

968284

0.74%

Lines of code

2143

0.33%

No dependency changes