@microsoft/atlas-css 3.43.0 → 3.44.0

package/src/components/table.scss

@@ -1,114 +1,114 @@
-$table-cell-vertical-padding: $spacer-5 !default;
-$table-cell-horizontal-padding: $spacer-6 !default;
-$table-cell-padding-compact: $spacer-3 !default;
-$table-cell-padding-loose: $spacer-8 !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;
-
-	&:not(.table-simple) {
-		border: 1px solid $table-border-dark;
-	}
-
-	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-block-start: 1px solid $table-border-dark;
-		line-height: 1.5;
-		vertical-align: top;
-	}
-
-	th:not([align]) {
-		text-align: $user-left;
-	}
-
-	&.table-stacked-mobile {
-		@include discouraged-mobile {
-			th,
-			td {
-				display: block;
-				width: 100%;
-			}
-
-			th:not(:nth-child(1)),
-			td:not(:nth-child(1)) {
-				padding-block-start: 0;
-				border-width: 0;
-			}
-
-			thead tr:nth-child(1) th,
-			tbody tr:nth-child(1) td {
-				border-block-start: none;
-			}
-
-			thead tr > th:last-child {
-				border-block-end: 1px solid $table-border-dark;
-			}
-		}
-	}
-
-	&.table-borderless {
-		border: none;
-
-		th,
-		td {
-			border: none;
-		}
-	}
-
-	&.table-complex {
-		thead tr,
-		tfoot tr {
-			background-color: $table-header;
-		}
-
-		th,
-		td {
-			border: 1px solid $table-border-dark;
-		}
-	}
-
-	&.table-striped {
-		tbody tr:nth-of-type(even) {
-			background-color: $table-row;
-		}
-	}
-
-	&.table-sm {
-		th,
-		td {
-			padding: $table-cell-padding-compact;
-		}
-	}
-
-	&.table-lg {
-		th,
-		td {
-			padding: $table-cell-padding-loose;
-		}
-	}
-}
+$table-cell-vertical-padding: $spacer-5 !default;
+$table-cell-horizontal-padding: $spacer-6 !default;
+$table-cell-padding-compact: $spacer-3 !default;
+$table-cell-padding-loose: $spacer-8 !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;
+
+	&:not(.table-simple) {
+		border: 1px solid $table-border-dark;
+	}
+
+	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-block-start: 1px solid $table-border-dark;
+		line-height: 1.5;
+		vertical-align: top;
+	}
+
+	th:not([align]) {
+		text-align: $user-left;
+	}
+
+	&.table-stacked-mobile {
+		@include discouraged-mobile {
+			th,
+			td {
+				display: block;
+				width: 100%;
+			}
+
+			th:not(:nth-child(1)),
+			td:not(:nth-child(1)) {
+				padding-block-start: 0;
+				border-width: 0;
+			}
+
+			thead tr:nth-child(1) th,
+			tbody tr:nth-child(1) td {
+				border-block-start: none;
+			}
+
+			thead tr > th:last-child {
+				border-block-end: 1px solid $table-border-dark;
+			}
+		}
+	}
+
+	&.table-borderless {
+		border: none;
+
+		th,
+		td {
+			border: none;
+		}
+	}
+
+	&.table-complex {
+		thead tr,
+		tfoot tr {
+			background-color: $table-header;
+		}
+
+		th,
+		td {
+			border: 1px solid $table-border-dark;
+		}
+	}
+
+	&.table-striped {
+		tbody tr:nth-of-type(even) {
+			background-color: $table-row;
+		}
+	}
+
+	&.table-sm {
+		th,
+		td {
+			padding: $table-cell-padding-compact;
+		}
+	}
+
+	&.table-lg {
+		th,
+		td {
+			padding: $table-cell-padding-loose;
+		}
+	}
+}

package/src/components/toggle.scss

