@microsoft/atlas-css 3.4.0 → 3.8.0

package/src/components/buttons.scss

@@ -15,31 +15,31 @@
 	}
 
 	.button {
-		margin-bottom: 0.5rem;
-		margin-#{$user-right}: 0.5rem;
+		margin-block-end: 0.5rem;
+		margin-inline-end: 0.5rem;
 
 		&:only-child,
 		&.is-fullwidth,
 		&.is-full-width {
-			margin-#{$user-right}: 0;
+			margin-inline-end: 0;
 		}
 
 		&.is-full-width-mobile,
 		&.is-fullwidth-mobile {
-			margin-#{$user-right}: 0;
+			margin-inline-end: 0;
 
 			@include tablet {
-				margin-#{$user-right}: 0.5rem;
+				margin-inline-end: 0.5rem;
 			}
 		}
 	}
 
 	&:last-child {
-		margin-bottom: -0.5rem;
+		margin-block-end: -0.5rem;
 	}
 
 	&:not(:last-child) {
-		margin-bottom: 1rem;
+		margin-block-end: 1rem;
 	}
 
 	&.buttons-addons {
@@ -52,11 +52,11 @@
 			&:not(:last-child) {
 				border-bottom-#{$user-right}-radius: 0;
 				border-top-#{$user-right}-radius: 0;
-				margin-#{$user-right}: -1px;
+				margin-inline-end: -1px;
 			}
 
 			&:last-child {
-				margin-#{$user-right}: 0;
+				margin-inline-end: 0;
 			}
 
 			&:hover,

package/src/components/index.scss

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

package/src/components/markdown.scss

@@ -9,6 +9,7 @@ $list-top-spacing: 1rem !default;
 	* 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;
 	}
@@ -20,6 +21,7 @@ $list-top-spacing: 1rem !default;
 	line-height: 1.6;
 
 	// Inline code
