@microsoft/atlas-css 3.42.1 → 3.44.0

package/src/atomics/gap.scss

@@ -1,60 +1,60 @@
-$separator: '-' !default;
-
-$gap-sizes: (
-	('xxs', $layout-1),
-	('xs', $layout-2),
-	('sm', $layout-3),
-	('md', $layout-4),
-	('lg', $layout-5),
-	// ('xl', $layout-6),
-	// ('xxl', $layout-7),
-	// ('xxxl', $layout-8),
-	('none', $layout-0)
-);
-
-@function sizeValue($key, $value) {
-	@return if($key == 'none', 0, $value);
-}
-
-@each $size in $gap-sizes {
-	$sizeKey: nth($size, 1);
-	$sizeValue: nth($size, 2);
-
-	// .<property>-<value>
-	.gap#{$separator}#{$sizeKey} {
-		gap: sizeValue($sizeKey, $sizeValue) !important;
-	}
-}
-
-@include tablet {
-	@each $size in $gap-sizes {
-		$sizeKey: nth($size, 1);
-		$sizeValue: nth($size, 2);
-
-		.gap#{$separator}#{$sizeKey}#{$separator}tablet {
-			gap: $sizeValue !important;
-		}
-	}
-}
-
-@include desktop {
-	@each $size in $gap-sizes {
-		$sizeKey: nth($size, 1);
-		$sizeValue: nth($size, 2);
-
-		.gap#{$separator}#{$sizeKey}#{$separator}desktop {
-			gap: $sizeValue !important;
-		}
-	}
-}
-
-@include widescreen {
-	@each $size in $gap-sizes {
-		$sizeKey: nth($size, 1);
-		$sizeValue: nth($size, 2);
-
-		.gap#{$separator}#{$sizeKey}#{$separator}widescreen {
-			gap: $sizeValue !important;
-		}
-	}
-}
+$separator: '-' !default;
+
+$gap-sizes: (
+	('xxs', $layout-1),
+	('xs', $layout-2),
+	('sm', $layout-3),
+	('md', $layout-4),
+	('lg', $layout-5),
+	// ('xl', $layout-6),
+	// ('xxl', $layout-7),
+	// ('xxxl', $layout-8),
+	('none', $layout-0)
+);
+
+@function sizeValue($key, $value) {
+	@return if($key == 'none', 0, $value);
+}
+
+@each $size in $gap-sizes {
+	$sizeKey: nth($size, 1);
+	$sizeValue: nth($size, 2);
+
+	// .<property>-<value>
+	.gap#{$separator}#{$sizeKey} {
+		gap: sizeValue($sizeKey, $sizeValue) !important;
+	}
+}
+
+@include tablet {
+	@each $size in $gap-sizes {
+		$sizeKey: nth($size, 1);
+		$sizeValue: nth($size, 2);
+
+		.gap#{$separator}#{$sizeKey}#{$separator}tablet {
+			gap: $sizeValue !important;
+		}
+	}
+}
+
+@include desktop {
+	@each $size in $gap-sizes {
+		$sizeKey: nth($size, 1);
+		$sizeValue: nth($size, 2);
+
+		.gap#{$separator}#{$sizeKey}#{$separator}desktop {
+			gap: $sizeValue !important;
+		}
+	}
+}
+
+@include widescreen {
+	@each $size in $gap-sizes {
+		$sizeKey: nth($size, 1);
+		$sizeValue: nth($size, 2);
+
+		.gap#{$separator}#{$sizeKey}#{$separator}widescreen {
+			gap: $sizeValue !important;
+		}
+	}
+}

package/src/atomics/image.scss

@@ -1,15 +1,15 @@
-.object-fit-contain {
-	object-fit: contain !important;
-}
-
-.object-fit-cover {
-	object-fit: cover !important;
-}
-
-.object-fit-fill {
-	object-fit: fill !important;
-}
-
-.object-position-top {
-	object-position: top !important;
-}
+.object-fit-contain {
+	object-fit: contain !important;
+}
+
+.object-fit-cover {
+	object-fit: cover !important;
+}
+
+.object-fit-fill {
+	object-fit: fill !important;
+}
+
+.object-position-top {
+	object-position: top !important;
+}

package/src/atomics/index.scss