@@ -1,86 +1,86 @@
-$toggle-transition: $input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
-$toggle-circle-size: 0.75em !default;
-$toggle-circle-top: 0.1875em !default;
-$toggle-circle-distance-from-border: 1em - $toggle-circle-size;
-
-$toggle-unselected-circle-color: $text-subtle !default;
-$toggle-unselected-border-color: $text-subtle !default;
-$toggle-unselected-background-color: $body-background !default;
-$toggle-selected-background-color: $primary !default;
-$toggle-circle-selected-background-color: $body-background !default;
-
-.toggle {
-	label {
-		display: block;
-		position: relative;
-		width: 2.5em;
-		height: 1.25em;
-		transition: $input-transition-duration linear;
-		transition-property: background-color, border-color;
-		border: 0.065em solid $toggle-unselected-border-color;
-		border-radius: $border-radius-rounded;
-		background-color: $toggle-unselected-background-color;
-		cursor: pointer;
-
-		@include forced-colors {
-			border-color: CanvasText !important;
-			background-color: Canvas !important;
-		}
-
-		&::after {
-			display: block;
-			position: absolute;
-			width: $toggle-circle-size;
-			height: $toggle-circle-size;
-			transition: $toggle-transition;
-			transition-property: inset-inline-start, border-color, background-color;
-			border-radius: $border-radius-rounded;
-			inset-block-start: $toggle-circle-top;
-			inset-inline-start: $toggle-circle-distance-from-border;
-			background-color: $toggle-unselected-circle-color;
-			content: '';
-
-			@include forced-colors {
-				background-color: CanvasText !important;
-			}
-		}
-	}
-
-	/* stylelint-disable -- want to keep [type="checkbox"] as a requirement here  */
-	&.is-selected label,
-	input[type='checkbox']:checked + label {
-		/* stylelint-enable */
-		border-color: $toggle-selected-background-color;
-		background-color: $toggle-selected-background-color;
-
-		@include forced-colors {
-			border-color: LinkText !important;
-			background-color: LinkText !important;
-		}
-
-		&::after {
-			background-color: $toggle-circle-selected-background-color;
-			inset-inline-start: calc(100% - ($toggle-circle-distance-from-border + $toggle-circle-size));
-
-			@include forced-colors {
-				background-color: Canvas !important;
-			}
-		}
-	}
-
-	/* stylelint-disable-next-line -- want to keep [type="checkbox"] as a requirement here */
-	input[type='checkbox'] {
-		@include visually-hidden();
-
-		@include focus-visible() {
-			+ label {
-				@extend %focus;
-			}
-		}
-
-		&:disabled + label {
-			opacity: 0.6;
-			cursor: not-allowed;
-		}
-	}
-}
+$toggle-transition: $input-transition-duration cubic-bezier(0.01, 1.23, 0.58, 0.96) !default;
+$toggle-circle-size: 0.75em !default;
+$toggle-circle-top: 0.1875em !default;
+$toggle-circle-distance-from-border: 1em - $toggle-circle-size;
+
+$toggle-unselected-circle-color: $text-subtle !default;
+$toggle-unselected-border-color: $text-subtle !default;
+$toggle-unselected-background-color: $body-background !default;
+$toggle-selected-background-color: $primary !default;
+$toggle-circle-selected-background-color: $body-background !default;
+
+.toggle {
+	label {
+		display: block;
+		position: relative;
+		width: 2.5em;
+		height: 1.25em;
+		transition: $input-transition-duration linear;
+		transition-property: background-color, border-color;
+		border: 0.065em solid $toggle-unselected-border-color;
+		border-radius: $border-radius-rounded;
+		background-color: $toggle-unselected-background-color;
+		cursor: pointer;
+
+		@include forced-colors {
+			border-color: CanvasText !important;
+			background-color: Canvas !important;
+		}
+
+		&::after {
+			display: block;
+			position: absolute;
+			width: $toggle-circle-size;
+			height: $toggle-circle-size;
+			transition: $toggle-transition;
+			transition-property: inset-inline-start, border-color, background-color;
+			border-radius: $border-radius-rounded;
+			inset-block-start: $toggle-circle-top;
+			inset-inline-start: $toggle-circle-distance-from-border;
+			background-color: $toggle-unselected-circle-color;
+			content: '';
+
+			@include forced-colors {
+				background-color: CanvasText !important;
+			}
+		}
+	}
+
+	/* stylelint-disable -- want to keep [type="checkbox"] as a requirement here  */
+	&.is-selected label,
+	input[type='checkbox']:checked + label {
+		/* stylelint-enable */
+		border-color: $toggle-selected-background-color;
+		background-color: $toggle-selected-background-color;
+
+		@include forced-colors {
+			border-color: LinkText !important;
+			background-color: LinkText !important;
+		}
+
+		&::after {
+			background-color: $toggle-circle-selected-background-color;
+			inset-inline-start: calc(100% - ($toggle-circle-distance-from-border + $toggle-circle-size));
+
+			@include forced-colors {
+				background-color: Canvas !important;
+			}
+		}
+	}
+
+	/* stylelint-disable-next-line -- want to keep [type="checkbox"] as a requirement here */
+	input[type='checkbox'] {
+		@include visually-hidden();
+
+		@include focus-visible() {
+			+ label {
+				@extend %focus;
+			}
+		}
+
+		&:disabled + label {
+			opacity: 0.6;
+			cursor: not-allowed;
+		}
+	}
+}

