@microsoft/atlas-css 1.2.0 → 1.3.0

package/src/atomics/display.scss

@@ -1,33 +1,33 @@
-@each $item in $displays {
-	.display-#{$item} {
-		display: #{$item} !important;
-	}
-}
-
-@include tablet {
-	@each $item in $displays {
-		.display-#{$item}-tablet {
-			display: #{$item} !important;
-		}
-	}
-}
-
-@include desktop {
-	@each $item in $displays {
-		.display-#{$item}-desktop {
-			display: #{$item} !important;
-		}
-	}
-}
-
-@include widescreen {
-	@each $item in $displays {
-		.display-#{$item}-widescreen {
-			display: #{$item} !important;
-		}
-	}
-}
-
-[hidden] {
-	display: none !important;
-}
+@each $item in $displays {
+	.display-#{$item} {
+		display: #{$item} !important;
+	}
+}
+
+@include tablet {
+	@each $item in $displays {
+		.display-#{$item}-tablet {
+			display: #{$item} !important;
+		}
+	}
+}
+
+@include desktop {
+	@each $item in $displays {
+		.display-#{$item}-desktop {
+			display: #{$item} !important;
+		}
+	}
+}
+
+@include widescreen {
+	@each $item in $displays {
+		.display-#{$item}-widescreen {
+			display: #{$item} !important;
+		}
+	}
+}
+
+[hidden] {
+	display: none !important;
+}

package/src/atomics/flex.scss

@@ -1,69 +1,69 @@
-@use 'sass:map';
-
-$flex-atomics: (
-	'justify-content': (
-		flex-start,
-		flex-end,
-		center,
-		space-around,
-		space-between,
-		space-evenly
-	),
-	'align-items': (
-		flex-start,
-		flex-end,
-		center,
-		baseline,
-		stretch
-	),
-	'align-content': (
-		flex-start,
-		flex-end,
-		center,
-		space-around,
-		space-between,
-		stretch
-	),
-	'align-self': (
-		flex-start,
-		flex-end,
-		center,
-		baseline,
-		stretch
-	),
-	'flex-direction': (
-		column,
-		column-reverse,
-		row-reverse
-	),
-	'flex-wrap': (
-		wrap,
-		wrap-reverse
-	),
-	'flex-shrink': (
-		0,
-		1
-	),
-	'flex-grow': (
-		0,
-		1
-	)
-) !default;
-
-@each $key in map.keys($flex-atomics) {
-	@each $value in map.get($flex-atomics, $key) {
-		.#{$key}-#{$value} {
-			#{$key}: $value !important;
-		}
-	}
-}
-
-@include tablet {
-	@each $key in map.keys($flex-atomics) {
-		@each $value in map.get($flex-atomics, $key) {
-			.#{$key}-#{$value}-tablet {
-				#{$key}: $value !important;
-			}
-		}
-	}
-}
+@use 'sass:map';
+
+$flex-atomics: (
+	'justify-content': (
+		flex-start,
+		flex-end,
+		center,
+		space-around,
+		space-between,
+		space-evenly
+	),
+	'align-items': (
+		flex-start,
+		flex-end,
+		center,
+		baseline,
+		stretch
+	),
+	'align-content': (
+		flex-start,
+		flex-end,
+		center,
+		space-around,
+		space-between,
+		stretch
+	),
+	'align-self': (
+		flex-start,
+		flex-end,
+		center,
+		baseline,
+		stretch
+	),
+	'flex-direction': (
+		column,
+		column-reverse,
+		row-reverse
+	),
+	'flex-wrap': (
+		wrap,
+		wrap-reverse
+	),
+	'flex-shrink': (
+		0,
+		1
+	),
+	'flex-grow': (
+		0,
+		1
+	)
+) !default;
+
+@each $key in map.keys($flex-atomics) {
+	@each $value in map.get($flex-atomics, $key) {
+		.#{$key}-#{$value} {
+			#{$key}: $value !important;
+		}
+	}
+}
+
+@include tablet {
+	@each $key in map.keys($flex-atomics) {
+		@each $value in map.get($flex-atomics, $key) {
+			.#{$key}-#{$value}-tablet {
+				#{$key}: $value !important;
+			}
+		}
+	}
+}

package/src/atomics/index.scss

