@microsoft/atlas-css 1.1.0 → 1.2.0

package/src/components/table.scss

@@ -1,67 +1,67 @@
-$table-cell-vertical-padding: $spacer-4 !default;
-$table-cell-horizontal-padding: $spacer-5 !default;
-
-$table-caption-padding: $spacer-6 !default;
-$table-caption-size: $font-size-9 !default;
-$table-caption-spacing: $letter-spacing-medium !default;
-
-.table-wrapper {
-	overflow-x: auto;
-	overflow-y: hidden;
-	-webkit-overflow-scrolling: touch;
-}
-
-.table {
-	width: 100%;
-	font-size: $font-size-8;
-	border-collapse: collapse;
-	table-layout: auto;
-
-	caption {
-		padding: $table-caption-padding;
-		font-size: $table-caption-size;
-		font-weight: $weight-semibold;
-		letter-spacing: $table-caption-spacing;
-		text-align: $user-right;
-		text-transform: uppercase;
-	}
-
-	th,
-	td {
-		display: table-cell;
-		word-wrap: break-word;
-		padding: $table-cell-vertical-padding $table-cell-horizontal-padding;
-		border-top: 1px solid $border;
-		line-height: 1.5;
-		vertical-align: top;
-	}
-
-	thead th {
-		border-top: 0;
-		border-bottom: 1px solid $border;
-	}
-
-	th:not([align]) {
-		text-align: $user-left;
-	}
-
-	&.table-stacked-mobile {
-		@include discouraged-mobile {
-			thead,
-			tfoot {
-				display: none;
-			}
-
-			td {
-				display: block;
-				width: 100%;
-				padding: $table-cell-vertical-padding 0;
-			}
-
-			td:not(:nth-child(1)) {
-				padding-top: 0;
-				border-width: 0;
-			}
-		}
-	}
-}
+$table-cell-vertical-padding: $spacer-4 !default;
+$table-cell-horizontal-padding: $spacer-5 !default;
+
+$table-caption-padding: $spacer-6 !default;
+$table-caption-size: $font-size-9 !default;
+$table-caption-spacing: $letter-spacing-medium !default;
+
+.table-wrapper {
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+
+.table {
+	width: 100%;
+	font-size: $font-size-8;
+	border-collapse: collapse;
+	table-layout: auto;
+
+	caption {
+		padding: $table-caption-padding;
+		font-size: $table-caption-size;
+		font-weight: $weight-semibold;
+		letter-spacing: $table-caption-spacing;
+		text-align: $user-right;
+		text-transform: uppercase;
+	}
+
+	th,
+	td {
+		display: table-cell;
+		word-wrap: break-word;
+		padding: $table-cell-vertical-padding $table-cell-horizontal-padding;
+		border-top: 1px solid $border;
+		line-height: 1.5;
+		vertical-align: top;
+	}
+
+	thead th {
+		border-top: 0;
+		border-bottom: 1px solid $border;
+	}
+
+	th:not([align]) {
+		text-align: $user-left;
+	}
+
+	&.table-stacked-mobile {
+		@include discouraged-mobile {
+			thead,
+			tfoot {
+				display: none;
+			}
+
+			td {
+				display: block;
+				width: 100%;
+				padding: $table-cell-vertical-padding 0;
+			}
+
+			td:not(:nth-child(1)) {
+				padding-top: 0;
+				border-width: 0;
+			}
+		}
+	}
+}

package/src/core/animations.scss

@@ -1,8 +1,8 @@
-@keyframes spinAround {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(359deg);
-	}
-}
+@keyframes spinAround {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(359deg);
+	}
+}

package/src/core/focus.scss

