@microsoft/atlas-css 3.33.0 → 3.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.33.0",
+	"version": "3.34.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/banner.scss

@@ -7,20 +7,24 @@ $banner-color: $info-dark !default;
 $banner-border-color: $border-white-high-contrast !default;
 $banner-border-width: $border-width !default;
 
+$banner-dismiss-margin: $spacer-2 !default;
+
 .banner {
 	@extend %layout-gap;
 
-	display: block;
+	display: grid;
 	position: relative;
+	grid-template: auto / 1fr auto;
+	grid-template-areas: 'banner-content dismiss';
 	outline-color: $text;
 	background-color: $banner-background;
 	color: $banner-color;
 	font-size: $banner-font-size;
+	line-height: $line-height-normal;
 	padding-block: $banner-padding;
 	word-wrap: break-word;
 	word-break: break-word;
 	border-block: $banner-border-width solid $banner-border-color;
-	line-height: $line-height-normal;
 
 	&.is-loading {
 		color: transparent;
@@ -33,16 +37,33 @@ $banner-border-width: $border-width !default;
 			@include loader;
 
 			position: absolute;
+			inset-block-start: $banner-padding;
+			inset-inline-start: $layout-gap;
 			border-color: transparent transparent $banner-color $banner-color;
+
+			@include widescreen {
+				inset-inline-start: $layout-widescreen-gap;
+			}
 		}
 	}
 
-	a:not(.button) {
-		color: currentColor;
-		font-weight: $weight-semibold;
+	.banner-content {
+		grid-area: banner-content;
 
-		.theme-high-contrast & {
-			color: $hyperlink;
+		a:not(.button) {
+			color: currentColor;
+			font-weight: $weight-semibold;
+
+			.theme-high-contrast & {
+				color: $hyperlink;
+			}
 		}
 	}
+
+	.banner-dismiss {
+		@include dismiss-square;
+
+		grid-area: dismiss;
+		margin-inline-start: $banner-dismiss-margin;
+	}
 }

package/src/components/notification.scss

@@ -11,19 +11,23 @@ $notification-border-radius: $border-radius !default;
 $notification-icon-inline-spacing: 0.375em !default;
 $notification-icon-block-spacing: 0.2em !default;
 
+$notification-dismiss-margin: $spacer-2 !default;
+
 .notification {
-	display: block;
+	display: grid;
 	position: relative;
 	padding: $notification-padding;
+	grid-template: auto / 1fr auto;
+	grid-template-areas: 'notification-content dismiss';
 	border: $notification-border-width solid $notification-border-color;
 	border-radius: $notification-border-radius;
 	outline-color: $text;
 	background-color: $notification-background;
 	color: $notification-color;
 	font-size: $notification-font-size;
+	line-height: $line-height-normal;
 	word-wrap: break-word;
 	word-break: break-word;
-	line-height: $line-height-normal;
 
 	@each $name, $color-set in $colors {
 		$base: nth($color-set, $color-index-base);
@@ -58,29 +62,40 @@ $notification-icon-block-spacing: 0.2em !default;
 		}
 	}
 
-	.notification-title,
-	a:not(.button) {
-		color: currentColor;
-		font-weight: $weight-semibold;
-	}
+	.notification-content {
+		grid-area: notification-content;
 
-	a:not(.button) {
-		.theme-high-contrast & {
-			color: $hyperlink;
+		.notification-title,
+		a:not(.button) {
+			color: currentColor;
+			font-weight: $weight-semibold;
 		}
-	}
 
-	.notification-title {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		margin-block-end: $layout-1;
-
-		.icon {
-			flex-shrink: 0;
-			align-self: start;
-			margin-inline-end: $notification-icon-inline-spacing;
-			margin-block-start: $notification-icon-block-spacing;
+		a:not(.button) {
+			.theme-high-contrast & {
+				color: $hyperlink;
+			}
 		}
+
+		.notification-title {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			margin-block-end: $layout-1;
+
+			.icon {
+				flex-shrink: 0;
+				align-self: start;
+				margin-inline-end: $notification-icon-inline-spacing;
+				margin-block-start: $notification-icon-block-spacing;
+			}
+		}
+	}
+
+	.notification-dismiss {
+		@include dismiss-square;
+
+		grid-area: dismiss;
+		margin-inline-start: $notification-dismiss-margin;
 	}
 }

package/src/core/animations.scss

@@ -24,3 +24,32 @@
 		transform: scale(1);
 	}
 }
+
+@keyframes slide-up-fade-out {
+	100% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes fade-out {
+	100% {
+		opacity: 0;
+	}
+}
+
+.animation-fade {
+	animation: fade-out 0.4s ease-in forwards;
+
+	@include prefers-reduced-motion {
+		animation-duration: 0s;
+	}
+}
+
+.animation-slide-up {
+	animation: slide-up-fade-out 0.4s ease-in forwards;
+
+	@include prefers-reduced-motion {
+		animation-duration: 0s;
+	}
+}

package/src/mixins/dismiss.scss

@@ -0,0 +1,22 @@
+%dismiss {
+	@include transparent-effects;
+
+	display: inline-block;
+	color: currentColor;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+@mixin dismiss {
+	@extend %dismiss;
+}
+
+@mixin dismiss-square {
+	@extend %dismiss;
+
+	width: 1em;
+	height: 1em;
+	padding: 0;
+	border: 0;
+	border-radius: $border-radius-rounded;
+}

package/src/mixins/index.scss

@@ -12,5 +12,6 @@
 @import './force-colors.scss';
 @import './overlay.scss';
 @import './transparency.scss';
+@import './dismiss.scss';
 @import './unselectable.scss';
 @import './visually-hidden.scss';

package/src/mixins/media-queries.scss

@@ -53,3 +53,9 @@
 		@content;
 	}
 }
+
+@mixin prefers-reduced-motion {
+	@media (prefers-reduced-motion: reduce) {
+		@content;
+	}
+}