@microsoft/atlas-css 3.43.0 → 3.44.0

package/src/components/notification.scss

@@ -1,101 +1,101 @@
-$notification-background: $secondary-background !default;
-$notification-padding: $spacer-5 !default;
-
-$notification-font-size: $font-size-7 !default;
-$notification-color: $text !default;
-
-$notification-border-color: $control-border !default;
-$notification-border-width: $border-width !default;
-$notification-border-radius: $border-radius !default;
-
-$notification-icon-inline-spacing: 0.375em !default;
-$notification-icon-block-spacing: 0.2em !default;
-
-$notification-dismiss-margin: $spacer-2 !default;
-
-.notification {
-	display: grid;
-	position: relative;
-	padding: $notification-padding;
-	grid-template: auto / 1fr auto;
-	grid-template-areas: 'notification-content dismiss';
-	border: $notification-border-width solid $notification-border-color;
-	border-radius: $notification-border-radius;
-	outline-color: $text;
-	background-color: $notification-background;
-	color: $notification-color;
-	font-size: $notification-font-size;
-	line-height: $line-height-normal;
-	word-wrap: break-word;
-	word-break: break-word;
-
-	@each $name, $color-set in $colors {
-		$base: nth($color-set, $color-index-base);
-		$dark: nth($color-set, $color-index-dark);
-		$background: nth($color-set, $color-index-background);
-
-		&.notification-#{$name} {
-			border-color: $dark;
-			background-color: $background;
-			color: $dark;
-
-			&.is-loading::before {
-				border-color: transparent transparent $dark $dark;
-			}
-		}
-	}
-
-	&.is-loading {
-		color: transparent;
-
-		> :first-child {
-			margin-inline-start: calc($notification-padding + 0.375em);
-		}
-
-		&::before {
-			@include loader;
-
-			position: absolute;
-			inset-block-start: $notification-padding;
-			inset-inline-start: $notification-padding;
-			border-color: transparent transparent $notification-color $notification-color;
-		}
-	}
-
-	.notification-content {
-		grid-area: notification-content;
-
-		.notification-title,
-		a:not(.button) {
-			color: currentColor;
-			font-weight: $weight-semibold;
-		}
-
-		a:not(.button) {
-			.theme-high-contrast & {
-				color: $hyperlink;
-			}
-		}
-
-		.notification-title {
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			margin-block-end: $layout-1;
-
-			.icon {
-				flex-shrink: 0;
-				align-self: start;
-				margin-inline-end: $notification-icon-inline-spacing;
-				margin-block-start: $notification-icon-block-spacing;
-			}
-		}
-	}
-
-	.notification-dismiss {
-		@include dismiss-square;
-
-		grid-area: dismiss;
-		margin-inline-start: $notification-dismiss-margin;
-	}
-}
+$notification-background: $secondary-background !default;
+$notification-padding: $spacer-5 !default;
+
+$notification-font-size: $font-size-7 !default;
+$notification-color: $text !default;
+
+$notification-border-color: $control-border !default;
+$notification-border-width: $border-width !default;
+$notification-border-radius: $border-radius !default;
+
+$notification-icon-inline-spacing: 0.375em !default;
+$notification-icon-block-spacing: 0.2em !default;
+
+$notification-dismiss-margin: $spacer-2 !default;
+
+.notification {
+	display: grid;
+	position: relative;
+	padding: $notification-padding;
+	grid-template: auto / 1fr auto;
+	grid-template-areas: 'notification-content dismiss';
+	border: $notification-border-width solid $notification-border-color;
+	border-radius: $notification-border-radius;
+	outline-color: $text;
+	background-color: $notification-background;
+	color: $notification-color;
+	font-size: $notification-font-size;
+	line-height: $line-height-normal;
+	word-wrap: break-word;
+	word-break: break-word;
+
+	@each $name, $color-set in $colors {
+		$base: nth($color-set, $color-index-base);
+		$dark: nth($color-set, $color-index-dark);
+		$background: nth($color-set, $color-index-background);
+
+		&.notification-#{$name} {
+			border-color: $dark;
+			background-color: $background;
+			color: $dark;
+
+			&.is-loading::before {
+				border-color: transparent transparent $dark $dark;
+			}
+		}
+	}
+
+	&.is-loading {
+		color: transparent;
+
+		> :first-child {
+			margin-inline-start: calc($notification-padding + 0.375em);
+		}
+
+		&::before {
+			@include loader;
+
+			position: absolute;
+			inset-block-start: $notification-padding;
+			inset-inline-start: $notification-padding;
+			border-color: transparent transparent $notification-color $notification-color;
+		}
+	}
+
+	.notification-content {
+		grid-area: notification-content;
+
+		.notification-title,
+		a:not(.button) {
+			color: currentColor;
+			font-weight: $weight-semibold;
+		}
+
+		a:not(.button) {
+			.theme-high-contrast & {
+				color: $hyperlink;
+			}
+		}
+
+		.notification-title {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			margin-block-end: $layout-1;
+
+			.icon {
+				flex-shrink: 0;
+				align-self: start;
+				margin-inline-end: $notification-icon-inline-spacing;
+				margin-block-start: $notification-icon-block-spacing;
+			}
+		}
+	}
+
+	.notification-dismiss {
+		@include dismiss-square;
+
+		grid-area: dismiss;
+		margin-inline-start: $notification-dismiss-margin;
+	}
+}

