@microsoft/atlas-css 3.42.1 → 3.44.0

package/src/components/hero.scss

@@ -1,197 +1,197 @@
-$hero-padding-xs: $layout-4 !default;
-$hero-padding-sm: $layout-5 !default;
-$hero-padding-default: $layout-6 !default;
-$hero-padding-lg: $layout-7 !default;
-
-$hero-min-height-xs: 200px !default;
-$hero-min-height-sm: 300px !default;
-$hero-min-height-default: 400px !default;
-$hero-min-height-lg: 500px !default;
-$hero-detail-max-width: 500px !default;
-$hero-content-half-width: 50% !default;
-$hero-content-fluid-width: 45% !default;
-$hero-details-content-fluid-width: 35% !default;
-$hero-content-width: $reading-max-width !default;
-
-$hero-image-width: calc((100% - 2 * $layout-gap) * 0.55) !default;
-$hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !default;
-
-.hero {
-	@extend %layout-gap;
-
-	display: flex;
-	position: relative;
-	flex-direction: column;
-	align-items: stretch;
-	justify-content: space-between;
-
-	.hero-content {
-		z-index: $zindex-active;
-		padding-block: $hero-padding-sm;
-
-		@include desktop {
-			width: $hero-content-fluid-width;
-			min-height: $hero-min-height-default;
-			padding-block: $hero-padding-default;
-			padding-inline-end: $hero-padding-sm;
-		}
-	}
-
-	.theme-high-contrast & .hero-details-card {
-		background: unset !important;
-	}
-
-	.hero-details {
-		display: flex;
-		padding-block: $hero-padding-xs;
-
-		@include tablet {
-			justify-content: flex-end;
-			padding-block: $hero-padding-sm;
-			padding-inline-start: $hero-padding-xs;
-		}
-
-		@include desktop {
-			min-height: $hero-min-height-default;
-			padding-block: $hero-padding-default;
-			padding-inline-start: $hero-padding-sm;
-			padding-inline-end: $hero-padding-sm;
-		}
-
-		.hero-details-card {
-			align-self: flex-start;
-			backdrop-filter: blur(20px);
-			background-color: #{$body-background};
-
-			@include desktop {
-				max-width: $hero-detail-max-width;
-				background: linear-gradient(
-					116deg,
-					#{$body-background} 23.94%,
-					#{$border-white-high-contrast} 200%
-				);
-				margin-inline-start: $hero-padding-xs;
-			}
-		}
-	}
-
-	&:not(.hero-image) {
-		.hero-content {
-			@include desktop {
-				width: 100%;
-				max-width: $hero-content-width;
-			}
-		}
-	}
-
-	@include desktop {
-		&.hero-xs {
-			.hero-content {
-				min-height: $hero-min-height-xs;
-				padding-block: $hero-padding-xs;
-			}
-		}
-
-		&.hero-sm {
-			.hero-content {
-				min-height: $hero-min-height-sm;
-				padding-block: $hero-padding-sm;
-			}
-		}
-
-		&.hero-lg {
-			.hero-content {
-				min-height: $hero-min-height-lg;
-				padding-block: $hero-padding-lg;
-			}
-		}
-	}
-
-	.hero-card {
-		position: relative;
-		padding: $spacer-5;
-		border: none;
-		background-color: transparent;
-		z-index: 1;
-
-		@include tablet {
-			padding: $spacer-10;
-		}
-
-		@include desktop {
-			border-inline: 1px solid $border;
-			border-block-end: 1px solid $border;
-			border-end-start-radius: $border-radius-lg;
-			border-end-end-radius: $border-radius-lg;
-		}
-	}
-
-	.hero-background {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-
-		video,
-		img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-	}
-
-	&.hero-image::before {
-		display: none;
-		position: absolute;
-		inset-block-start: 0;
-		width: $hero-image-width;
-		height: 100%;
-		background-image: var(--hero-background-image);
-		background-repeat: no-repeat;
-		background-size: cover;
-		content: ' ';
-		inset-inline-end: $layout-gap;
-
-		@include desktop {
-			display: block;
-		}
-
-		@include widescreen {
-			width: $hero-image-width-widescreen;
-			inset-inline-end: $layout-widescreen-gap;
-		}
-
-		@media (forced-colors: active) {
-			background-image: none !important;
-		}
-
-		.theme-light & {
-			--hero-background-image: var(--hero-background-image-light);
-		}
-
-		.theme-dark & {
-			--hero-background-image: var(--hero-background-image-dark);
-		}
-
-		.theme-high-contrast & {
-			--hero-background-image: none;
-		}
-	}
-
-	// Set direction to prevent image flip for rtl
-
-	[dir='rtl'] &.hero-image,
-	&.hero-image:dir(rtl) {
-		direction: ltr;
-
-		.hero-content,
-		.hero-details-card {
-			direction: rtl;
-		}
-
-		&[class^='gradient-border-'] {
-			direction: ltr;
-		}
-	}
-}
+$hero-padding-xs: $layout-4 !default;
+$hero-padding-sm: $layout-5 !default;
+$hero-padding-default: $layout-6 !default;
+$hero-padding-lg: $layout-7 !default;
+
+$hero-min-height-xs: 200px !default;
+$hero-min-height-sm: 300px !default;
+$hero-min-height-default: 400px !default;
+$hero-min-height-lg: 500px !default;
+$hero-detail-max-width: 500px !default;
+$hero-content-half-width: 50% !default;
+$hero-content-fluid-width: 45% !default;
+$hero-details-content-fluid-width: 35% !default;
+$hero-content-width: $reading-max-width !default;
+
+$hero-image-width: calc((100% - 2 * $layout-gap) * 0.55) !default;
+$hero-image-width-widescreen: calc((100% - 2 * $layout-widescreen-gap) * 0.55) !default;
+
+.hero {
+	@extend %layout-gap;
+
+	display: flex;
+	position: relative;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: space-between;
+
+	.hero-content {
+		z-index: $zindex-active;
+		padding-block: $hero-padding-sm;
+
+		@include desktop {
+			width: $hero-content-fluid-width;
+			min-height: $hero-min-height-default;
+			padding-block: $hero-padding-default;
+			padding-inline-end: $hero-padding-sm;
+		}
+	}
+
+	.theme-high-contrast & .hero-details-card {
+		background: unset !important;
+	}
+
+	.hero-details {
+		display: flex;
+		padding-block: $hero-padding-xs;
+
+		@include tablet {
+			justify-content: flex-end;
+			padding-block: $hero-padding-sm;
+			padding-inline-start: $hero-padding-xs;
+		}
+
+		@include desktop {
+			min-height: $hero-min-height-default;
+			padding-block: $hero-padding-default;
+			padding-inline-start: $hero-padding-sm;
+			padding-inline-end: $hero-padding-sm;
+		}
+
+		.hero-details-card {
+			align-self: flex-start;
+			backdrop-filter: blur(20px);
+			background-color: #{$body-background};
+
+			@include desktop {
+				max-width: $hero-detail-max-width;
+				background: linear-gradient(
+					116deg,
+					#{$body-background} 23.94%,
+					#{$border-white-high-contrast} 200%
+				);
+				margin-inline-start: $hero-padding-xs;
+			}
+		}
+	}
+
+	&:not(.hero-image) {
+		.hero-content {
+			@include desktop {
+				width: 100%;
+				max-width: $hero-content-width;
+			}
+		}
+	}
+
+	@include desktop {
+		&.hero-xs {
+			.hero-content {
+				min-height: $hero-min-height-xs;
+				padding-block: $hero-padding-xs;
+			}
+		}
+
+		&.hero-sm {
+			.hero-content {
+				min-height: $hero-min-height-sm;
+				padding-block: $hero-padding-sm;
+			}
+		}
+
+		&.hero-lg {
+			.hero-content {
+				min-height: $hero-min-height-lg;
+				padding-block: $hero-padding-lg;
+			}
+		}
+	}
+
+	.hero-card {
+		position: relative;
+		padding: $spacer-5;
+		border: none;
+		background-color: transparent;
+		z-index: 1;
+
+		@include tablet {
+			padding: $spacer-10;
+		}
+
+		@include desktop {
+			border-inline: 1px solid $border;
+			border-block-end: 1px solid $border;
+			border-end-start-radius: $border-radius-lg;
+			border-end-end-radius: $border-radius-lg;
+		}
+	}
+
+	.hero-background {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+
+		video,
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&.hero-image::before {
+		display: none;
+		position: absolute;
+		inset-block-start: 0;
+		width: $hero-image-width;
+		height: 100%;
+		background-image: var(--hero-background-image);
+		background-repeat: no-repeat;
+		background-size: cover;
+		content: ' ';
+		inset-inline-end: $layout-gap;
+
+		@include desktop {
+			display: block;
+		}
+
+		@include widescreen {
+			width: $hero-image-width-widescreen;
+			inset-inline-end: $layout-widescreen-gap;
+		}
+
+		@media (forced-colors: active) {
+			background-image: none !important;
+		}
+
+		.theme-light & {
+			--hero-background-image: var(--hero-background-image-light);
+		}
+
+		.theme-dark & {
+			--hero-background-image: var(--hero-background-image-dark);
+		}
+
+		.theme-high-contrast & {
+			--hero-background-image: none;
+		}
+	}
+
+	// Set direction to prevent image flip for rtl
+
+	[dir='rtl'] &.hero-image,
+	&.hero-image:dir(rtl) {
+		direction: ltr;
+
+		.hero-content,
+		.hero-details-card {
+			direction: rtl;
+		}
+
+		&[class^='gradient-border-'] {
+			direction: ltr;
+		}
+	}
+}

package/src/components/icon.scss

@@ -1,20 +1,20 @@
-$features-icon: true !default;
-$icon-dimensions: 1em !default;
-
-.icon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	&,
-	svg,
-	img {
-		width: $icon-dimensions;
-		height: $icon-dimensions;
-	}
-
-	&.icon-rounded {
-		padding: 0.6rem; // ensures icon is not cut off by rounded border
-		border-radius: 50%;
-	}
-}
+$features-icon: true !default;
+$icon-dimensions: 1em !default;
+
+.icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	&,
+	svg,
+	img {
+		width: $icon-dimensions;
+		height: $icon-dimensions;
+	}
+
+	&.icon-rounded {
+		padding: 0.6rem; // ensures icon is not cut off by rounded border
+		border-radius: 50%;
+	}
+}

