@microsoft/atlas-css 3.43.0 → 3.44.1

package/src/components/form/select.scss

@@ -1,116 +1,116 @@
-/* stylelint-disable selector-no-qualifying-type */
-
-$select-color: $text !default;
-$select-background-color: $body-background !default;
-$select-border-color: $control-border !default;
-$select-placeholder-color: $text-subtle !default;
-
-$select-hover-color: $text !default;
-$select-hover-border-color: $primary !default;
-$select-focus-border-color: $primary !default;
-
-$select-disabled-color: $text-subtle !default;
-$select-disabled-background-color: $body-background-medium !default;
-$select-disabled-border-color: $table-border-dark !default;
-
-$select-danger-border-color: $danger !default;
-$select-success-border-color: $success !default;
-
-$select-focus-box-shadow-size: 0 0 0 0.125rem !default;
-
-$select-arrow-size: 0.525em !default;
-$select-arrow-border-width: 1px !default;
-$select-arrow-actual-width: 0.75em !default;
-
-.select {
-	position: relative;
-	font-size: $control-font-size;
-
-	select {
-		@include control;
-
-		width: 100%;
-		max-width: 100%;
-		border-color: $select-border-color;
-		background-color: $select-background-color;
-		color: $select-color;
-		font-size: 1em;
-		cursor: pointer;
-
-		&[multiple] {
-			padding: 0;
-			overflow-y: auto;
-
-			option {
-				padding: $control-padding-vertical $control-padding-horizontal;
-			}
-		}
-
-		&[disabled] {
-			border-color: $select-disabled-border-color;
-			background-color: $select-disabled-background-color;
-			color: $select-disabled-color;
-		}
-
-		@include focus-visible {
-			@extend %focus;
-
-			border-color: $select-focus-border-color;
-			outline-color: transparent;
-			outline-offset: 0;
-			outline-style: solid;
-			box-shadow: $select-focus-box-shadow-size $select-focus-border-color;
-		}
-	}
-
-	&:not(.select-multiple) {
-		select {
-			padding-inline-end: calc($control-padding-horizontal + $select-arrow-actual-width);
-		}
-
-		&::after {
-			display: block;
-			position: absolute;
-			inset-block-start: calc(50% - $select-arrow-actual-width / 2);
-			width: $select-arrow-size;
-			height: $select-arrow-size;
-			transform: rotate(-45deg);
-			transform-origin: center;
-			border: $select-arrow-border-width solid $select-color;
-			border-block-start: 0;
-			border-inline-end: 0;
-			pointer-events: none;
-			content: ' ';
-			z-index: $zindex-active;
-			inset-inline-end: $control-padding-horizontal;
-		}
-
-		&.select-disabled::after {
-			border-color: $select-disabled-border-color;
-		}
-	}
-
-	&.select-sm {
-		font-size: $control-sm-font-size;
-	}
-
-	&.select-lg {
-		font-size: $control-lg-font-size;
-	}
-
-	&.select-danger select {
-		border-color: $select-danger-border-color;
-
-		@include focus-visible() {
-			box-shadow: $select-focus-box-shadow-size $select-danger-border-color;
-		}
-	}
-
-	&.select-success select {
-		border-color: $select-success-border-color;
-
-		@include focus-visible() {
-			box-shadow: $select-focus-box-shadow-size $select-success-border-color;
-		}
-	}
-}
+/* stylelint-disable selector-no-qualifying-type */
+
+$select-color: $text !default;
+$select-background-color: $body-background !default;
+$select-border-color: $control-border !default;
+$select-placeholder-color: $text-subtle !default;
+
+$select-hover-color: $text !default;
+$select-hover-border-color: $primary !default;
+$select-focus-border-color: $primary !default;
+
+$select-disabled-color: $text-subtle !default;
+$select-disabled-background-color: $body-background-medium !default;
+$select-disabled-border-color: $table-border-dark !default;
+
+$select-danger-border-color: $danger !default;
+$select-success-border-color: $success !default;
+
+$select-focus-box-shadow-size: 0 0 0 0.125rem !default;
+
+$select-arrow-size: 0.525em !default;
+$select-arrow-border-width: 1px !default;
+$select-arrow-actual-width: 0.75em !default;
+
+.select {
+	position: relative;
+	font-size: $control-font-size;
+
+	select {
+		@include control;
+
+		width: 100%;
+		max-width: 100%;
+		border-color: $select-border-color;
+		background-color: $select-background-color;
+		color: $select-color;
+		font-size: 1em;
+		cursor: pointer;
+
+		&[multiple] {
+			padding: 0;
+			overflow-y: auto;
+
+			option {
+				padding: $control-padding-vertical $control-padding-horizontal;
+			}
+		}
+
+		&[disabled] {
+			border-color: $select-disabled-border-color;
+			background-color: $select-disabled-background-color;
+			color: $select-disabled-color;
+		}
+
+		@include focus-visible {
+			@extend %focus;
+
+			border-color: $select-focus-border-color;
+			outline-color: transparent;
+			outline-offset: 0;
+			outline-style: solid;
+			box-shadow: $select-focus-box-shadow-size $select-focus-border-color;
+		}
+	}
+
+	&:not(.select-multiple) {
+		select {
+			padding-inline-end: calc($control-padding-horizontal + $select-arrow-actual-width);
+		}
+
+		&::after {
+			display: block;
+			position: absolute;
+			inset-block-start: calc(50% - $select-arrow-actual-width / 2);
+			width: $select-arrow-size;
+			height: $select-arrow-size;
+			transform: rotate(-45deg);
+			transform-origin: center;
+			border: $select-arrow-border-width solid $select-color;
+			border-block-start: 0;
+			border-inline-end: 0;
+			pointer-events: none;
+			content: ' ';
+			z-index: $zindex-active;
+			inset-inline-end: $control-padding-horizontal;
+		}
+
+		&.select-disabled::after {
+			border-color: $select-disabled-border-color;
+		}
+	}
+
+	&.select-sm {
+		font-size: $control-sm-font-size;
+	}
+
+	&.select-lg {
+		font-size: $control-lg-font-size;
+	}
+
+	&.select-danger select {
+		border-color: $select-danger-border-color;
+
+		@include focus-visible() {
+			box-shadow: $select-focus-box-shadow-size $select-danger-border-color;
+		}
+	}
+
+	&.select-success select {
+		border-color: $select-success-border-color;
+
+		@include focus-visible() {
+			box-shadow: $select-focus-box-shadow-size $select-success-border-color;
+		}
+	}
+}