@@ -1,8 +1,8 @@
-@import 'typography.scss';
-@import 'border.scss';
-@import 'colors.scss';
-@import 'display.scss';
-@import 'shadow.scss';
-@import 'spacing.scss';
-@import 'flex.scss';
-@import 'position.scss';
+@import './typography.scss';
+@import './border.scss';
+@import './colors.scss';
+@import './display.scss';
+@import './shadow.scss';
+@import './spacing.scss';
+@import './flex.scss';
+@import './position.scss';

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 $directions {
-	.#{$side}-0 {
-		#{$direction}: 0;
-	}
-}
+@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 $directions {
+	.#{$side}-0 {
+		#{$direction}: 0;
+	}
+}

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.scss

@@ -1,73 +1,73 @@
-$separator: '-';
-$spacing-properties: 'margin', 'margin-inline', 'margin-block', 'margin-top', 'margin-bottom',
-	'margin-left', 'margin-right', 'padding', 'padding-inline', 'padding-block', 'padding-top',
-	'padding-bottom', 'padding-left', 'padding-right' !default;
-
-$layout-sizes: (
-	('xxs', $layout-1),
-	('xs', $layout-2),
-	('s', $layout-3),
-	('m', $layout-4),
-	('l', $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 $spacing-properties {
-	@each $size in $layout-sizes {
-		$sizeKey: nth($size, 1);
-		$sizeValue: nth($size, 2);
-
-		// .<property>-<value>
-		.#{$property}#{$separator}#{$sizeKey} {
-			#{$property}: sizeValue($sizeKey, $sizeValue) !important;
-		}
-	}
-}
-
-@include tablet {
-	@each $property in $spacing-properties {
-		@each $size in $layout-sizes {
-			$sizeKey: nth($size, 1);
-			$sizeValue: nth($size, 2);
-
-			.#{$property}#{$separator}#{$sizeKey}#{$separator}tablet {
-				#{$property}: $sizeValue !important;
-			}
-		}
-	}
-}
-
-@include desktop {
-	@each $property in $spacing-properties {
-		@each $size in $layout-sizes {
-			$sizeKey: nth($size, 1);
-			$sizeValue: nth($size, 2);
-
-			.#{$property}#{$separator}#{$sizeKey}#{$separator}desktop {
-				#{$property}: $sizeValue !important;
-			}
-		}
-	}
-}
-
-@include widescreen {
-	@each $property in $spacing-properties {
-		@each $size in $layout-sizes {
-			$sizeKey: nth($size, 1);
-			$sizeValue: nth($size, 2);
-
-			.#{$property}#{$separator}#{$sizeKey}#{$separator}widescreen {
-				#{$property}: $sizeValue !important;
-			}
-		}
-	}
-}
+$separator: '-';
+$spacing-properties: 'margin', 'margin-inline', 'margin-block', 'margin-top', 'margin-bottom',
+	'margin-left', 'margin-right', 'padding', 'padding-inline', 'padding-block', 'padding-top',
+	'padding-bottom', 'padding-left', 'padding-right' !default;
+
+$layout-sizes: (
+	('xxs', $layout-1),
+	('xs', $layout-2),
+	('s', $layout-3),
+	('m', $layout-4),
+	('l', $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 $spacing-properties {
+	@each $size in $layout-sizes {
+		$sizeKey: nth($size, 1);
+		$sizeValue: nth($size, 2);
+
+		// .<property>-<value>
+		.#{$property}#{$separator}#{$sizeKey} {
+			#{$property}: sizeValue($sizeKey, $sizeValue) !important;
+		}
+	}
+}
+
+@include tablet {
+	@each $property in $spacing-properties {
+		@each $size in $layout-sizes {
+			$sizeKey: nth($size, 1);
+			$sizeValue: nth($size, 2);
+
+			.#{$property}#{$separator}#{$sizeKey}#{$separator}tablet {
+				#{$property}: $sizeValue !important;
+			}
+		}
+	}
+}
+
+@include desktop {
+	@each $property in $spacing-properties {
+		@each $size in $layout-sizes {
+			$sizeKey: nth($size, 1);
+			$sizeValue: nth($size, 2);
+
+			.#{$property}#{$separator}#{$sizeKey}#{$separator}desktop {
+				#{$property}: $sizeValue !important;
+			}
+		}
+	}
+}
+
+@include widescreen {
+	@each $property in $spacing-properties {
+		@each $size in $layout-sizes {
+			$sizeKey: nth($size, 1);
+			$sizeValue: nth($size, 2);
+
+			.#{$property}#{$separator}#{$sizeKey}#{$separator}widescreen {
+				#{$property}: $sizeValue !important;
+			}
+		}
+	}
+}