package/src/components/pagination.scss

@@ -1,183 +1,183 @@
-$font-size-lg: $font-size-6 !default;
-$font-size-sm: $font-size-8 !default;
-
-$pagination-color: $text !default;
-$pagination-border-color: $border !default;
-$pagination-margin: 0.25rem !default;
-
-$pagination-hover-color: $primary-hover !default;
-$pagination-hover-border-color: $primary-hover !default;
-
-$pagination-focus-color: $primary-active !default;
-$pagination-focus-border-color: $primary-active !default;
-
-$pagination-active-color: $primary-active !default;
-$pagination-active-border-color: $primary-active !default;
-
-$pagination-disabled-color: $secondary !default;
-$pagination-disabled-background-color: $secondary-background !default;
-$pagination-disabled-border-color: $secondary-background !default;
-
-$pagination-current-color: $text-invert !default;
-$pagination-current-background-color: $primary !default;
-$pagination-current-background-color-hover: $primary-hover !default;
-$pagination-current-border-color: $text-invert !default;
-
-$pagination-ellipsis-color: $secondary-background !default;
-
-$pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
-
-.pagination {
-	flex-wrap: wrap;
-	margin: -$pagination-margin;
-}
-
-.pagination-list {
-	flex-grow: 1;
-}
-
-.pagination,
-.pagination-list {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0;
-	text-align: center;
-
-	> li {
-		margin: $pagination-margin;
-		list-style: none !important; //specificity battle
-	}
-}
-
-.pagination-link {
-	&.is-current {
-		border-color: $pagination-current-border-color;
-		background-color: $pagination-current-background-color;
-		color: $pagination-current-color;
-
-		&:hover {
-			background-color: $pagination-current-background-color-hover;
-			color: $pagination-current-color;
-		}
-	}
-
-	@include forced-colors {
-		&::after {
-			display: block;
-			position: absolute;
-			width: 0.375em;
-			height: 0.375em;
-			border: 1px solid LinkText;
-			border-radius: $border-radius-rounded;
-			background-color: LinkText;
-			content: '';
-			inset-block-start: 0.25em;
-			inset-inline-end: 0.25em;
-			forced-color-adjust: none;
-		}
-	}
-}
-
-.pagination-ellipsis {
-	color: $pagination-ellipsis-color;
-	pointer-events: none;
-}
-
-.pagination-previous,
-.pagination-next {
-	flex-grow: 0;
-	flex-shrink: 1;
-	padding-inline: 0.75em;
-	white-space: nowrap;
-}
-
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
-	@include control;
-	@include unselectable;
-	@include transparent-effects;
-
-	justify-content: center;
-	font-size: 1em;
-	padding-inline: 0.5em;
-	text-align: center;
-}
-
-.pagination-previous,
-.pagination-next,
-.pagination-link {
-	min-width: 2.25em;
-	border-color: $pagination-border-color;
-	color: $pagination-color;
-	text-decoration: none;
-
-	&:hover {
-		border-color: $pagination-hover-border-color;
-		color: $pagination-hover-color;
-		text-decoration: none;
-	}
-
-	&[disabled] {
-		border-color: $pagination-disabled-border-color;
-		background-color: $pagination-disabled-background-color;
-		opacity: 0.5;
-		color: $pagination-disabled-color;
-		pointer-events: none;
-	}
-}
-
-.pagination-center {
-	@include orientation-landscape {
-		.pagination-previous {
-			order: 1;
-		}
-
-		.pagination-list {
-			justify-content: center;
-			order: 2;
-		}
-
-		.pagination-next {
-			order: 3;
-		}
-	}
-}
-
-@include tablet {
-	.pagination-list {
-		flex-grow: 0;
-		flex-shrink: 1;
-		justify-content: flex-start;
-		order: 1;
-	}
-
-	.pagination-previous {
-		order: 2;
-	}
-
-	.pagination-next {
-		order: 3;
-	}
-
-	.pagination {
-		justify-content: center;
-
-		&.pagination-center {
-			.pagination-previous {
-				order: 1;
-			}
-
-			.pagination-list {
-				justify-content: center;
-				order: 2;
-			}
-
-			.pagination-next {
-				order: 3;
-			}
-		}
-	}
-}
+$font-size-lg: $font-size-6 !default;
+$font-size-sm: $font-size-8 !default;
+
+$pagination-color: $text !default;
+$pagination-border-color: $border !default;
+$pagination-margin: 0.25rem !default;
+
+$pagination-hover-color: $primary-hover !default;
+$pagination-hover-border-color: $primary-hover !default;
+
+$pagination-focus-color: $primary-active !default;
+$pagination-focus-border-color: $primary-active !default;
+
+$pagination-active-color: $primary-active !default;
+$pagination-active-border-color: $primary-active !default;
+
+$pagination-disabled-color: $secondary !default;
+$pagination-disabled-background-color: $secondary-background !default;
+$pagination-disabled-border-color: $secondary-background !default;
+
+$pagination-current-color: $text-invert !default;
+$pagination-current-background-color: $primary !default;
+$pagination-current-background-color-hover: $primary-hover !default;
+$pagination-current-border-color: $text-invert !default;
+
+$pagination-ellipsis-color: $secondary-background !default;
+
+$pagination-shadow-inset: inset 0 1px 2px $box-shadow-color-light;
+
+.pagination {
+	flex-wrap: wrap;
+	margin: -$pagination-margin;
+}
+
+.pagination-list {
+	flex-grow: 1;
+}
+
+.pagination,
+.pagination-list {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 0;
+	text-align: center;
+
+	> li {
+		margin: $pagination-margin;
+		list-style: none !important; //specificity battle
+	}
+}
+
+.pagination-link {
+	&.is-current {
+		border-color: $pagination-current-border-color;
+		background-color: $pagination-current-background-color;
+		color: $pagination-current-color;
+
+		&:hover {
+			background-color: $pagination-current-background-color-hover;
+			color: $pagination-current-color;
+		}
+	}
+
+	@include forced-colors {
+		&::after {
+			display: block;
+			position: absolute;
+			width: 0.375em;
+			height: 0.375em;
+			border: 1px solid LinkText;
+			border-radius: $border-radius-rounded;
+			background-color: LinkText;
+			content: '';
+			inset-block-start: 0.25em;
+			inset-inline-end: 0.25em;
+			forced-color-adjust: none;
+		}
+	}
+}
+
+.pagination-ellipsis {
+	color: $pagination-ellipsis-color;
+	pointer-events: none;
+}
+
+.pagination-previous,
+.pagination-next {
+	flex-grow: 0;
+	flex-shrink: 1;
+	padding-inline: 0.75em;
+	white-space: nowrap;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis {
+	@include control;
+	@include unselectable;
+	@include transparent-effects;
+
+	justify-content: center;
+	font-size: 1em;
+	padding-inline: 0.5em;
+	text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+	min-width: 2.25em;
+	border-color: $pagination-border-color;
+	color: $pagination-color;
+	text-decoration: none;
+
+	&:hover {
+		border-color: $pagination-hover-border-color;
+		color: $pagination-hover-color;
+		text-decoration: none;
+	}
+
+	&[disabled] {
+		border-color: $pagination-disabled-border-color;
+		background-color: $pagination-disabled-background-color;
+		opacity: 0.5;
+		color: $pagination-disabled-color;
+		pointer-events: none;
+	}
+}
+
+.pagination-center {
+	@include orientation-landscape {
+		.pagination-previous {
+			order: 1;
+		}
+
+		.pagination-list {
+			justify-content: center;
+			order: 2;
+		}
+
+		.pagination-next {
+			order: 3;
+		}
+	}
+}
+
+@include tablet {
+	.pagination-list {
+		flex-grow: 0;
+		flex-shrink: 1;
+		justify-content: flex-start;
+		order: 1;
+	}
+
+	.pagination-previous {
+		order: 2;
+	}
+
+	.pagination-next {
+		order: 3;
+	}
+
+	.pagination {
+		justify-content: center;
+
+		&.pagination-center {
+			.pagination-previous {
+				order: 1;
+			}
+
+			.pagination-list {
+				justify-content: center;
+				order: 2;
+			}
+
+			.pagination-next {
+				order: 3;
+			}
+		}
+	}
+}

package/src/components/persona.scss

@@ -1,60 +1,60 @@
-$persona-font-size-sm: $font-size-9 !default;
-$persona-font-size-md: $font-size-8 !default;
-$persona-font-size-lg: $font-size-7 !default;
-
-$persona-avatar-background-color: $alternate-background-medium !default;
-$persona-avatar-font-color: $text-invert !default;
-$persona-avatar-border-radius: $border-radius-rounded;
-
-$persona-details-font-color: $text-subtle !default;
-$persona-name-font-size: $font-size-7 !default;
-$persona-name-font-color: $text !default;
-$persona-name-font-weight: $weight-semibold !default;
-
-$persona-gap-size: $layout-1 !default;
-
-.persona {
-	display: flex;
-	position: relative;
-	gap: $persona-gap-size;
-	font-size: $persona-font-size-md;
-	line-height: $line-height-normal;
-
-	.persona-avatar {
-		flex-shrink: 0;
-		width: 2.6666em;
-		height: 2.6666em;
-		border-radius: $persona-avatar-border-radius;
-		background-color: $persona-avatar-background-color;
-		color: $persona-avatar-font-color;
-
-		img,
-		svg {
-			width: 100%;
-			height: auto;
-			border-radius: $persona-avatar-border-radius;
-			aspect-ratio: 1 / 1;
-		}
-	}
-
-	.persona-details {
-		align-self: center;
-		color: $persona-details-font-color;
-
-		.persona-name {
-			color: $persona-name-font-color;
-			font-size: 1.3333em;
-			font-weight: $persona-name-font-weight;
-		}
-	}
-
-	// Sizes
-
-	&.persona-sm {
-		font-size: $persona-font-size-sm;
-	}
-
-	&.persona-lg {
-		font-size: $persona-font-size-lg;
-	}
-}
+$persona-font-size-sm: $font-size-9 !default;
+$persona-font-size-md: $font-size-8 !default;
+$persona-font-size-lg: $font-size-7 !default;
+
+$persona-avatar-background-color: $alternate-background-medium !default;
+$persona-avatar-font-color: $text-invert !default;
+$persona-avatar-border-radius: $border-radius-rounded;
+
+$persona-details-font-color: $text-subtle !default;
+$persona-name-font-size: $font-size-7 !default;
+$persona-name-font-color: $text !default;
+$persona-name-font-weight: $weight-semibold !default;
+
+$persona-gap-size: $layout-1 !default;
+
+.persona {
+	display: flex;
+	position: relative;
+	gap: $persona-gap-size;
+	font-size: $persona-font-size-md;
+	line-height: $line-height-normal;
+
+	.persona-avatar {
+		flex-shrink: 0;
+		width: 2.6666em;
+		height: 2.6666em;
+		border-radius: $persona-avatar-border-radius;
+		background-color: $persona-avatar-background-color;
+		color: $persona-avatar-font-color;
+
+		img,
+		svg {
+			width: 100%;
+			height: auto;
+			border-radius: $persona-avatar-border-radius;
+			aspect-ratio: 1 / 1;
+		}
+	}
+
+	.persona-details {
+		align-self: center;
+		color: $persona-details-font-color;
+
+		.persona-name {
+			color: $persona-name-font-color;
+			font-size: 1.3333em;
+			font-weight: $persona-name-font-weight;
+		}
+	}
+
+	// Sizes
+
+	&.persona-sm {
+		font-size: $persona-font-size-sm;
+	}
+
+	&.persona-lg {
+		font-size: $persona-font-size-lg;
+	}
+}