package/src/components/form/textarea.scss

@@ -1,82 +1,82 @@
-$textarea-color: $text !default;
-$textarea-background-color: $body-background !default;
-$textarea-border-color: $control-border !default;
-$textarea-placeholder-color: $text-subtle !default;
-
-$textarea-hover-color: $text !default;
-$textarea-hover-border-color: $primary !default;
-$textarea-focus-border-color: $primary !default;
-
-$textarea-disabled-color: $text-subtle !default;
-$textarea-disabled-background-color: $body-background-medium !default;
-$textarea-disabled-border-color: $table-border-dark !default;
-
-$textarea-danger-border-color: $danger !default;
-$textarea-success-border-color: $success !default;
-
-$textarea-focus-box-shadow-size: 0 0 0 0.125rem !default;
-
-.textarea {
-	@include control;
-
-	display: block;
-	width: 100%;
-	max-width: 100%;
-	resize: vertical;
-	border-color: $textarea-border-color;
-	background-color: $textarea-background-color;
-	color: $textarea-color !important;
-
-	&[rows] {
-		height: initial;
-	}
-
-	&:not([rows]) {
-		min-height: 100px;
-		max-height: 600px;
-	}
-
-	&::placeholder {
-		color: $textarea-placeholder-color;
-	}
-
-	&:hover {
-		border-color: $textarea-hover-border-color;
-	}
-
-	&[disabled] {
-		border-color: $textarea-disabled-border-color;
-		background-color: $textarea-disabled-background-color;
-		color: $textarea-disabled-color;
-	}
-
-	@include focus-visible {
-		@extend %focus;
-
-		border-color: $textarea-focus-border-color;
-		outline-color: transparent;
-		outline-offset: 0;
-		outline-style: solid;
-		box-shadow: $textarea-focus-box-shadow-size $textarea-focus-border-color;
-	}
-
-	&.textarea-fixed-height {
-		resize: none;
-	}
-
-	&.textarea-danger {
-		border-color: $textarea-danger-border-color;
-
-		@include focus-visible() {
-			box-shadow: $textarea-focus-box-shadow-size $textarea-danger-border-color;
-		}
-	}
-
-	&.textarea-success {
-		border-color: $textarea-success-border-color;
-
-		@include focus-visible() {
-			box-shadow: $textarea-focus-box-shadow-size $textarea-success-border-color;
-		}
-	}
-}
+$textarea-color: $text !default;
+$textarea-background-color: $body-background !default;
+$textarea-border-color: $control-border !default;
+$textarea-placeholder-color: $text-subtle !default;
+
+$textarea-hover-color: $text !default;
+$textarea-hover-border-color: $primary !default;
+$textarea-focus-border-color: $primary !default;
+
+$textarea-disabled-color: $text-subtle !default;
+$textarea-disabled-background-color: $body-background-medium !default;
+$textarea-disabled-border-color: $table-border-dark !default;
+
+$textarea-danger-border-color: $danger !default;
+$textarea-success-border-color: $success !default;
+
+$textarea-focus-box-shadow-size: 0 0 0 0.125rem !default;
+
+.textarea {
+	@include control;
+
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	resize: vertical;
+	border-color: $textarea-border-color;
+	background-color: $textarea-background-color;
+	color: $textarea-color !important;
+
+	&[rows] {
+		height: initial;
+	}
+
+	&:not([rows]) {
+		min-height: 100px;
+		max-height: 600px;
+	}
+
+	&::placeholder {
+		color: $textarea-placeholder-color;
+	}
+
+	&:hover {
+		border-color: $textarea-hover-border-color;
+	}
+
+	&[disabled] {
+		border-color: $textarea-disabled-border-color;
+		background-color: $textarea-disabled-background-color;
+		color: $textarea-disabled-color;
+	}
+
+	@include focus-visible {
+		@extend %focus;
+
+		border-color: $textarea-focus-border-color;
+		outline-color: transparent;
+		outline-offset: 0;
+		outline-style: solid;
+		box-shadow: $textarea-focus-box-shadow-size $textarea-focus-border-color;
+	}
+
+	&.textarea-fixed-height {
+		resize: none;
+	}
+
+	&.textarea-danger {
+		border-color: $textarea-danger-border-color;
+
+		@include focus-visible() {
+			box-shadow: $textarea-focus-box-shadow-size $textarea-danger-border-color;
+		}
+	}
+
+	&.textarea-success {
+		border-color: $textarea-success-border-color;
+
+		@include focus-visible() {
+			box-shadow: $textarea-focus-box-shadow-size $textarea-success-border-color;
+		}
+	}
+}

