@microsoft/atlas-css 3.43.0 → 3.44.1

package/src/components/markdown.scss

@@ -1,158 +1,158 @@
-/* stylelint-disable selector-max-compound-selectors */
-
-$markdown-paragraph-size: 1rem !default;
-$include-bare-code-styles: true !default;
-$list-top-spacing: 1rem !default;
-
-@if $include-bare-code-styles == true {
-	/*
-	* Within projects that desire bare-code styling, you may set the above variable to true and <pre><code>
-	* Elements within .markdown will be styled.
-	*/
-
-	.markdown {
-		@include code-block;
-	}
-}
-
-.markdown {
-	// @include responsive-font-size($markdown-paragraph-size, 0.875rem); // experiment only
-	font-size: $markdown-paragraph-size;
-	line-height: 1.6;
-
-	// Inline code
-
-	:not(a):not(pre) > code {
-		padding: 0.1em 0.2em;
-		border-radius: 3px;
-		background-color: $inline-code;
-		word-wrap: break-word;
-		font-smooth: auto;
-		font-size: 0.85em;
-	}
-
-	img,
-	video {
-		max-width: 100%;
-		height: auto;
-		border: 0;
-	}
-
-	svg:not(:root) {
-		overflow: hidden;
-	}
-
-	li {
-		margin-block-start: 0.5em;
-	}
-
-	ul,
-	ol {
-		margin-inline-start: 2.375rem;
-	}
-
-	ul {
-		list-style-type: disc;
-
-		ul {
-			list-style-type: circle;
-			margin: 0;
-			margin-inline-start: 1.25rem;
-
-			ul {
-				list-style-type: square;
-			}
-		}
-
-		&:not(:first-child) {
-			margin: 1rem 0;
-		}
-	}
-
-	ol {
-		list-style-type: decimal;
-
-		ol {
-			list-style-type: lower-alpha;
-			margin: 0;
-			margin-inline-start: 1.25rem;
-
-			ol {
-				list-style-type: lower-roman;
-			}
-		}
-
-		&:not(:first-child) {
-			margin: 1rem 0;
-		}
-	}
-
-	h1 {
-		@include responsive-font-size($font-size-1);
-
-		margin-block-start: none;
-		margin-block-end: 0.75rem;
-		word-wrap: break-word; // browser support fallback, because FF and IE
-		word-break: break-word;
-
-		&:first-of-type {
-			margin-block-start: -0.625rem;
-			margin-block-end: none;
-		}
-	}
-
-	h2 {
-		@include responsive-font-size($font-size-2);
-
-		margin-block-start: 2rem;
-	}
-
-	h3 {
-		@include responsive-font-size($font-size-3);
-
-		margin-block-start: 1.875rem;
-		margin-block-end: 1.125rem;
-	}
-
-	h4 {
-		@include responsive-font-size($font-size-4);
-
-		margin-block-start: 2.25rem;
-		margin-block-end: 0.375rem;
-	}
-
-	h5 {
-		@include responsive-font-size($font-size-5, false, 1.1rem);
-
-		margin-block-start: 2.25rem;
-		margin-block-end: 0.375rem;
-		letter-spacing: 1px;
-	}
-
-	h6 {
-		@include responsive-font-size($font-size-6, false, 1.05rem);
-
-		margin-block-start: 2.25rem;
-		margin-block-end: 0.375rem;
-		letter-spacing: 1px;
-	}
-
-	p {
-		margin-block-start: $markdown-paragraph-size;
-		margin-block-end: none;
-		word-wrap: break-word;
-	}
-
-	blockquote {
-		margin: 1.2em 0 2em;
-		padding: 0 0.8em;
-		border-width: 0 0 0 3px;
-		border-style: solid;
-		border-color: $border;
-
-		footer {
-			color: $text-subtle;
-			font-size: $font-size-8;
-		}
-	}
-}
+/* stylelint-disable selector-max-compound-selectors */
+
+$markdown-paragraph-size: 1rem !default;
+$include-bare-code-styles: true !default;
+$list-top-spacing: 1rem !default;
+
+@if $include-bare-code-styles == true {
+	/*
+	* Within projects that desire bare-code styling, you may set the above variable to true and <pre><code>
+	* Elements within .markdown will be styled.
+	*/
+
+	.markdown {
+		@include code-block;
+	}
+}
+
+.markdown {
+	// @include responsive-font-size($markdown-paragraph-size, 0.875rem); // experiment only
+	font-size: $markdown-paragraph-size;
+	line-height: 1.6;
+
+	// Inline code
+
+	:not(a):not(pre) > code {
+		padding: 0.1em 0.2em;
+		border-radius: 3px;
+		background-color: $inline-code;
+		word-wrap: break-word;
+		font-smooth: auto;
+		font-size: 0.85em;
+	}
+
+	img,
+	video {
+		max-width: 100%;
+		height: auto;
+		border: 0;
+	}
+
+	svg:not(:root) {
+		overflow: hidden;
+	}
+
+	li {
+		margin-block-start: 0.5em;
+	}
+
+	ul,
+	ol {
+		margin-inline-start: 2.375rem;
+	}
+
+	ul {
+		list-style-type: disc;
+
+		ul {
+			list-style-type: circle;
+			margin: 0;
+			margin-inline-start: 1.25rem;
+
+			ul {
+				list-style-type: square;
+			}
+		}
+
+		&:not(:first-child) {
+			margin: 1rem 0;
+		}
+	}
+
+	ol {
+		list-style-type: decimal;
+
+		ol {
+			list-style-type: lower-alpha;
+			margin: 0;
+			margin-inline-start: 1.25rem;
+
+			ol {
+				list-style-type: lower-roman;
+			}
+		}
+
+		&:not(:first-child) {
+			margin: 1rem 0;
+		}
+	}
+
+	h1 {
+		@include responsive-font-size($font-size-1);
+
+		margin-block-start: none;
+		margin-block-end: 0.75rem;
+		word-wrap: break-word; // browser support fallback, because FF and IE
+		word-break: break-word;
+
+		&:first-of-type {
+			margin-block-start: -0.625rem;
+			margin-block-end: none;
+		}
+	}
+
+	h2 {
+		@include responsive-font-size($font-size-2);
+
+		margin-block-start: 2rem;
+	}
+
+	h3 {
+		@include responsive-font-size($font-size-3);
+
+		margin-block-start: 1.875rem;
+		margin-block-end: 1.125rem;
+	}
+
+	h4 {
+		@include responsive-font-size($font-size-4);
+
+		margin-block-start: 2.25rem;
+		margin-block-end: 0.375rem;
+	}
+
+	h5 {
+		@include responsive-font-size($font-size-5, false, 1.1rem);
+
+		margin-block-start: 2.25rem;
+		margin-block-end: 0.375rem;
+		letter-spacing: 1px;
+	}
+
+	h6 {
+		@include responsive-font-size($font-size-6, false, 1.05rem);
+
+		margin-block-start: 2.25rem;
+		margin-block-end: 0.375rem;
+		letter-spacing: 1px;
+	}
+
+	p {
+		margin-block-start: $markdown-paragraph-size;
+		margin-block-end: none;
+		word-wrap: break-word;
+	}
+
+	blockquote {
+		margin: 1.2em 0 2em;
+		padding: 0 0.8em;
+		border-width: 0 0 0 3px;
+		border-style: solid;
+		border-color: $border;
+
+		footer {
+			color: $text-subtle;
+			font-size: $font-size-8;
+		}
+	}
+}

