@microsoft/atlas-css 1.2.0 → 1.3.0

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;
+	}
+}

package/src/mixins/transparency.scss

@@ -1,14 +1,14 @@
-%transparent-effects {
-	outline-color: inherit;
-	background-color: transparent;
-	appearance: none;
-
-	&:not(:hover),
-	&:not(.focus-visible) {
-		background-color: transparent;
-	}
-}
-
-@mixin transparent-effects {
-	@extend %transparent-effects;
-}
+%transparent-effects {
+	outline-color: inherit;
+	background-color: transparent;
+	appearance: none;
+
+	&:not(:hover),
+	&:not(.focus-visible) {
+		background-color: transparent;
+	}
+}
+
+@mixin transparent-effects {
+	@extend %transparent-effects;
+}

package/src/mixins/unselectable.scss

@@ -1,13 +1,13 @@
-%unselectable {
-	/* stylelint-disable */
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	/* stylelint-enable */
-	user-select: none;
-}
-
-@mixin unselectable {
-	@extend %unselectable;
-}
+%unselectable {
+	/* stylelint-disable */
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	/* stylelint-enable */
+	user-select: none;
+}
+
+@mixin unselectable {
+	@extend %unselectable;
+}

package/src/patterns/index.scss

@@ -1 +1 @@
-// TBD
+// TBD

package/src/tokens/animation.scss

@@ -1,8 +1,8 @@
-/**
- * @sass-export-section="animation"
- */
-// Animation related property values
-$input-timing-function: cubic-bezier(0.4, 0, 0.23, 1) !default;
-$input-transition-duration: 200ms;
-$nav-bar-transition-duration: 86ms !default;
-//@end-sass-export-section
+/**
+ * @sass-export-section="animation"
+ */
+// Animation related property values
+$input-timing-function: cubic-bezier(0.4, 0, 0.23, 1) !default;
+$input-transition-duration: 200ms;
+$nav-bar-transition-duration: 86ms !default;
+//@end-sass-export-section

package/src/tokens/border.scss

@@ -1,8 +1,8 @@
-/**
- * @sass-export-section="border"
- */
-$border-width: 1px !default;
-$border-width-large: 0.5rem !default;
-$border-radius: 0.25rem !default;
-$border-radius-large: 0.5rem !default;
-//@end-sass-export-section
+/**
+ * @sass-export-section="border"
+ */
+$border-width: 1px !default;
+$border-width-large: 0.5rem !default;
+$border-radius: 0.25rem !default;
+$border-radius-large: 0.5rem !default;
+//@end-sass-export-section

package/src/tokens/breakpoints.scss

@@ -1,11 +1,11 @@
-/**
- * @sass-export-section="breakpoints"
- */
-// The horizontal gap tied to containers
-$container-gap: 64px !default;
-
-// Breakpoints
-$breakpoint-tablet: 768px !default;
-$breakpoint-desktop: 1088px !default;
-$breakpoint-widescreen: 1472px !default;
-//@end-sass-export-section
+/**
+ * @sass-export-section="breakpoints"
+ */
+// The horizontal gap tied to containers
+$container-gap: 64px !default;
+
+// Breakpoints
+$breakpoint-tablet: 768px !default;
+$breakpoint-desktop: 1088px !default;
+$breakpoint-widescreen: 1472px !default;
+//@end-sass-export-section