@microsoft/atlas-css 1.1.0 → 1.2.0

package/src/index.scss

@@ -1,6 +1,6 @@
-@import './tokens/index.scss';
-@import './mixins/index.scss';
-@import './core/index.scss';
-@import './components/index.scss';
-@import './patterns/index.scss';
-@import './atomics/index.scss';
+@import './tokens/index.scss';
+@import './mixins/index.scss';
+@import './core/index.scss';
+@import './components/index.scss';
+@import './patterns/index.scss';
+@import './atomics/index.scss';

package/src/mixins/center.scss

@@ -1,11 +1,11 @@
-@mixin center($width, $height: 0) {
-	position: absolute;
-
-	@if $height != 0 {
-		top: calc(50% - (#{$height} / 2));
-		left: calc(50% - (#{$width} / 2));
-	} @else {
-		top: calc(50% - (#{$width} / 2));
-		left: calc(50% - (#{$width} / 2));
-	}
-}
+@mixin center($width, $height: 0) {
+	position: absolute;
+
+	@if $height != 0 {
+		top: calc(50% - (#{$height} / 2));
+		left: calc(50% - (#{$width} / 2));
+	} @else {
+		top: calc(50% - (#{$width} / 2));
+		left: calc(50% - (#{$width} / 2));
+	}
+}

package/src/mixins/code-block.scss

@@ -1,43 +1,43 @@
-$code-font-size: $font-size-8 !default;
-$code-block-spacing: 1em !default;
-$code-header-body-line-height: 1.3571 !default;
-
-@mixin code-block {
-	pre {
-		box-sizing: border-box;
-		max-width: 100%;
-		margin: 0;
-		padding: $code-block-spacing;
-		border: 1px solid $border;
-		background-color: $code-block;
-		font-size: $code-font-size;
-		-moz-osx-font-smoothing: auto;
-		-webkit-font-smoothing: auto;
-		line-height: 1.3571;
-		white-space: pre;
-		word-spacing: normal;
-		overflow: auto;
-		word-break: normal;
-		word-wrap: normal;
-		tab-size: 4;
-		hyphens: none;
-		-webkit-overflow-scrolling: touch;
-
-		> code {
-			display: block;
-			position: relative;
-			padding: 0;
-			border: 0;
-			line-height: $code-header-body-line-height;
-
-			mark {
-				display: inline-block;
-				min-width: calc(100% + #{$code-block-spacing} + #{$code-block-spacing});
-				min-height: 18.9px; // Allow for highlighting of blank lines.
-				margin: 0 $code-block-spacing * -1;
-				padding: 0 $code-block-spacing;
-				color: $text;
-			}
-		}
-	}
-}
+$code-font-size: $font-size-8 !default;
+$code-block-spacing: 1em !default;
+$code-header-body-line-height: 1.3571 !default;
+
+@mixin code-block {
+	pre {
+		box-sizing: border-box;
+		max-width: 100%;
+		margin: 0;
+		padding: $code-block-spacing;
+		border: 1px solid $border;
+		background-color: $code-block;
+		font-size: $code-font-size;
+		-moz-osx-font-smoothing: auto;
+		-webkit-font-smoothing: auto;
+		line-height: 1.3571;
+		white-space: pre;
+		word-spacing: normal;
+		overflow: auto;
+		word-break: normal;
+		word-wrap: normal;
+		tab-size: 4;
+		hyphens: none;
+		-webkit-overflow-scrolling: touch;
+
+		> code {
+			display: block;
+			position: relative;
+			padding: 0;
+			border: 0;
+			line-height: $code-header-body-line-height;
+
+			mark {
+				display: inline-block;
+				min-width: calc(100% + #{$code-block-spacing} + #{$code-block-spacing});
+				min-height: 18.9px; // Allow for highlighting of blank lines.
+				margin: 0 $code-block-spacing * -1;
+				padding: 0 $code-block-spacing;
+				color: $text;
+			}
+		}
+	}
+}

package/src/mixins/control.scss

@@ -1,44 +1,44 @@
-$control-radius: $radius !default;
-$control-radius-small: $radius-small !default;
-
-$control-font-size: $font-size-7 !default;
-$control-border-width: 1px !default;
-
-$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
-$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
-
-%control {
-	display: inline-flex;
-	position: relative;
-	align-items: center;
-	justify-content: flex-start;
-	height: 2.25em;
-	padding-top: $control-padding-vertical;
-	padding-right: $control-padding-horizontal;
-	padding-bottom: $control-padding-vertical;
-	padding-left: $control-padding-horizontal;
-	border: $control-border-width solid transparent;
-	border-radius: $control-radius;
-	font-size: $control-font-size;
-	line-height: 1.5;
-	appearance: none;
-	box-shadow: none;
-	vertical-align: top;
-
-	&[disabled] {
-		cursor: not-allowed;
-	}
-}
-
-@mixin control {
-	@extend %control;
-}
-
-@mixin control-small {
-	border-radius: $control-radius-small;
-	font-size: $font-size-small;
-}
-
-@mixin control-large {
-	font-size: $font-size-large;
-}
+$control-radius: $radius !default;
+$control-radius-small: $radius-small !default;
+
+$control-font-size: $font-size-7 !default;
+$control-border-width: 1px !default;
+
+$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
+$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default;
+
+%control {
+	display: inline-flex;
+	position: relative;
+	align-items: center;
+	justify-content: flex-start;
+	height: 2.25em;
+	padding-top: $control-padding-vertical;
+	padding-right: $control-padding-horizontal;
+	padding-bottom: $control-padding-vertical;
+	padding-left: $control-padding-horizontal;
+	border: $control-border-width solid transparent;
+	border-radius: $control-radius;
+	font-size: $control-font-size;
+	line-height: 1.5;
+	appearance: none;
+	box-shadow: none;
+	vertical-align: top;
+
+	&[disabled] {
+		cursor: not-allowed;
+	}
+}
+
+@mixin control {
+	@extend %control;
+}
+
+@mixin control-small {
+	border-radius: $control-radius-small;
+	font-size: $font-size-small;
+}
+
+@mixin control-large {
+	font-size: $font-size-large;
+}

package/src/mixins/focus.scss

@@ -1,10 +1,10 @@
-@mixin focus() {
-	outline-color: inherit;
-	outline-offset: $focus-outline-offset;
-	outline-style: $focus-style;
-	outline-width: $focus-width;
-}
-
-%focus {
-	@include focus();
-}
+@mixin focus() {
+	outline-color: inherit;
+	outline-offset: $focus-outline-offset;
+	outline-style: $focus-style;
+	outline-width: $focus-width;
+}
+
+%focus {
+	@include focus();
+}

package/src/mixins/font-size.scss

@@ -1,35 +1,35 @@
-@use 'sass:math';
-
-/* stylelint-disable */
-
-$font-size-scaling-factor: 0.75 !default;
-
-// Remove the units from a value
-@function strip-units($number) {
-	@return math.div($number, ($number * 0 + 1));
-}
-@mixin responsive-font-size(
-	// font-size to stop scaling at
-	$end-rem,
-	// whether to include !important
-	$important: false,
-	// font-size to start scaling from
-	$start-rem: max($end-rem * $font-size-scaling-factor, 1rem),
-	// viewport width to stop scaling at
-	$end-width: $breakpoint-desktop,
-	// viewport width to start scaling from
-	$start-width: 480px
-) {
-	$m: math.div(
-			strip-units($end-rem) - strip-units($start-rem),
-			strip-units($end-width) - strip-units($start-width)
-		) * strip-units($document-font-size);
-
-	$y: strip-units($start-rem) * strip-units($document-font-size);
-	$x: strip-units($start-width);
-	$b: $y - $m * $x;
-	$importantValue: if($important, !important, '');
-
-	font-size: clamp(#{$start-rem}, #{$b}px + #{$m * 100}vw, #{$end-rem}) #{$importantValue};
-}
-/* stylelint-enable */
+@use 'sass:math';
+
+/* stylelint-disable */
+
+$font-size-scaling-factor: 0.75 !default;
+
+// Remove the units from a value
+@function strip-units($number) {
+	@return math.div($number, ($number * 0 + 1));
+}
+@mixin responsive-font-size(
+	// font-size to stop scaling at
+	$end-rem,
+	// whether to include !important
+	$important: false,
+	// font-size to start scaling from
+	$start-rem: max($end-rem * $font-size-scaling-factor, 1rem),
+	// viewport width to stop scaling at
+	$end-width: $breakpoint-desktop,
+	// viewport width to start scaling from
+	$start-width: 480px
+) {
+	$m: math.div(
+			strip-units($end-rem) - strip-units($start-rem),
+			strip-units($end-width) - strip-units($start-width)
+		) * strip-units($document-font-size);
+
+	$y: strip-units($start-rem) * strip-units($document-font-size);
+	$x: strip-units($start-width);
+	$b: $y - $m * $x;
+	$importantValue: if($important, !important, '');
+
+	font-size: clamp(#{$start-rem}, #{$b}px + #{$m * 100}vw, #{$end-rem}) #{$importantValue};
+}
+/* stylelint-enable */

package/src/mixins/index.scss

@@ -1,9 +1,9 @@
-@import 'code-block.scss';
-@import 'control.scss';
-@import 'center.scss';
-@import 'focus.scss';
-@import 'loader.scss';
-@import 'media-queries.scss';
-@import 'font-size.scss';
-@import 'transparency.scss';
-@import 'unselectable.scss';
+@import 'code-block.scss';
+@import 'control.scss';
+@import 'center.scss';
+@import 'focus.scss';
+@import 'loader.scss';
+@import 'media-queries.scss';
+@import 'font-size.scss';
+@import 'transparency.scss';
+@import 'unselectable.scss';

package/src/mixins/loader.scss

@@ -1,16 +1,16 @@
-%loader {
-	display: block;
-	position: relative;
-	width: 1em;
-	height: 1em;
-	animation: spinAround 500ms infinite linear;
-	border: 2px solid $border;
-	border-radius: $radius-rounded;
-	border-top-color: transparent;
-	border-right-color: transparent;
-	content: '';
-}
-
-@mixin loader {
-	@extend %loader;
-}
+%loader {
+	display: block;
+	position: relative;
+	width: 1em;
+	height: 1em;
+	animation: spinAround 500ms infinite linear;
+	border: 2px solid $border;
+	border-radius: $radius-rounded;
+	border-top-color: transparent;
+	border-right-color: transparent;
+	content: '';
+}
+
+@mixin loader {
+	@extend %loader;
+}

package/src/mixins/media-queries.scss

@@ -1,49 +1,49 @@
-// Orientation
-
-@mixin orientation-portrait {
-	@media screen and (max-aspect-ratio: 1/1),
-		screen and (min-resolution: 120dpi) and (max-aspect-ratio: 1/1) {
-		@content;
-	}
-}
-
-@mixin orientation-landscape {
-	@media screen and (min-aspect-ratio: 1/1),
-		screen and (min-resolution: 120dpi) and (min-aspect-ratio: 1/1) {
-		@content;
-	}
-}
-
-@mixin orientation-square {
-	@media screen and (aspect-ratio: 1/1),
-		screen and (min-resolution: 120dpi) and (aspect-ratio: 1/1) {
-		@content;
-	}
-}
-
-// Mobile-first screen size media queries
-
-@mixin tablet {
-	@media screen and (min-width: $breakpoint-tablet), print {
-		@content;
-	}
-}
-
-@mixin desktop {
-	@media screen and (min-width: $breakpoint-desktop) {
-		@content;
-	}
-}
-
-@mixin widescreen {
-	@media screen and (min-width: $breakpoint-widescreen) {
-		@content;
-	}
-}
-
-// Please avoid using this mixin if possible. It doesn't follow the mobile-first approach to writing CSS.
-@mixin discouraged-mobile {
-	@media screen and (max-width: $breakpoint-tablet - 1px) {
-		@content;
-	}
-}
+// Orientation
+
+@mixin orientation-portrait {
+	@media screen and (max-aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (max-aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-landscape {
+	@media screen and (min-aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (min-aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-square {
+	@media screen and (aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+// Mobile-first screen size media queries
+
+@mixin tablet {
+	@media screen and (min-width: $breakpoint-tablet), print {
+		@content;
+	}
+}
+
+@mixin desktop {
+	@media screen and (min-width: $breakpoint-desktop) {
+		@content;
+	}
+}
+
+@mixin widescreen {
+	@media screen and (min-width: $breakpoint-widescreen) {
+		@content;
+	}
+}
+
+// Please avoid using this mixin if possible. It doesn't follow the mobile-first approach to writing CSS.
+@mixin discouraged-mobile {
+	@media screen and (max-width: $breakpoint-tablet - 1px) {
+		@content;
+	}
+}