@microsoft/atlas-css 3.6.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.6.0",
+	"version": "3.7.0",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",

package/src/atomics/index.scss

@@ -2,9 +2,12 @@
 @import './border.scss';
 @import './colors.scss';
 @import './display.scss';
+@import './overflow.scss';
 @import './shadow.scss';
+@import './spacing-auto.scss';
 @import './spacing.scss';
 @import './flex.scss';
 @import './position.scss';
 @import './line-clamp.scss';
 @import './image.scss';
+@import './list.scss';

package/src/atomics/list.scss

@@ -0,0 +1,3 @@
+.list-style-none {
+	list-style: none !important;
+}

package/src/atomics/overflow.scss

@@ -0,0 +1,9 @@
+.overflow-hidden {
+	overflow: hidden;
+}
+
+@include tablet {
+	.overflow-hidden-tablet {
+		overflow: hidden;
+	}
+}

package/src/atomics/spacing-auto.scss

@@ -0,0 +1,34 @@
+$auto-spacing-properties: 'margin-inline', 'margin-left', 'margin-right' !default;
+$separator: '-';
+
+@each $property in $auto-spacing-properties {
+	// .<property>-auto
+	.#{$property}#{$separator}auto {
+		#{$property}: auto !important;
+	}
+}
+
+// .<property>-auto-<screensize>
+@each $property in $auto-spacing-properties {
+	@include tablet {
+		.#{$property}#{$separator}auto#{$separator}tablet {
+			#{$property}: auto !important;
+		}
+	}
+}
+
+@each $property in $auto-spacing-properties {
+	@include desktop {
+		.#{$property}#{$separator}auto#{$separator}desktop {
+			#{$property}: auto !important;
+		}
+	}
+}
+
+@each $property in $auto-spacing-properties {
+	@include widescreen {
+		.#{$property}#{$separator}auto#{$separator}widescreen {
+			#{$property}: auto !important;
+		}
+	}
+}

package/src/atomics/spacing.scss

@@ -1,4 +1,4 @@
-$separator: '-';
+$separator: '-' !default;
 $spacing-properties: 'margin', 'margin-inline', 'margin-block', 'margin-top', 'margin-bottom',
 	'margin-left', 'margin-right', 'padding', 'padding-inline', 'padding-block', 'padding-top',
 	'padding-bottom', 'padding-left', 'padding-right' !default;

package/src/components/breadcrumbs.scss

@@ -3,6 +3,12 @@ $breadcrumb-spacing-horizontal: 0.25em !default;
 $breadcrumb-spacing-vertical: 0.375em !default;
 $breadcrumb-separator: '\00200B/' !default;
 
+%breadcrumbs-slash {
+	display: inline-block;
+	color: $text-subtle;
+	content: $breadcrumb-separator;
+}
+
 .breadcrumbs {
 	font-size: $breadcrumb-font-size;
 
@@ -11,10 +17,21 @@ $breadcrumb-separator: '\00200B/' !default;
 		padding-block: $breadcrumb-spacing-vertical;
 
 		&:not(.breadcrumbs-item-slashless)::after {
-			display: inline-block;
+			@extend %breadcrumbs-slash;
+
 			margin-inline: $breadcrumb-spacing-horizontal;
-			color: $text-subtle;
-			content: $breadcrumb-separator;
 		}
 	}
+
+	// stylelint-disable selector-max-specificity
+
+	&.breadcrumbs-initial-slash {
+		.breadcrumbs-item:first-child::before,
+		.breadcrumbs-item[hidden] + .breadcrumbs-item::before {
+			@extend %breadcrumbs-slash;
+
+			margin-inline: 0.0625em $breadcrumb-spacing-horizontal;
+		}
+	}
+	// stylelint-enable
 }

package/src/components/index.scss

@@ -7,3 +7,4 @@
 @import './icon.scss';
 @import './popover.scss';
 @import './table.scss';
+@import './scroll.scss';

package/src/components/scroll.scss

@@ -0,0 +1,11 @@
+.scroll-horizontal {
+	overflow-x: auto;
+	overflow-y: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+
+.scroll-vertical {
+	overflow-x: hidden;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}

package/src/core/themes.scss

@@ -70,6 +70,8 @@ $theme-names: map.keys($themes);
 	}
 }
 
+// End validation
+
 %theme-base-styles {
 	outline-color: $text;
 	background-color: $body-background;

package/src/index.scss

@@ -2,5 +2,4 @@
 @import './mixins/index.scss';
 @import './core/index.scss';
 @import './components/index.scss';
-@import './patterns/index.scss';
 @import './atomics/index.scss';

package/src/patterns/index.scss

@@ -1 +0,0 @@
-// TBD