package/src/core/animations.scss

@@ -1,55 +1,55 @@
-// stylelint-disable-next-line keyframes-name-pattern
-@keyframes spinAround {
-	// make it stop
-
-	from {
-		transform: rotate(0deg);
-	}
-
-	to {
-		transform: rotate(359deg);
-	}
-}
-
-@keyframes boop {
-	0% {
-		transform: scale(1);
-	}
-
-	50% {
-		transform: scale(1.1);
-	}
-
-	100% {
-		transform: scale(1);
-	}
-}
-
-@keyframes slide-up-fade-out {
-	100% {
-		transform: translateY(-100%);
-		opacity: 0;
-	}
-}
-
-@keyframes fade-out {
-	100% {
-		opacity: 0;
-	}
-}
-
-.animation-fade {
-	animation: fade-out 0.4s ease-in forwards;
-
-	@include prefers-reduced-motion {
-		animation-duration: 0s;
-	}
-}
-
-.animation-slide-up {
-	animation: slide-up-fade-out 0.4s ease-in forwards;
-
-	@include prefers-reduced-motion {
-		animation-duration: 0s;
-	}
-}
+// stylelint-disable-next-line keyframes-name-pattern
+@keyframes spinAround {
+	// make it stop
+
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(359deg);
+	}
+}
+
+@keyframes boop {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.1);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes slide-up-fade-out {
+	100% {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+
+@keyframes fade-out {
+	100% {
+		opacity: 0;
+	}
+}
+
+.animation-fade {
+	animation: fade-out 0.4s ease-in forwards;
+
+	@include prefers-reduced-motion {
+		animation-duration: 0s;
+	}
+}
+
+.animation-slide-up {
+	animation: slide-up-fade-out 0.4s ease-in forwards;
+
+	@include prefers-reduced-motion {
+		animation-duration: 0s;
+	}
+}

package/src/core/bare-elements.scss

@@ -1,38 +1,38 @@
-// https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
-
-details,
-details > * {
-	box-sizing: border-box !important;
-}
-
-:where(html *),
-:where(html a),
-:where(html li) {
-	// include a,li {} to override css reset/normalize; this is causing .focus-visible color issues
-	outline-color: inherit;
-}
-
-:where(a) {
-	color: $hyperlink;
-	text-decoration: none;
-	cursor: pointer;
-	word-wrap: break-word;
-}
-
-:where(a:hover) {
-	color: $primary-hover;
-	text-decoration: underline;
-}
-
-:where(a:visited) {
-	color: $visited;
-}
-
-fieldset {
-	min-width: 0; // as a replaced element min-width:0 is required to enable it to work in responsive layouts
-	border: none;
-}
-
-::target-text {
-	background-color: $code-highlight-background;
-}
+// https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
+
+details,
+details > * {
+	box-sizing: border-box !important;
+}
+
+:where(html *),
+:where(html a),
+:where(html li) {
+	// include a,li {} to override css reset/normalize; this is causing .focus-visible color issues
+	outline-color: inherit;
+}
+
+:where(a) {
+	color: $hyperlink;
+	text-decoration: none;
+	cursor: pointer;
+	word-wrap: break-word;
+}
+
+:where(a:hover) {
+	color: $primary-hover;
+	text-decoration: underline;
+}
+
+:where(a:visited) {
+	color: $visited;
+}
+
+fieldset {
+	min-width: 0; // as a replaced element min-width:0 is required to enable it to work in responsive layouts
+	border: none;
+}
+
+::target-text {
+	background-color: $code-highlight-background;
+}

package/src/core/focus.scss

@@ -1,45 +1,45 @@
-@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;
-		}
-	}
-}
-
-:where(.is-focused) {
-	@extend %focus;
-
-	&.has-inner-focus,
-	&.inner-focus {
-		outline-color: currentColor;
-		outline-offset: -$focus-width;
-	}
-}
+@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;
+		}
+	}
+}
+
+:where(.is-focused) {
+	@extend %focus;
+
+	&.has-inner-focus,
+	&.inner-focus {
+		outline-color: currentColor;
+		outline-offset: -$focus-width;
+	}
+}