@microsoft/atlas-css 3.42.1 → 3.44.0

package/src/mixins/line-clamp.scss

@@ -1,15 +1,15 @@
-%line-clamp {
-	/*stylelint-disable*/
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-
-@mixin line-clamp($lines: 1, $important: false) {
-	@extend %line-clamp;
-	@if $important {
-		-webkit-line-clamp: $lines !important;
-	} @else {
-		-webkit-line-clamp: $lines;
-	}
-}
+%line-clamp {
+	/*stylelint-disable*/
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+@mixin line-clamp($lines: 1, $important: false) {
+	@extend %line-clamp;
+	@if $important {
+		-webkit-line-clamp: $lines !important;
+	} @else {
+		-webkit-line-clamp: $lines;
+	}
+}

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: $border-radius-rounded;
-	border-block-start-color: transparent;
-	border-inline-end-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: $border-radius-rounded;
+	border-block-start-color: transparent;
+	border-inline-end-color: transparent;
+	content: '';
+}
+
+@mixin loader {
+	@extend %loader;
+}

package/src/mixins/media-queries.scss

@@ -1,61 +1,61 @@
-// Orientation
-
-@mixin orientation-portrait {
-	@media screen and (aspect-ratio <= 1/1),
-		screen and (resolution >= 120dpi) and (aspect-ratio <= 1/1) {
-		@content;
-	}
-}
-
-@mixin orientation-landscape {
-	@media screen and (aspect-ratio >= 1/1),
-		screen and (resolution >= 120dpi) and (aspect-ratio >= 1/1) {
-		@content;
-	}
-}
-
-@mixin orientation-square {
-	@media screen and (aspect-ratio <= 1/1),
-		screen and (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;
-	}
-}
-
-@mixin print {
-	@media print {
-		@content;
-	}
-}
-
-@mixin prefers-reduced-motion {
-	@media (prefers-reduced-motion: reduce) {
-		@content;
-	}
-}
+// Orientation
+
+@mixin orientation-portrait {
+	@media screen and (aspect-ratio <= 1/1),
+		screen and (resolution >= 120dpi) and (aspect-ratio <= 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-landscape {
+	@media screen and (aspect-ratio >= 1/1),
+		screen and (resolution >= 120dpi) and (aspect-ratio >= 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-square {
+	@media screen and (aspect-ratio <= 1/1),
+		screen and (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;
+	}
+}
+
+@mixin print {
+	@media print {
+		@content;
+	}
+}
+
+@mixin prefers-reduced-motion {
+	@media (prefers-reduced-motion: reduce) {
+		@content;
+	}
+}

package/src/mixins/overlay.scss

@@ -1,12 +1,12 @@
-%overlay {
-	position: absolute;
-	inset: 0;
-}
-
-@mixin overlay($offset: 0) {
-	@extend %overlay;
-
-	@if $offset != 0 {
-		inset: $offset;
-	}
-}
+%overlay {
+	position: absolute;
+	inset: 0;
+}
+
+@mixin overlay($offset: 0) {
+	@extend %overlay;
+
+	@if $offset != 0 {
+		inset: $offset;
+	}
+}

package/src/mixins/transparency.scss

@@ -1,15 +1,15 @@
-%transparent-effects {
-	outline-color: inherit;
-	background-color: transparent;
-	appearance: none;
-
-	&:not(:hover),
-	&:not(.focus-visible),
-	&: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),
+	&: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/mixins/visually-hidden.scss

@@ -1,12 +1,12 @@
-@mixin visually-hidden() {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	margin: -1px;
-	padding: 0;
-	border: 0;
-	overflow: hidden;
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	word-wrap: normal;
-}
+@mixin visually-hidden() {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	word-wrap: normal;
+}

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,12 +1,12 @@
-/**
- * @sass-export-section="border"
- */
-$border-width: 1px !default;
-$border-width-md: 0.125rem !default;
-$border-width-lg: 0.25rem !default;
-
-$border-radius-sm: 0.125rem !default; // 2px
-$border-radius: 0.25rem !default; // 4px
-$border-radius-lg: 0.375rem !default; // 6px
-$border-radius-rounded: 290486px !default;
-//@end-sass-export-section
+/**
+ * @sass-export-section="border"
+ */
+$border-width: 1px !default;
+$border-width-md: 0.125rem !default;
+$border-width-lg: 0.25rem !default;
+
+$border-radius-sm: 0.125rem !default; // 2px
+$border-radius: 0.25rem !default; // 4px
+$border-radius-lg: 0.375rem !default; // 6px
+$border-radius-rounded: 290486px !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: 1800px !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: 1800px !default;
+//@end-sass-export-section