@@ -1,18 +1,18 @@
-@import './aspect-ratio.scss';
-@import './typography.scss';
-@import './border.scss';
-@import './background.scss';
-@import './colors.scss';
-@import './display.scss';
-@import './gap.scss';
-@import './overflow.scss';
-@import './shadow.scss';
-@import './spacing-auto.scss';
-@import './spacing.scss';
-@import './flex.scss';
-@import './position.scss';
-@import './line-clamp.scss';
-@import './image.scss';
-@import './list.scss';
-@import './width.scss';
-@import './visually-hidden.scss';
+@import './aspect-ratio.scss';
+@import './typography.scss';
+@import './border.scss';
+@import './background.scss';
+@import './colors.scss';
+@import './display.scss';
+@import './gap.scss';
+@import './overflow.scss';
+@import './shadow.scss';
+@import './spacing-auto.scss';
+@import './spacing.scss';
+@import './flex.scss';
+@import './position.scss';
+@import './line-clamp.scss';
+@import './image.scss';
+@import './list.scss';
+@import './width.scss';
+@import './visually-hidden.scss';

package/src/atomics/line-clamp.scss

@@ -1,15 +1,15 @@
-.line-clamp-1 {
-	@include line-clamp(1, true);
-}
-
-.line-clamp-2 {
-	@include line-clamp(2, true);
-}
-
-.line-clamp-3 {
-	@include line-clamp(3, true);
-}
-
-.line-clamp-4 {
-	@include line-clamp(4, true);
-}
+.line-clamp-1 {
+	@include line-clamp(1, true);
+}
+
+.line-clamp-2 {
+	@include line-clamp(2, true);
+}
+
+.line-clamp-3 {
+	@include line-clamp(3, true);
+}
+
+.line-clamp-4 {
+	@include line-clamp(4, true);
+}

package/src/atomics/list.scss

@@ -1,3 +1,3 @@
-.list-style-none {
-	list-style: none !important;
-}
+.list-style-none {
+	list-style: none !important;
+}

package/src/atomics/overflow.scss

@@ -1,9 +1,9 @@
-.overflow-hidden {
-	overflow: hidden;
-}
-
-@include tablet {
-	.overflow-hidden-tablet {
-		overflow: hidden;
-	}
-}
+.overflow-hidden {
+	overflow: hidden;
+}
+
+@include tablet {
+	.overflow-hidden-tablet {
+		overflow: hidden;
+	}
+}

package/src/atomics/position.scss

@@ -1,19 +1,19 @@
-@each $item in $positions {
-	.position-#{$item} {
-		position: #{$item} !important;
-	}
-}
-
-@include tablet {
-	@each $item in $positions {
-		.position-#{$item}-tablet {
-			position: #{$item} !important;
-		}
-	}
-}
-
-@each $side, $direction in $logical-directions {
-	.#{$side}-0 {
-		inset-#{$direction}: 0 !important;
-	}
-}
+@each $item in $positions {
+	.position-#{$item} {
+		position: #{$item} !important;
+	}
+}
+
+@include tablet {
+	@each $item in $positions {
+		.position-#{$item}-tablet {
+			position: #{$item} !important;
+		}
+	}
+}
+
+@each $side, $direction in $logical-directions {
+	.#{$side}-0 {
+		inset-#{$direction}: 0 !important;
+	}
+}

package/src/atomics/shadow.scss

@@ -1,19 +1,19 @@
-.box-shadow-none {
-	box-shadow: none !important;
-}
-
-.box-shadow-light {
-	box-shadow: $box-shadow-light !important;
-}
-
-.box-shadow-medium {
-	box-shadow: $box-shadow-medium !important;
-}
-
-.box-shadow-heavy {
-	box-shadow: $box-shadow-heavy !important;
-}
-
-.box-shadow-extra-heavy {
-	box-shadow: $box-shadow-extra-heavy !important;
-}
+.box-shadow-none {
+	box-shadow: none !important;
+}
+
+.box-shadow-light {
+	box-shadow: $box-shadow-light !important;
+}
+
+.box-shadow-medium {
+	box-shadow: $box-shadow-medium !important;
+}
+
+.box-shadow-heavy {
+	box-shadow: $box-shadow-heavy !important;
+}
+
+.box-shadow-extra-heavy {
+	box-shadow: $box-shadow-extra-heavy !important;
+}

package/src/atomics/spacing-auto.scss