@@ -1,35 +1,35 @@
-@if ($focus-visible-use-polyfill) {
-	.js-focus-visible .has-default-focus *:focus:not(.focus-visible),
-	.js-focus-visible .default-focus *:focus:not(.focus-visible) {
-		outline: none;
-	}
-
-	.focus-visible.has-inner-focus,
-	.focus-visible.inner-focus {
-		outline-offset: -$focus-outline-offset;
-	}
-
-	.has-default-focus,
-	.default-focus {
-		.is-focused,
-		.focus-visible {
-			@extend %focus;
-
-			&.has-inner-focus,
-			&.inner-focus {
-				outline-color: currentColor;
-			}
-		}
-	}
-} @else {
-	.has-default-focus *:focus-visible,
-	.default-focus *:focus-visible {
-		@extend %focus;
-
-		&.has-inner-focus,
-		&.inner-focus {
-			outline-color: currentColor;
-			outline-offset: -$focus-outline-offset;
-		}
-	}
-}
+@if ($focus-visible-use-polyfill) {
+	.js-focus-visible .has-default-focus *:focus:not(.focus-visible),
+	.js-focus-visible .default-focus *:focus:not(.focus-visible) {
+		outline: none;
+	}
+
+	.focus-visible.has-inner-focus,
+	.focus-visible.inner-focus {
+		outline-offset: -$focus-outline-offset;
+	}
+
+	.has-default-focus,
+	.default-focus {
+		.is-focused,
+		.focus-visible {
+			@extend %focus;
+
+			&.has-inner-focus,
+			&.inner-focus {
+				outline-color: currentColor;
+			}
+		}
+	}
+} @else {
+	.has-default-focus *:focus-visible,
+	.default-focus *:focus-visible {
+		@extend %focus;
+
+		&.has-inner-focus,
+		&.inner-focus {
+			outline-color: currentColor;
+			outline-offset: -$focus-outline-offset;
+		}
+	}
+}

package/src/core/font-stack.scss

@@ -1,28 +1,28 @@
-html {
-	font-size: $document-font-size;
-}
-
-html,
-body {
-	font-family: $normal-font-stack;
-	-webkit-font-smoothing: antialiased;
-	font-weight: $weight-normal;
-	text-rendering: optimizeLegibility;
-}
-
-kbd,
-pre,
-samp {
-	font-family: $monospace-font-stack !important;
-	-moz-osx-font-smoothing: auto;
-	-webkit-font-smoothing: auto;
-}
-
-code {
-	direction: ltr;
-	font-family: $monospace-font-stack;
-}
-
-a > code {
-	font-family: $normal-font-stack;
-}
+html {
+	font-size: $document-font-size;
+}
+
+html,
+body {
+	font-family: $normal-font-stack;
+	-webkit-font-smoothing: antialiased;
+	font-weight: $weight-normal;
+	text-rendering: optimizeLegibility;
+}
+
+kbd,
+pre,
+samp {
+	font-family: $monospace-font-stack !important;
+	-moz-osx-font-smoothing: auto;
+	-webkit-font-smoothing: auto;
+}
+
+code {
+	direction: ltr;
+	font-family: $monospace-font-stack;
+}
+
+a > code {
+	font-family: $normal-font-stack;
+}

package/src/core/index.scss

@@ -1,6 +1,6 @@
-@import 'normalize.css';
-@import 'minireset.css';
-@import 'themes.scss';
-@import 'font-stack.scss';
-@import 'animations.scss';
-@import 'focus.scss';
+@import 'normalize.css';
+@import 'minireset.css';
+@import 'themes.scss';
+@import 'font-stack.scss';
+@import 'animations.scss';
+@import 'focus.scss';

package/src/core/themes.scss