package/src/components/media.scss

@@ -1,22 +1,22 @@
-.media {
-	display: flex;
-	align-items: flex-start;
-
-	+ .media,
-	.media {
-		border-block-start: 1px solid $border;
-		margin-block-start: 1rem;
-		padding-block-start: 1rem;
-	}
-}
-
-.media-left {
-	flex: 0 0 auto;
-	margin-inline-end: 1rem;
-}
-
-.media-content {
-	flex: 1 1 auto;
-	width: 100%;
-	word-break: break-word;
-}
+.media {
+	display: flex;
+	align-items: flex-start;
+
+	+ .media,
+	.media {
+		border-block-start: 1px solid $border;
+		margin-block-start: 1rem;
+		padding-block-start: 1rem;
+	}
+}
+
+.media-left {
+	flex: 0 0 auto;
+	margin-inline-end: 1rem;
+}
+
+.media-content {
+	flex: 1 1 auto;
+	width: 100%;
+	word-break: break-word;
+}

package/src/components/message.scss

@@ -1,74 +1,74 @@
-$message-font-size-xs: $font-size-9 !default;
-$message-font-size-sm: $font-size-8 !default;
-$message-font-size-md: $font-size-7 !default;
-
-$message-background-color: $body-background !default;
-$message-gap-size: $layout-1 !default;
-$message-spacer-md: $spacer-3 !default;
-$message-spacer-lg: $spacer-5 !default;
-
-$message-sender-width: 85% !default;
-$message-sender-background-color: $primary-background !default;
-
-$message-border-radius: $border-radius-lg !default;
-$message-border: $border-width solid $border !default;
-
-$message-content-padding: $spacer-5 !default;
-$message-content-padding-sm: 0.875rem !default;
-
-.message {
-	display: grid;
-	grid-template:
-		'. message-time'
-		'message-persona message-content';
-	grid-template-columns: max-content minmax(0, 1fr);
-	gap: $message-gap-size;
-	font-size: $message-font-size-md;
-	line-height: $line-height-normal;
-
-	.message-time {
-		grid-area: message-time;
-		font-size: $message-font-size-xs;
-	}
-
-	.message-persona {
-		grid-area: message-persona;
-		margin-block-start: $message-spacer-lg;
-	}
-
-	.message-content {
-		grid-area: message-content;
-		padding: $message-content-padding;
-		border: $message-border;
-		border-radius: $message-border-radius;
-		background-color: $message-background-color;
-
-		.message-content-header {
-			display: grid;
-			grid-template-columns: 1fr auto;
-			margin-block-end: $message-spacer-md;
-
-			.message-content-options {
-				justify-self: flex-end;
-				margin-inline-end: $message-spacer-md;
-			}
-		}
-	}
-
-	&.message-sender {
-		justify-self: flex-end;
-		width: $message-sender-width;
-
-		.message-content {
-			background-color: $message-sender-background-color;
-		}
-	}
-
-	&.message-sm {
-		font-size: $message-font-size-sm;
-
-		.message-content {
-			padding: $message-content-padding-sm;
-		}
-	}
-}
+$message-font-size-xs: $font-size-9 !default;
+$message-font-size-sm: $font-size-8 !default;
+$message-font-size-md: $font-size-7 !default;
+
+$message-background-color: $body-background !default;
+$message-gap-size: $layout-1 !default;
+$message-spacer-md: $spacer-3 !default;
+$message-spacer-lg: $spacer-5 !default;
+
+$message-sender-width: 85% !default;
+$message-sender-background-color: $primary-background !default;
+
+$message-border-radius: $border-radius-lg !default;
+$message-border: $border-width solid $border !default;
+
+$message-content-padding: $spacer-5 !default;
+$message-content-padding-sm: 0.875rem !default;
+
+.message {
+	display: grid;
+	grid-template:
+		'. message-time'
+		'message-persona message-content';
+	grid-template-columns: max-content minmax(0, 1fr);
+	gap: $message-gap-size;
+	font-size: $message-font-size-md;
+	line-height: $line-height-normal;
+
+	.message-time {
+		grid-area: message-time;
+		font-size: $message-font-size-xs;
+	}
+
+	.message-persona {
+		grid-area: message-persona;
+		margin-block-start: $message-spacer-lg;
+	}
+
+	.message-content {
+		grid-area: message-content;
+		padding: $message-content-padding;
+		border: $message-border;
+		border-radius: $message-border-radius;
+		background-color: $message-background-color;
+
+		.message-content-header {
+			display: grid;
+			grid-template-columns: 1fr auto;
+			margin-block-end: $message-spacer-md;
+
+			.message-content-options {
+				justify-self: flex-end;
+				margin-inline-end: $message-spacer-md;
+			}
+		}
+	}
+
+	&.message-sender {
+		justify-self: flex-end;
+		width: $message-sender-width;
+
+		.message-content {
+			background-color: $message-sender-background-color;
+		}
+	}
+
+	&.message-sm {
+		font-size: $message-font-size-sm;
+
+		.message-content {
+			padding: $message-content-padding-sm;
+		}
+	}
+}