@@ -1,52 +1,52 @@
-$auto-spacing-properties: (
-	('margin-inline', 'margin-inline'),
-	('margin-left', 'margin-inline-start'),
-	('margin-right', 'margin-inline-end'),
-	('margin-top', 'margin-block-start')
-) !default;
-
-$separator: '-';
-
-@each $property in $auto-spacing-properties {
-	$classicProp: nth($property, 1);
-	$logicalProp: nth($property, 2);
-
-	// .<property>-auto
-	.#{$classicProp}#{$separator}auto {
-		#{$logicalProp}: auto !important;
-	}
-}
-
-// .<property>-auto-<screensize>
-@each $property in $auto-spacing-properties {
-	$classicProp: nth($property, 1);
-	$logicalProp: nth($property, 2);
-
-	@include tablet {
-		.#{$classicProp}#{$separator}auto#{$separator}tablet {
-			#{$logicalProp}: auto !important;
-		}
-	}
-}
-
-@each $property in $auto-spacing-properties {
-	$classicProp: nth($property, 1);
-	$logicalProp: nth($property, 2);
-
-	@include desktop {
-		.#{$classicProp}#{$separator}auto#{$separator}desktop {
-			#{$logicalProp}: auto !important;
-		}
-	}
-}
-
-@each $property in $auto-spacing-properties {
-	$classicProp: nth($property, 1);
-	$logicalProp: nth($property, 2);
-
-	@include widescreen {
-		.#{$classicProp}#{$separator}auto#{$separator}widescreen {
-			#{$logicalProp}: auto !important;
-		}
-	}
-}
+$auto-spacing-properties: (
+	('margin-inline', 'margin-inline'),
+	('margin-left', 'margin-inline-start'),
+	('margin-right', 'margin-inline-end'),
+	('margin-top', 'margin-block-start')
+) !default;
+
+$separator: '-';
+
+@each $property in $auto-spacing-properties {
+	$classicProp: nth($property, 1);
+	$logicalProp: nth($property, 2);
+
+	// .<property>-auto
+	.#{$classicProp}#{$separator}auto {
+		#{$logicalProp}: auto !important;
+	}
+}
+
+// .<property>-auto-<screensize>
+@each $property in $auto-spacing-properties {
+	$classicProp: nth($property, 1);
+	$logicalProp: nth($property, 2);
+
+	@include tablet {
+		.#{$classicProp}#{$separator}auto#{$separator}tablet {
+			#{$logicalProp}: auto !important;
+		}
+	}
+}
+
+@each $property in $auto-spacing-properties {
+	$classicProp: nth($property, 1);
+	$logicalProp: nth($property, 2);
+
+	@include desktop {
+		.#{$classicProp}#{$separator}auto#{$separator}desktop {
+			#{$logicalProp}: auto !important;
+		}
+	}
+}
+
+@each $property in $auto-spacing-properties {
+	$classicProp: nth($property, 1);
+	$logicalProp: nth($property, 2);
+
+	@include widescreen {
+		.#{$classicProp}#{$separator}auto#{$separator}widescreen {
+			#{$logicalProp}: auto !important;
+		}
+	}
+}

package/src/atomics/spacing.scss