package/src/components/image.scss

@@ -1,44 +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;
-			}
-		}
-	}
-}
+$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

@@ -1,26 +1,27 @@
-@import './banner.scss';
-@import './breadcrumbs.scss';
-@import './button.scss';
-@import './buttons.scss';
-@import './card.scss';
-@import './button-reset.scss';
-@import './form/index.scss';
-@import './hero.scss';
-@import './gradient.scss';
-@import './gradient-card.scss';
-@import './link-button.scss';
-@import './markdown.scss'; // must be ordered after code-block
-@import './media.scss';
-@import './message.scss';
-@import './notification.scss';
-@import './icon.scss';
-@import './image.scss';
-@import './persona.scss';
-@import './popover.scss';
-@import './pagination.scss';
-@import './table.scss';
-@import './toggle.scss';
-@import './scroll.scss';
-@import './site-header.scss';
-@import './stretched-link.scss';
-@import './layout.scss';
+@import './banner.scss';
+@import './breadcrumbs.scss';
+@import './button.scss';
+@import './buttons.scss';
+@import './card.scss';
+@import './button-reset.scss';
+@import './form/index.scss';
+@import './hero.scss';
+@import './gradient.scss';
+@import './gradient-card.scss';
+@import './link-button.scss';
+@import './markdown.scss'; // must be ordered after code-block
+@import './media.scss';
+@import './message.scss';
+@import './notification.scss';
+@import './icon.scss';
+@import './image.scss';
+@import './persona.scss';
+@import './popover.scss';
+@import './pagination.scss';
+@import './table.scss';
+@import './toggle.scss';
+@import './scroll.scss';
+@import './site-header.scss';
+@import './stretched-link.scss';
+@import './segmented-control.scss';
+@import './layout.scss';