@@ -1,86 +1,86 @@
-@use 'sass:map';
-
-$root-theme: 'light' !default;
-$print-theme: 'light' !default;
-
-// Ensure that the root theme exists
-@if map.has-key($themes, $root-theme) != true {
-	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in $themes map.";
-}
-
-// Ensure that the print theme exists
-@if map.has-key($themes, $print-theme) != true {
-	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in $themes map.";
-}
-
-$theme-names: map.keys($themes);
-
-// Validation: ensure that all values in the root theme are in the other themes too
-@each $root-color-name, $val in map.get($themes, $root-theme) {
-	@each $theme-name in $theme-names {
-		@if $theme-name != $root-theme {
-			@if map.has-key(map.get($themes, $theme-name), $root-color-name) != true {
-				@error '#{$root-color-name} from #{$root-theme} does not exist in theme: #{$theme-name}.';
-			}
-		}
-	}
-}
-
-// Validation: ensure all properties in non-root themes exist in root
-@each $theme-name in $theme-names {
-	$theme: map.get($themes, $theme-name);
-	@if $theme-name != $root-theme {
-		$root: map.get($themes, $root-theme);
-		@each $color-name, $val in $theme {
-			@if map.has-key($root, $color-name) != true {
-				@error '#{$color-name} from #{$theme-name} does not exist in theme: #{$theme-name}.';
-			}
-		}
-	}
-}
-
-@each $key, $value in $themes {
-	// Set the default theme
-	@if $key == $root-theme {
-		:root {
-			@each $colorName, $colorVal in map.get($themes, $key) {
-				--theme-#{$colorName}: #{$colorVal};
-			}
-		}
-	}
-
-	@if $key == $print-theme {
-		.theme-#{$key} {
-			@each $colorName, $colorVal in map.get($themes, $key) {
-				--theme-#{$colorName}: #{$colorVal};
-			}
-		}
-	} @else {
-		// Set the rest of the themes, exclude them from print styling.
-		@media not print {
-			.theme-#{$key} {
-				@each $colorName, $colorVal in map-get($themes, $key) {
-					--theme-#{$colorName}: #{$colorVal};
-				}
-			}
-		}
-	}
-}
-
-%theme-base-styles {
-	outline-color: $text;
-	background-color: $body-background;
-	color: $text;
-}
-
-@each $key, $value in $themes {
-	.theme-#{$key} {
-		@extend %theme-base-styles;
-	}
-}
-
-@each $key, $value in $color-schemes {
-	.theme-#{$key} {
-		color-scheme: #{$value};
-	}
-}
+@use 'sass:map';
+
+$root-theme: 'light' !default;
+$print-theme: 'light' !default;
+
+// Ensure that the root theme exists
+@if map.has-key($themes, $root-theme) != true {
+	@error "Cannot build themes because $root-theme (#{$root-theme}) is set to a theme that does not exist in $themes map.";
+}
+
+// Ensure that the print theme exists
+@if map.has-key($themes, $print-theme) != true {
+	@error "Cannot build themes because $print-theme (#{$print-theme}) is set to a theme that does not exist in $themes map.";
+}
+
+$theme-names: map.keys($themes);
+
+// Validation: ensure that all values in the root theme are in the other themes too
+@each $root-color-name, $val in map.get($themes, $root-theme) {
+	@each $theme-name in $theme-names {
+		@if $theme-name != $root-theme {
+			@if map.has-key(map.get($themes, $theme-name), $root-color-name) != true {
+				@error '#{$root-color-name} from #{$root-theme} does not exist in theme: #{$theme-name}.';
+			}
+		}
+	}
+}
+
+// Validation: ensure all properties in non-root themes exist in root
+@each $theme-name in $theme-names {
+	$theme: map.get($themes, $theme-name);
+	@if $theme-name != $root-theme {
+		$root: map.get($themes, $root-theme);
+		@each $color-name, $val in $theme {
+			@if map.has-key($root, $color-name) != true {
+				@error '#{$color-name} from #{$theme-name} does not exist in theme: #{$theme-name}.';
+			}
+		}
+	}
+}
+
+@each $key, $value in $themes {
+	// Set the default theme
+	@if $key == $root-theme {
+		:root {
+			@each $colorName, $colorVal in map.get($themes, $key) {
+				--theme-#{$colorName}: #{$colorVal};
+			}
+		}
+	}
+
+	@if $key == $print-theme {
+		.theme-#{$key} {
+			@each $colorName, $colorVal in map.get($themes, $key) {
+				--theme-#{$colorName}: #{$colorVal};
+			}
+		}
+	} @else {
+		// Set the rest of the themes, exclude them from print styling.
+		@media not print {
+			.theme-#{$key} {
+				@each $colorName, $colorVal in map-get($themes, $key) {
+					--theme-#{$colorName}: #{$colorVal};
+				}
+			}
+		}
+	}
+}
+
+%theme-base-styles {
+	outline-color: $text;
+	background-color: $body-background;
+	color: $text;
+}
+
+@each $key, $value in $themes {
+	.theme-#{$key} {
+		@extend %theme-base-styles;
+	}
+}
+
+@each $key, $value in $color-schemes {
+	.theme-#{$key} {
+		color-scheme: #{$value};
+	}
+}