@@ -1,98 +1,98 @@
-$separator: '-' !default;
-$logical-spacing-properties: (
-	('margin', 'margin'),
-	('margin-inline', 'margin-inline'),
-	('margin-block', 'margin-block'),
-	('margin-top', 'margin-block-start'),
-	('margin-bottom', 'margin-block-end'),
-	('margin-left', 'margin-inline-start'),
-	('margin-right', 'margin-inline-end'),
-	('padding', 'padding'),
-	('padding-inline', 'padding-inline'),
-	('padding-block', 'padding-block'),
-	('padding-top', 'padding-block-start'),
-	('padding-bottom', 'padding-block-end'),
-	('padding-left', 'padding-inline-start'),
-	('padding-right', 'padding-inline-end')
-) !default;
-
-$layout-sizes: (
-	('xxs', $layout-1),
-	('xs', $layout-2),
-	('sm', $layout-3),
-	('md', $layout-4),
-	('lg', $layout-5),
-	('xl', $layout-6),
-	('xxl', $layout-7),
-	('xxxl', $layout-8),
-	('none', $layout-0)
-);
-
-@function sizeValue($key, $value) {
-	@return if($key == 'none', 0, $value);
-}
-
-// Pattern: <cssproperty>-<value>-<screen>
-
-@each $property in $logical-spacing-properties {
-	$classicProp: nth($property, 1);
-	$logicalProp: nth($property, 2);
-
-	@each $size in $layout-sizes {
-		$sizeKey: nth($size, 1);
-		$sizeValue: nth($size, 2);
-
-		// .<property>-<value>
-		.#{$classicProp}#{$separator}#{$sizeKey} {
-			#{$logicalProp}: sizeValue($sizeKey, $sizeValue) !important;
-		}
-	}
-}
-
-@include tablet {
-	@each $property in $logical-spacing-properties {
-		$classicProp: nth($property, 1);
-		$logicalProp: nth($property, 2);
-
-		@each $size in $layout-sizes {
-			$sizeKey: nth($size, 1);
-			$sizeValue: nth($size, 2);
-
-			.#{$classicProp}#{$separator}#{$sizeKey}#{$separator}tablet {
-				#{$logicalProp}: $sizeValue !important;
-			}
-		}
-	}
-}
-
-@include desktop {
-	@each $property in $logical-spacing-properties {
-		$classicProp: nth($property, 1);
-		$logicalProp: nth($property, 2);
-
-		@each $size in $layout-sizes {
-			$sizeKey: nth($size, 1);
-			$sizeValue: nth($size, 2);
-
-			.#{$classicProp}#{$separator}#{$sizeKey}#{$separator}desktop {
-				#{$logicalProp}: $sizeValue !important;
-			}
-		}
-	}
-}
-
-@include widescreen {
-	@each $property in $logical-spacing-properties {
-		$classicProp: nth($property, 1);
-		$logicalProp: nth($property, 2);
-
-		@each $size in $layout-sizes {
-			$sizeKey: nth($size, 1);
-			$sizeValue: nth($size, 2);
-
-			.#{$classicProp}#{$separator}#{$sizeKey}#{$separator}widescreen {
-				#{$logicalProp}: $sizeValue !important;
-			}
-		}
-	}
-}
+$separator: '-' !default;
+$logical-spacing-properties: (
+	('margin', 'margin'),
+	('margin-inline', 'margin-inline'),
+	('margin-block', 'margin-block'),
+	('margin-top', 'margin-block-start'),
+	('margin-bottom', 'margin-block-end'),
+	('margin-left', 'margin-inline-start'),
+	('margin-right', 'margin-inline-end'),
+	('padding', 'padding'),
+	('padding-inline', 'padding-inline'),
+	('padding-block', 'padding-block'),
+	('padding-top', 'padding-block-start'),
+	('padding-bottom', 'padding-block-end'),
+	('padding-left', 'padding-inline-start'),
+	('padding-right', 'padding-inline-end')
+) !default;
+
+$layout-sizes: (
+	('xxs', $layout-1),
+	('xs', $layout-2),
+	('sm', $layout-3),
+	('md', $layout-4),
+	('lg', $layout-5),
+	('xl', $layout-6),
+	('xxl', $layout-7),
+	('xxxl', $layout-8),
+	('none', $layout-0)
+);
+
+@function sizeValue($key, $value) {
+	@return if($key == 'none', 0, $value);
+}
+
+// Pattern: <cssproperty>-<value>-<screen>
+
+@each $property in $logical-spacing-properties {
+	$classicProp: nth($property, 1);
+	$logicalProp: nth($property, 2);
+
+	@each $size in $layout-sizes {
+		$sizeKey: nth($size, 1);
+		$sizeValue: nth($size, 2);
+
+		// .<property>-<value>
+		.#{$classicProp}#{$separator}#{$sizeKey} {
+			#{$logicalProp}: sizeValue($sizeKey, $sizeValue) !important;
+		}
+	}
+}
+
+@include tablet {
+	@each $property in $logical-spacing-properties {
+		$classicProp: nth($property, 1);
+		$logicalProp: nth($property, 2);
+
+		@each $size in $layout-sizes {
+			$sizeKey: nth($size, 1);
+			$sizeValue: nth($size, 2);
+
+			.#{$classicProp}#{$separator}#{$sizeKey}#{$separator}tablet {
+				#{$logicalProp}: $sizeValue !important;
+			}
+		}
+	}
+}
+
+@include desktop {
+	@each $property in $logical-spacing-properties {
+		$classicProp: nth($property, 1);
+		$logicalProp: nth($property, 2);
+
+		@each $size in $layout-sizes {
+			$sizeKey: nth($size, 1);
+			$sizeValue: nth($size, 2);
+
+			.#{$classicProp}#{$separator}#{$sizeKey}#{$separator}desktop {
+				#{$logicalProp}: $sizeValue !important;
+			}
+		}
+	}
+}
+
+@include widescreen {
+	@each $property in $logical-spacing-properties {
+		$classicProp: nth($property, 1);
+		$logicalProp: nth($property, 2);
+
+		@each $size in $layout-sizes {
+			$sizeKey: nth($size, 1);
+			$sizeValue: nth($size, 2);
+
+			.#{$classicProp}#{$separator}#{$sizeKey}#{$separator}widescreen {
+				#{$logicalProp}: $sizeValue !important;
+			}
+		}
+	}
+}