package/src/atomics/typography.scss

@@ -1,105 +1,105 @@
-// Font family
-
-.font-family-monospace {
-	font-family: $monospace-font-stack !important;
-	-moz-osx-font-smoothing: auto;
-	-webkit-font-smoothing: auto;
-}
-
-.font-family-quote {
-	font-family: $quote-font-stack !important;
-}
-
-// Heading sizes
-
-.font-size-h0 {
-	font-size: $font-size-0 !important;
-}
-
-.font-size-h1 {
-	font-size: $font-size-1 !important;
-}
-
-.font-size-h2 {
-	font-size: $font-size-2 !important;
-}
-
-.font-size-h3 {
-	font-size: $font-size-3 !important;
-}
-
-.font-size-h4 {
-	font-size: $font-size-4 !important;
-}
-
-.font-size-h5 {
-	font-size: $font-size-5 !important;
-}
-
-.font-size-h6 {
-	font-size: $font-size-6 !important;
-}
-
-// Non-heading sizes
-
-.font-size-xl {
-	font-size: $font-size-5 !important;
-}
-
-.font-size-l {
-	font-size: $font-size-6 !important;
-}
-
-.font-size-m {
-	font-size: $font-size-7 !important;
-}
-
-.font-size-s {
-	font-size: $font-size-8 !important;
-}
-
-.font-size-xs {
-	font-size: $font-size-9 !important;
-}
-
-// Weight
-
-.font-weight-light {
-	font-weight: $weight-light !important;
-}
-
-.font-weight-semilight {
-	font-weight: $weight-semilight !important;
-}
-
-.font-weight-normal {
-	font-weight: $weight-normal !important;
-}
-
-.font-weight-semibold {
-	font-weight: $weight-semibold !important;
-}
-
-.font-weight-bold {
-	font-weight: $weight-bold !important;
-}
-
-// Case
-
-.font-style-italic {
-	font-style: italic !important;
-}
-
-.text-decoration-underline {
-	text-decoration: underline !important;
-}
-
-.text-decoration-none {
-	text-decoration: none !important;
-}
-
-//Letter Spacing
-
-.letter-spacing-wide {
-	letter-spacing: $letter-spacing-wide !important;
-}
+// Font family
+
+.font-family-monospace {
+	font-family: $monospace-font-stack !important;
+	-moz-osx-font-smoothing: auto;
+	-webkit-font-smoothing: auto;
+}
+
+.font-family-quote {
+	font-family: $quote-font-stack !important;
+}
+
+// Heading sizes
+
+.font-size-h0 {
+	font-size: $font-size-0 !important;
+}
+
+.font-size-h1 {
+	font-size: $font-size-1 !important;
+}
+
+.font-size-h2 {
+	font-size: $font-size-2 !important;
+}
+
+.font-size-h3 {
+	font-size: $font-size-3 !important;
+}
+
+.font-size-h4 {
+	font-size: $font-size-4 !important;
+}
+
+.font-size-h5 {
+	font-size: $font-size-5 !important;
+}
+
+.font-size-h6 {
+	font-size: $font-size-6 !important;
+}
+
+// Non-heading sizes
+
+.font-size-xl {
+	font-size: $font-size-5 !important;
+}
+
+.font-size-l {
+	font-size: $font-size-6 !important;
+}
+
+.font-size-m {
+	font-size: $font-size-7 !important;
+}
+
+.font-size-s {
+	font-size: $font-size-8 !important;
+}
+
+.font-size-xs {
+	font-size: $font-size-9 !important;
+}
+
+// Weight
+
+.font-weight-light {
+	font-weight: $weight-light !important;
+}
+
+.font-weight-semilight {
+	font-weight: $weight-semilight !important;
+}
+
+.font-weight-normal {
+	font-weight: $weight-normal !important;
+}
+
+.font-weight-semibold {
+	font-weight: $weight-semibold !important;
+}
+
+.font-weight-bold {
+	font-weight: $weight-bold !important;
+}
+
+// Case
+
+.font-style-italic {
+	font-style: italic !important;
+}
+
+.text-decoration-underline {
+	text-decoration: underline !important;
+}
+
+.text-decoration-none {
+	text-decoration: none !important;
+}
+
+//Letter Spacing
+
+.letter-spacing-wide {
+	letter-spacing: $letter-spacing-wide !important;
+}