package/src/components/gradient-card.scss

@@ -1,14 +1,14 @@
-$gradient-card-padding: $layout-2 !default;
-$gradient-card-border-radius: $border-radius-lg !default; //6px
-
-.gradient-card {
-	border: $border-width-md solid transparent;
-	border-radius: $gradient-card-border-radius;
-	background: linear-gradient(90deg, $gradient-vivid-start, $gradient-vivid-end) border-box;
-
-	.gradient-card-content {
-		padding: $gradient-card-padding;
-		border-radius: inherit;
-		background-color: $body-background;
-	}
-}
+$gradient-card-padding: $layout-2 !default;
+$gradient-card-border-radius: $border-radius-lg !default; //6px
+
+.gradient-card {
+	border: $border-width-md solid transparent;
+	border-radius: $gradient-card-border-radius;
+	background: linear-gradient(90deg, $gradient-vivid-start, $gradient-vivid-end) border-box;
+
+	.gradient-card-content {
+		padding: $gradient-card-padding;
+		border-radius: inherit;
+		background-color: $body-background;
+	}
+}

package/src/components/gradient.scss

@@ -1,85 +1,85 @@
-$border-gradient-colors: (
-	'body': $body-background,
-	'body-accent': $body-background-accent
-) !default;
-
-@each $name, $var in $border-gradient-colors {
-	// ex. .gradient-border-body { --border-gradient-end-color: var(--theme-body-background); }
-	.gradient-border-#{$name} {
-		--border-gradient-end-color: #{$var};
-	}
-}
-
-$border-gradient-direction: (
-	'right': 'inline-end',
-	'bottom': 'block-end'
-) !default;
-
-@each $direction, $logical-side in $border-gradient-direction {
-	.gradient-border-#{$direction} {
-		position: relative;
-	}
-	.gradient-border-#{$direction}:before {
-		display: block;
-		position: absolute;
-		content: '';
-		border-image: linear-gradient(
-			to #{$direction},
-			transparent 0%,
-			transparent 92%,
-			var(--border-gradient-end-color, transparent) 100%
-		);
-		border-#{$logical-side}-width: 320px;
-		border-#{$logical-side}-style: solid;
-		border-image-outset: 0;
-
-		@if $direction == 'right' {
-			border-image-slice: 0 128 0 0;
-			inset-block-start: 0;
-			inset-block-end: 0;
-			inset-inline-end: 0;
-		}
-
-		@if $direction == 'bottom' {
-			border-image-slice: 0 0 128 0;
-			inset-block-end: 0;
-			inset-inline-start: 0;
-			inset-inline-end: 0;
-		}
-
-		@include forced-colors {
-			display: none !important;
-		}
-	}
-
-	@include tablet {
-		.gradient-border-to-#{$direction}-tablet:before {
-			border-image: linear-gradient(
-				to #{$direction},
-				transparent 0%,
-				transparent 92%,
-				var(--border-gradient-end-color) 100%
-			);
-			border-#{$logical-side}-width: 320px;
-			border-#{$logical-side}-style: solid;
-			border-image-outset: 0;
-
-			@if $direction == 'right' {
-				border-image-slice: 0 128 0 0;
-			}
-
-			@if $direction == 'bottom' {
-				border-image-slice: 0 0 128 0;
-			}
-		}
-	}
-}
-
-@each $name, $gradient in $gradients {
-	$colorStart: nth($gradient, $gradient-color-start-index);
-	$colorEnd: nth($gradient, $gradient-color-end-index);
-
-	.gradient-text-#{$name} {
-		@include gradient-text($colorStart, $colorEnd);
-	}
-}
+$border-gradient-colors: (
+	'body': $body-background,
+	'body-accent': $body-background-accent
+) !default;
+
+@each $name, $var in $border-gradient-colors {
+	// ex. .gradient-border-body { --border-gradient-end-color: var(--theme-body-background); }
+	.gradient-border-#{$name} {
+		--border-gradient-end-color: #{$var};
+	}
+}
+
+$border-gradient-direction: (
+	'right': 'inline-end',
+	'bottom': 'block-end'
+) !default;
+
+@each $direction, $logical-side in $border-gradient-direction {
+	.gradient-border-#{$direction} {
+		position: relative;
+	}
+	.gradient-border-#{$direction}:before {
+		display: block;
+		position: absolute;
+		content: '';
+		border-image: linear-gradient(
+			to #{$direction},
+			transparent 0%,
+			transparent 92%,
+			var(--border-gradient-end-color, transparent) 100%
+		);
+		border-#{$logical-side}-width: 320px;
+		border-#{$logical-side}-style: solid;
+		border-image-outset: 0;
+
+		@if $direction == 'right' {
+			border-image-slice: 0 128 0 0;
+			inset-block-start: 0;
+			inset-block-end: 0;
+			inset-inline-end: 0;
+		}
+
+		@if $direction == 'bottom' {
+			border-image-slice: 0 0 128 0;
+			inset-block-end: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
+		}
+
+		@include forced-colors {
+			display: none !important;
+		}
+	}
+
+	@include tablet {
+		.gradient-border-to-#{$direction}-tablet:before {
+			border-image: linear-gradient(
+				to #{$direction},
+				transparent 0%,
+				transparent 92%,
+				var(--border-gradient-end-color) 100%
+			);
+			border-#{$logical-side}-width: 320px;
+			border-#{$logical-side}-style: solid;
+			border-image-outset: 0;
+
+			@if $direction == 'right' {
+				border-image-slice: 0 128 0 0;
+			}
+
+			@if $direction == 'bottom' {
+				border-image-slice: 0 0 128 0;
+			}
+		}
+	}
+}
+
+@each $name, $gradient in $gradients {
+	$colorStart: nth($gradient, $gradient-color-start-index);
+	$colorEnd: nth($gradient, $gradient-color-end-index);
+
+	.gradient-text-#{$name} {
+		@include gradient-text($colorStart, $colorEnd);
+	}
+}