@microsoft/atlas-css 1.2.0 → 1.3.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-width;
+	}
+
+	.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-width;
+		}
+	}
+}

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};
+	}
+}

package/src/index.scss

@@ -1,6 +1,6 @@
-@import './tokens/index.scss';
-@import './mixins/index.scss';
-@import './core/index.scss';
-@import './components/index.scss';
-@import './patterns/index.scss';
-@import './atomics/index.scss';
+@import './tokens/index.scss';
+@import './mixins/index.scss';
+@import './core/index.scss';
+@import './components/index.scss';
+@import './patterns/index.scss';
+@import './atomics/index.scss';

package/src/mixins/center.scss

@@ -1,11 +1,11 @@
-@mixin center($width, $height: 0) {
-	position: absolute;
-
-	@if $height != 0 {
-		top: calc(50% - (#{$height} / 2));
-		left: calc(50% - (#{$width} / 2));
-	} @else {
-		top: calc(50% - (#{$width} / 2));
-		left: calc(50% - (#{$width} / 2));
-	}
-}
+@mixin center($width, $height: 0) {
+	position: absolute;
+
+	@if $height != 0 {
+		top: calc(50% - (#{$height} / 2));
+		left: calc(50% - (#{$width} / 2));
+	} @else {
+		top: calc(50% - (#{$width} / 2));
+		left: calc(50% - (#{$width} / 2));
+	}
+}

package/src/mixins/code-block.scss

@@ -1,43 +1,43 @@
-$code-font-size: $font-size-8 !default;
-$code-block-spacing: 1em !default;
-$code-header-body-line-height: 1.3571 !default;
-
-@mixin code-block {
-	pre {
-		box-sizing: border-box;
-		max-width: 100%;
-		margin: 0;
-		padding: $code-block-spacing;
-		border: 1px solid $border;
-		background-color: $code-block;
-		font-size: $code-font-size;
-		-moz-osx-font-smoothing: auto;
-		-webkit-font-smoothing: auto;
-		line-height: 1.3571;
-		white-space: pre;
-		word-spacing: normal;
-		overflow: auto;
-		word-break: normal;
-		word-wrap: normal;
-		tab-size: 4;
-		hyphens: none;
-		-webkit-overflow-scrolling: touch;
-
-		> code {
-			display: block;
-			position: relative;
-			padding: 0;
-			border: 0;
-			line-height: $code-header-body-line-height;
-
-			mark {
-				display: inline-block;
-				min-width: calc(100% + #{$code-block-spacing} + #{$code-block-spacing});
-				min-height: 18.9px; // Allow for highlighting of blank lines.
-				margin: 0 $code-block-spacing * -1;
-				padding: 0 $code-block-spacing;
-				color: $text;
-			}
-		}
-	}
-}
+$code-font-size: $font-size-8 !default;
+$code-block-spacing: 1em !default;
+$code-header-body-line-height: 1.3571 !default;
+
+@mixin code-block {
+	pre {
+		box-sizing: border-box;
+		max-width: 100%;
+		margin: 0;
+		padding: $code-block-spacing;
+		border: 1px solid $border;
+		background-color: $code-block;
+		font-size: $code-font-size;
+		-moz-osx-font-smoothing: auto;
+		-webkit-font-smoothing: auto;
+		line-height: 1.3571;
+		white-space: pre;
+		word-spacing: normal;
+		overflow: auto;
+		word-break: normal;
+		word-wrap: normal;
+		tab-size: 4;
+		hyphens: none;
+		-webkit-overflow-scrolling: touch;
+
+		> code {
+			display: block;
+			position: relative;
+			padding: 0;
+			border: 0;
+			line-height: $code-header-body-line-height;
+
+			mark {
+				display: inline-block;
+				min-width: calc(100% + #{$code-block-spacing} + #{$code-block-spacing});
+				min-height: 18.9px; // Allow for highlighting of blank lines.
+				margin: 0 $code-block-spacing * -1;
+				padding: 0 $code-block-spacing;
+				color: $text;
+			}
+		}
+	}
+}

package/src/mixins/control.scss

@@ -1,44 +1,44 @@
-$control-radius: $radius !default;
-$control-radius-small: $radius-small !default;
-
-$control-font-size: $font-size-7 !default;
-$control-border-width: 1px !default;
-
-$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
-$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
-
-%control {
-	display: inline-flex;
-	position: relative;
-	align-items: center;
-	justify-content: flex-start;
-	height: 2.25em;
-	padding-top: $control-padding-vertical;
-	padding-right: $control-padding-horizontal;
-	padding-bottom: $control-padding-vertical;
-	padding-left: $control-padding-horizontal;
-	border: $control-border-width solid transparent;
-	border-radius: $control-radius;
-	font-size: $control-font-size;
-	line-height: 1.5;
-	appearance: none;
-	box-shadow: none;
-	vertical-align: top;
-
-	&[disabled] {
-		cursor: not-allowed;
-	}
-}
-
-@mixin control {
-	@extend %control;
-}
-
-@mixin control-small {
-	border-radius: $control-radius-small;
-	font-size: $font-size-small;
-}
-
-@mixin control-large {
-	font-size: $font-size-large;
-}
+$control-radius: $radius !default;
+$control-radius-small: $radius-small !default;
+
+$control-font-size: $font-size-7 !default;
+$control-border-width: 1px !default;
+
+$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
+$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
+
+%control {
+	display: inline-flex;
+	position: relative;
+	align-items: center;
+	justify-content: flex-start;
+	height: 2.25em;
+	padding-top: $control-padding-vertical;
+	padding-right: $control-padding-horizontal;
+	padding-bottom: $control-padding-vertical;
+	padding-left: $control-padding-horizontal;
+	border: $control-border-width solid transparent;
+	border-radius: $control-radius;
+	font-size: $control-font-size;
+	line-height: 1.5;
+	appearance: none;
+	box-shadow: none;
+	vertical-align: top;
+
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
+@mixin control {
+	@extend %control;
+}
+
+@mixin control-small {
+	border-radius: $control-radius-small;
+	font-size: $font-size-small;
+}
+
+@mixin control-large {
+	font-size: $font-size-large;
+}