@microsoft/atlas-css 1.2.0 → 1.3.0

package/src/components/buttons.scss

@@ -1,87 +1,86 @@
-/* stylelint-disable selector-max-specificity, max-nesting-depth */
-
-.buttons {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: flex-start;
-
-	&.is-centered {
-		justify-content: center;
-	}
-
-	&.is-right {
-		justify-content: flex-end;
-	}
-
-	.button {
-		margin-bottom: 0.5rem;
-		margin-#{$user-right}: 0.5rem;
-
-		&:only-child,
-		&.is-fullwidth,
-		&.is-full-width {
-			margin-#{$user-right}: 0;
-		}
-
-		&.is-full-width-mobile,
-		&.is-fullwidth-mobile {
-			margin-#{$user-right}: 0;
-
-			@include tablet {
-				margin-#{$user-right}: 0.5rem;
-			}
-		}
-	}
-
-	&:last-child {
-		margin-bottom: -0.5rem;
-	}
-
-	&:not(:last-child) {
-		margin-bottom: 1rem;
-	}
-
-	&.has-addons,
-	&.addons {
-		.button {
-			&:not(:first-child) {
-				border-bottom-#{$user-left}-radius: 0;
-				border-top-#{$user-left}-radius: 0;
-			}
-
-			&:not(:last-child) {
-				border-bottom-#{$user-right}-radius: 0;
-				border-top-#{$user-right}-radius: 0;
-				margin-#{$user-right}: -1px;
-			}
-
-			&:last-child {
-				margin-#{$user-right}: 0;
-			}
-
-			&:hover,
-			&.is-hovered {
-				z-index: $zindex-hover;
-			}
-
-			&.focus-visible,
-			&.is-focused,
-			&:active,
-			&.is-active,
-			&.is-selected {
-				z-index: $zindex-focus;
-
-				&:hover {
-					z-index: $zindex-multi;
-				}
-			}
-
-			&.is-expanded {
-				flex-grow: 1;
-			}
-		}
-	}
-}
-
-/* stylelint-enable selector-max-specificity, max-nesting-depth */
+/* stylelint-disable selector-max-specificity, max-nesting-depth */
+
+.buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-start;
+
+	&.buttons-centered {
+		justify-content: center;
+	}
+
+	&.buttons-right {
+		justify-content: flex-end;
+	}
+
+	.button {
+		margin-bottom: 0.5rem;
+		margin-#{$user-right}: 0.5rem;
+
+		&:only-child,
+		&.is-fullwidth,
+		&.is-full-width {
+			margin-#{$user-right}: 0;
+		}
+
+		&.is-full-width-mobile,
+		&.is-fullwidth-mobile {
+			margin-#{$user-right}: 0;
+
+			@include tablet {
+				margin-#{$user-right}: 0.5rem;
+			}
+		}
+	}
+
+	&:last-child {
+		margin-bottom: -0.5rem;
+	}
+
+	&:not(:last-child) {
+		margin-bottom: 1rem;
+	}
+
+	&.buttons-addons {
+		.button {
+			&:not(:first-child) {
+				border-bottom-#{$user-left}-radius: 0;
+				border-top-#{$user-left}-radius: 0;
+			}
+
+			&:not(:last-child) {
+				border-bottom-#{$user-right}-radius: 0;
+				border-top-#{$user-right}-radius: 0;
+				margin-#{$user-right}: -1px;
+			}
+
+			&:last-child {
+				margin-#{$user-right}: 0;
+			}
+
+			&:hover,
+			&.is-hovered {
+				z-index: $zindex-hover;
+			}
+
+			&.focus-visible,
+			&.is-focused,
+			&:active,
+			&.is-active,
+			&.is-selected {
+				z-index: $zindex-focus;
+
+				&:hover {
+					z-index: $zindex-multi;
+				}
+			}
+
+			&.is-expanded {
+				flex-grow: 1;
+			}
+		}
+	}
+}
+
+/* stylelint-enable selector-max-specificity, max-nesting-depth */

package/src/components/component.md

@@ -1,6 +1,6 @@
-### Components
-
-Create new component when you have a complex layout that requires many helper classes to recreate. Keep the following in mind while creating a new component .
-
-- File name should match the class of the component.
-- There should only be one top level class per file.
+### Components
+
+Create new component when you have a complex layout that requires many helper classes to recreate. Keep the following in mind while creating a new component .
+
+- File name should match the class of the component.
+- There should only be one top level class per file.

package/src/components/icon.scss

@@ -1,20 +1,20 @@
-$features-icon: true !default;
-$icon-dimensions: 1em !default;
-
-.icon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	&,
-	svg,
-	img {
-		width: $icon-dimensions;
-		height: $icon-dimensions;
-	}
-
-	&.icon-rounded {
-		padding: 0.6rem; // ensures icon is not cut off by rounded border
-		border-radius: 50%;
-	}
-}
+$features-icon: true !default;
+$icon-dimensions: 1em !default;
+
+.icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	&,
+	svg,
+	img {
+		width: $icon-dimensions;
+		height: $icon-dimensions;
+	}
+
+	&.icon-rounded {
+		padding: 0.6rem; // ensures icon is not cut off by rounded border
+		border-radius: 50%;
+	}
+}