+
 	:not(a):not(pre) > code {
 		padding: 0.1em 0.2em;
 		border-radius: 3px;
@@ -41,12 +43,12 @@ $list-top-spacing: 1rem !default;
 	}
 
 	li {
-		margin-top: 0.5em;
+		margin-block-start: 0.5em;
 	}
 
 	ul,
 	ol {
-		margin-#{$user-left}: 2.375rem;
+		margin-inline-start: 2.375rem;
 	}
 
 	ul {
@@ -55,7 +57,7 @@ $list-top-spacing: 1rem !default;
 		ul {
 			list-style-type: circle;
 			margin: 0;
-			margin-#{$user-left}: 1.25rem;
+			margin-inline-start: 1.25rem;
 
 			ul {
 				list-style-type: square;
@@ -73,7 +75,7 @@ $list-top-spacing: 1rem !default;
 		ol {
 			list-style-type: lower-alpha;
 			margin: 0;
-			margin-#{$user-left}: 1.25rem;
+			margin-inline-start: 1.25rem;
 
 			ol {
 				list-style-type: lower-roman;
@@ -88,56 +90,56 @@ $list-top-spacing: 1rem !default;
 	h1 {
 		@include responsive-font-size($font-size-1);
 
-		margin-top: none;
-		margin-bottom: 0.75rem;
+		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-top: -0.625rem;
-			margin-bottom: none;
+			margin-block-start: -0.625rem;
+			margin-block-end: none;
 		}
 	}
 
 	h2 {
 		@include responsive-font-size($font-size-2);
 
-		margin-top: 2rem;
+		margin-block-start: 2rem;
 	}
 
 	h3 {
 		@include responsive-font-size($font-size-3);
 
-		margin-top: 1.875rem;
-		margin-bottom: 1.125rem;
+		margin-block-start: 1.875rem;
+		margin-block-end: 1.125rem;
 	}
 
 	h4 {
 		@include responsive-font-size($font-size-4);
 
-		margin-top: 2.25rem;
-		margin-bottom: 0.375rem;
+		margin-block-start: 2.25rem;
+		margin-block-end: 0.375rem;
 	}
 
 	h5 {
 		@include responsive-font-size($font-size-5, false, 1.1rem);
 
-		margin-top: 2.25rem;
-		margin-bottom: 0.375rem;
+		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-top: 2.25rem;
-		margin-bottom: 0.375rem;
+		margin-block-start: 2.25rem;
+		margin-block-end: 0.375rem;
 		letter-spacing: 1px;
 	}
 
 	p {
-		margin-top: $markdown-paragraph-size;
-		margin-bottom: none;
+		margin-block-start: $markdown-paragraph-size;
+		margin-block-end: none;
 		word-wrap: break-word;
 	}
 

package/src/components/popover.scss

@@ -10,18 +10,21 @@ $popover-width: 224px !default;
 
 	summary {
 		list-style: none;
+
+		&::-webkit-details-marker {
+			display: none;
+		}
 	}
 
 	.popover-content {
 		position: absolute;
 		width: $popover-width;
-		margin-top: $spacer-3;
+		margin-block-start: $spacer-3;
 		padding: $spacer-5;
 		border: $popover-border;
 		border-radius: $popover-border-radius;
 		background-color: $popover-background-color;
 		box-shadow: $popover-shadow;
-		overflow: hidden;
 		z-index: $zindex-popover;
 	}
 

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/components/table.scss

@@ -59,7 +59,7 @@ $table-caption-spacing: $letter-spacing-medium !default;
 			}
 
 			td:not(:nth-child(1)) {
-				padding-top: 0;
+				padding-block-start: 0;
 				border-width: 0;
 			}
 		}

package/src/core/animations.scss

@@ -1,7 +1,11 @@
+// stylelint-disable-next-line keyframes-name-pattern
 @keyframes spinAround {
+	// make it stop
+
 	from {
 		transform: rotate(0deg);
 	}
+
 	to {
 		transform: rotate(359deg);
 	}

package/src/core/bare-elements.scss

@@ -0,0 +1,5 @@
+// https://bugs.chromium.org/p/chromium/issues/detail?id=589475&q=details%20box-sizing&can=2
+
+:is(details > *) {
+	box-sizing: border-box;
+}

package/src/core/index.scss

@@ -1,6 +1,7 @@
-@import 'normalize.css';
-@import 'minireset.css';
+@import './normalize.scss';
+@import './minireset.scss';
 @import './themes.scss';
 @import './font-stack.scss';
 @import './animations.scss';
 @import './focus.scss';
+@import './bare-elements.scss';

package/src/core/minireset.scss

@@ -0,0 +1,79 @@
+/* stylelint-disable */
+/*! minireset.css v0.0.7 | MIT License | github.com/jgthms/minireset.css */
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0;
+	padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-size: 100%;
+	font-weight: normal;
+}
+
+ul {
+	list-style: none;
+}
+
+button,
+input,
+select {
+	margin: 0;
+}
+
+html {
+	box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+img,
+video {
+	height: auto;
+	max-width: 100%;
+}
+
+iframe {
+	border: 0;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+td,
+th {
+	padding: 0;
+}
+/* stylelint-enable */

package/src/core/normalize.scss

@@ -0,0 +1,353 @@
+/* stylelint-disable */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+	line-height: 1.15; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+	 ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+	margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+	display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+	font-size: 2em;
+	margin: 0.67em 0;
+}
+
+/* Grouping content
+	 ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+	box-sizing: content-box; /* 1 */
+	height: 0; /* 1 */
+	overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+	 ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+	background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+	border-bottom: none; /* 1 */
+	text-decoration: underline; /* 2 */
+	text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+	font-family: monospace, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+	font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/* Embedded content
+	 ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+	border-style: none;
+}
+
+/* Forms
+	 ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+	/* 1 */
+	overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+	/* 1 */
+	text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	-webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+	border-style: none;
+	padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+	outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+	padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+	box-sizing: border-box; /* 1 */
+	color: inherit; /* 2 */
+	display: table; /* 1 */
+	max-width: 100%; /* 1 */
+	padding: 0; /* 3 */
+	white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+	overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+	box-sizing: border-box; /* 1 */
+	padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/* Interactive
+	 ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+	display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+	display: list-item;
+}
+
+/* Misc
+	 ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+	display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+	display: none;
+}
+/* stylelint-enable */

package/src/core/themes.scss

@@ -44,6 +44,7 @@ $theme-names: map.keys($themes);
 	@if $key == $root-theme {
 		:root {
 			@each $colorName, $colorVal in map.get($themes, $key) {
+				// stylelint-disable-next-line custom-property-pattern
 				--theme-#{$colorName}: #{$colorVal};
 			}
 		}
@@ -52,6 +53,7 @@ $theme-names: map.keys($themes);
 	@if $key == $print-theme {
 		.theme-#{$key} {
 			@each $colorName, $colorVal in map.get($themes, $key) {
+				// stylelint-disable-next-line custom-property-pattern
 				--theme-#{$colorName}: #{$colorVal};
 			}
 		}
@@ -60,6 +62,7 @@ $theme-names: map.keys($themes);
 		@media not print {
 			.theme-#{$key} {
 				@each $colorName, $colorVal in map-get($themes, $key) {
+					// stylelint-disable-next-line custom-property-pattern
 					--theme-#{$colorName}: #{$colorVal};
 				}
 			}
@@ -67,6 +70,8 @@ $theme-names: map.keys($themes);
 	}
 }
 
+// End validation
+
 %theme-base-styles {
 	outline-color: $text;
 	background-color: $body-background;