@microsoft/atlas-css 3.24.0 → 3.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.24.0",
+	"version": "3.25.2",
 	"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/spacing-auto.scss

@@ -1,7 +1,8 @@
 $auto-spacing-properties: (
 	('margin-inline', 'margin-inline'),
 	('margin-left', 'margin-inline-start'),
-	('margin-right', 'margin-inline-end')
+	('margin-right', 'margin-inline-end'),
+	('margin-top', 'margin-block-start')
 ) !default;
 
 $separator: '-';

package/src/atomics/typography.scss

@@ -161,3 +161,23 @@
 .text-transform-uppercase {
 	text-transform: uppercase !important;
 }
+
+// Alignment
+
+.text-align-center {
+	text-align: center !important;
+}
+
+.text-align-right {
+	text-align: end !important;
+}
+
+@include tablet {
+	.text-align-center-tablet {
+		text-align: center !important;
+	}
+
+	.text-align-right-tablet {
+		text-align: end !important;
+	}
+}

package/src/components/card.scss

@@ -31,6 +31,7 @@ $card-column-gap: $spacer-5 !default;
 
 	.card-template {
 		display: grid;
+		flex-grow: 1;
 		padding: $card-padding;
 		grid-template: auto / 1fr $spacer-10;
 		gap: $card-row-gap $card-column-gap;
@@ -244,7 +245,7 @@ $card-column-gap: $spacer-5 !default;
 
 			.card-footer {
 				flex-grow: 1;
-				flex-shrink: 0;
+				flex-shrink: 1;
 				width: 100%;
 			}
 		}

package/src/components/image.scss

@@ -0,0 +1,44 @@
+$dimensions: 16 24 32 36 48 64 76 88 96 112 128 !default;
+
+.image {
+	display: block;
+	position: relative;
+
+	img,
+	svg {
+		display: block;
+		width: 100%;
+		height: auto;
+		max-height: 100%;
+	}
+
+	&.image-fullwidth {
+		width: 100%;
+		height: auto;
+		object-fit: cover;
+		margin: 0;
+	}
+
+	// Sizes
+
+	@each $dimension in $dimensions {
+		&.image-#{$dimension}x#{$dimension} {
+			width: $dimension * 1px;
+			height: $dimension * 1px;
+		}
+
+		@include tablet {
+			&.image-#{$dimension}x#{$dimension}-tablet {
+				width: $dimension * 1px;
+				height: $dimension * 1px;
+			}
+		}
+
+		@include desktop {
+			&.image-#{$dimension}x#{$dimension}-desktop {
+				width: $dimension * 1px;
+				height: $dimension * 1px;
+			}
+		}
+	}
+}

package/src/components/index.scss

@@ -10,6 +10,7 @@
 @import './markdown.scss'; // must be ordered after code-block
 @import './media.scss';
 @import './icon.scss';
+@import './image.scss';
 @import './popover.scss';
 @import './pagination.scss';
 @import './table.scss';

package/src/core/bare-elements.scss

@@ -14,6 +14,14 @@ details > * {
 
 :where(a) {
 	color: $hyperlink;
+	text-decoration: none;
+	cursor: pointer;
+	word-wrap: break-word;
+}
+
+:where(a:hover) {
+	color: $primary-hover;
+	text-decoration: underline;
 }
 
 :where(a:visited) {