package/src/components/index.scss

@@ -1,7 +1,7 @@
-@import './button.scss';
-@import './buttons.scss';
-@import './button-reset.scss';
-@import './link-button.scss';
-@import './markdown.scss'; // must be ordered after code-block
-@import './icon.scss';
-@import './table.scss';
+@import './button.scss';
+@import './buttons.scss';
+@import './button-reset.scss';
+@import './link-button.scss';
+@import './markdown.scss'; // must be ordered after code-block
+@import './icon.scss';
+@import './table.scss';

package/src/components/link-button.scss

@@ -1,30 +1,30 @@
-/*
- * For use on <button> elements to emulate the appearance of standard <a> tags.
-*/
-
-.link-button {
-	@include transparent-effects;
-
-	display: inline-block;
-	padding: 0;
-	border: none;
-	color: $hyperlink;
-	cursor: pointer;
-
-	&:active,
-	&.is-active {
-		text-decoration: underline !important;
-	}
-
-	&.focus-visible,
-	&.is-focused,
-	&:hover,
-	&.is-hovered {
-		color: $primary-hover;
-		text-decoration: underline !important;
-	}
-
-	&:visited {
-		color: $visited;
-	}
-}
+/*
+ * For use on <button> elements to emulate the appearance of standard <a> tags.
+*/
+
+.link-button {
+	@include transparent-effects;
+
+	display: inline-block;
+	padding: 0;
+	border: none;
+	color: $hyperlink;
+	cursor: pointer;
+
+	&:active,
+	&.is-active {
+		text-decoration: underline !important;
+	}
+
+	&.focus-visible,
+	&.is-focused,
+	&:hover,
+	&.is-hovered {
+		color: $primary-hover;
+		text-decoration: underline !important;
+	}
+
+	&:visited {
+		color: $visited;
+	}
+}

package/src/components/markdown.scss

@@ -1,156 +1,156 @@
-/* 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-top: 0.5em;
-	}
-
-	ul,
-	ol {
-		margin-#{$user-left}: 2.375rem;
-	}
-
-	ul {
-		list-style-type: disc;
-
-		ul {
-			list-style-type: circle;
-			margin: 0;
-			margin-#{$user-left}: 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-#{$user-left}: 1.25rem;
-
-			ol {
-				list-style-type: lower-roman;
-			}
-		}
-
-		&:not(:first-child) {
-			margin: 1rem 0;
-		}
-	}
-
-	h1 {
-		@include responsive-font-size($font-size-1);
-
-		margin-top: none;
-		margin-bottom: 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;
-		}
-	}
-
-	h2 {
-		@include responsive-font-size($font-size-2);
-
-		margin-top: 2rem;
-	}
-
-	h3 {
-		@include responsive-font-size($font-size-3);
-
-		margin-top: 1.875rem;
-		margin-bottom: 1.125rem;
-	}
-
-	h4 {
-		@include responsive-font-size($font-size-4);
-
-		margin-top: 2.25rem;
-		margin-bottom: 0.375rem;
-	}
-
-	h5 {
-		@include responsive-font-size($font-size-5, false, 1.1rem);
-
-		margin-top: 2.25rem;
-		margin-bottom: 0.375rem;
-		letter-spacing: 1px;
-	}
-
-	h6 {
-		@include responsive-font-size($font-size-6, false, 1.05rem);
-
-		margin-top: 2.25rem;
-		margin-bottom: 0.375rem;
-		letter-spacing: 1px;
-	}
-
-	p {
-		margin-top: $markdown-paragraph-size;
-		margin-bottom: 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-top: 0.5em;
+	}
+
+	ul,
+	ol {
+		margin-#{$user-left}: 2.375rem;
+	}
+
+	ul {
+		list-style-type: disc;
+
+		ul {
+			list-style-type: circle;
+			margin: 0;
+			margin-#{$user-left}: 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-#{$user-left}: 1.25rem;
+
+			ol {
+				list-style-type: lower-roman;
+			}
+		}
+
+		&:not(:first-child) {
+			margin: 1rem 0;
+		}
+	}
+
+	h1 {
+		@include responsive-font-size($font-size-1);
+
+		margin-top: none;
+		margin-bottom: 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;
+		}
+	}
+
+	h2 {
+		@include responsive-font-size($font-size-2);
+
+		margin-top: 2rem;
+	}
+
+	h3 {
+		@include responsive-font-size($font-size-3);
+
+		margin-top: 1.875rem;
+		margin-bottom: 1.125rem;
+	}
+
+	h4 {
+		@include responsive-font-size($font-size-4);
+
+		margin-top: 2.25rem;
+		margin-bottom: 0.375rem;
+	}
+
+	h5 {
+		@include responsive-font-size($font-size-5, false, 1.1rem);
+
+		margin-top: 2.25rem;
+		margin-bottom: 0.375rem;
+		letter-spacing: 1px;
+	}
+
+	h6 {
+		@include responsive-font-size($font-size-6, false, 1.05rem);
+
+		margin-top: 2.25rem;
+		margin-bottom: 0.375rem;
+		letter-spacing: 1px;
+	}
+
+	p {
+		margin-top: $markdown-paragraph-size;
+		margin-bottom: 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;
+		}
+	}
+}