@microsoft/atlas-css 3.42.1 → 3.44.0

package/src/components/form/input.scss

@@ -1,143 +1,143 @@
-$input-color: $text !default;
-$input-background-color: $body-background !default;
-$input-border-color: $control-border !default;
-$input-placeholder-color: $text-subtle !default;
-
-$input-hover-color: $text !default;
-$input-hover-border-color: $primary !default;
-$input-focus-border-color: $primary !default;
-
-$input-disabled-color: $text-subtle !default;
-$input-disabled-background-color: $body-background-medium !default;
-$input-disabled-border-color: $table-border-dark !default;
-
-$input-danger-border-color: $danger !default;
-$input-success-border-color: $success !default;
-
-$input-focus-box-shadow-size: 0 0 0 0.125rem !default;
-
-$input-icon-size: 2.25em !default;
-$input-icon-color: $text-subtle !default;
-$input-icon-active-color: $secondary !default;
-
-.input {
-	@include control;
-
-	width: 100%;
-	max-width: 100%;
-	border-color: $input-border-color;
-	background-color: $input-background-color;
-	color: $input-color !important;
-
-	&::placeholder {
-		color: $input-placeholder-color;
-	}
-
-	&:hover {
-		border-color: $input-hover-border-color;
-	}
-
-	&[disabled] {
-		border-color: $input-disabled-border-color;
-		background-color: $input-disabled-background-color;
-		color: $input-disabled-color;
-	}
-
-	@include focus-visible {
-		@extend %focus;
-
-		border-color: $input-focus-border-color;
-		outline-color: transparent;
-		outline-offset: 0;
-		outline-style: solid;
-		box-shadow: $input-focus-box-shadow-size $input-focus-border-color;
-	}
-
-	&.input-sm {
-		@include control-sm;
-	}
-
-	&.input-lg {
-		@include control-lg;
-	}
-
-	&.input-danger {
-		border-color: $input-danger-border-color;
-
-		@include focus-visible() {
-			box-shadow: $input-focus-box-shadow-size $input-danger-border-color;
-		}
-	}
-
-	&.input-success {
-		border-color: $input-success-border-color;
-
-		@include focus-visible() {
-			box-shadow: $input-focus-box-shadow-size $input-success-border-color;
-		}
-	}
-
-	&.input-icon-right {
-		padding-inline-end: $input-icon-size;
-
-		~ .icon {
-			inset-inline-start: unset !important;
-			inset-inline-end: 0;
-		}
-
-		.input[type='date'] {
-			position: relative;
-
-			&::-webkit-calendar-picker-indicator {
-				position: absolute;
-				width: 1.5em;
-				background: none;
-				color: transparent;
-				inset-inline-end: 0;
-				z-index: $zindex-dropdown;
-			}
-		}
-	}
-
-	&.input-icon,
-	&.input-icon-right {
-		padding-inline-start: $input-icon-size;
-
-		&.input-icon-right {
-			padding-inline-start: $control-padding-horizontal;
-		}
-
-		+ .icon {
-			@include fill-current-color();
-
-			position: absolute;
-			inset-block-start: 0;
-			inset-inline-start: 0;
-			width: $input-icon-size;
-			height: 100%;
-			color: $input-icon-color;
-			pointer-events: none;
-			z-index: $zindex-multi;
-		}
-
-		@include focus-visible {
-			+ .icon {
-				color: $input-icon-active-color;
-			}
-		}
-
-		&.input-sm {
-			~ .icon svg {
-				width: 0.875em;
-				height: 0.875em;
-			}
-		}
-
-		&.input-lg {
-			~ .icon svg {
-				width: 1.125em;
-				height: 1.125em;
-			}
-		}
-	}
-}
+$input-color: $text !default;
+$input-background-color: $body-background !default;
+$input-border-color: $control-border !default;
+$input-placeholder-color: $text-subtle !default;
+
+$input-hover-color: $text !default;
+$input-hover-border-color: $primary !default;
+$input-focus-border-color: $primary !default;
+
+$input-disabled-color: $text-subtle !default;
+$input-disabled-background-color: $body-background-medium !default;
+$input-disabled-border-color: $table-border-dark !default;
+
+$input-danger-border-color: $danger !default;
+$input-success-border-color: $success !default;
+
+$input-focus-box-shadow-size: 0 0 0 0.125rem !default;
+
+$input-icon-size: 2.25em !default;
+$input-icon-color: $text-subtle !default;
+$input-icon-active-color: $secondary !default;
+
+.input {
+	@include control;
+
+	width: 100%;
+	max-width: 100%;
+	border-color: $input-border-color;
+	background-color: $input-background-color;
+	color: $input-color !important;
+
+	&::placeholder {
+		color: $input-placeholder-color;
+	}
+
+	&:hover {
+		border-color: $input-hover-border-color;
+	}
+
+	&[disabled] {
+		border-color: $input-disabled-border-color;
+		background-color: $input-disabled-background-color;
+		color: $input-disabled-color;
+	}
+
+	@include focus-visible {
+		@extend %focus;
+
+		border-color: $input-focus-border-color;
+		outline-color: transparent;
+		outline-offset: 0;
+		outline-style: solid;
+		box-shadow: $input-focus-box-shadow-size $input-focus-border-color;
+	}
+
+	&.input-sm {
+		@include control-sm;
+	}
+
+	&.input-lg {
+		@include control-lg;
+	}
+
+	&.input-danger {
+		border-color: $input-danger-border-color;
+
+		@include focus-visible() {
+			box-shadow: $input-focus-box-shadow-size $input-danger-border-color;
+		}
+	}
+
+	&.input-success {
+		border-color: $input-success-border-color;
+
+		@include focus-visible() {
+			box-shadow: $input-focus-box-shadow-size $input-success-border-color;
+		}
+	}
+
+	&.input-icon-right {
+		padding-inline-end: $input-icon-size;
+
+		~ .icon {
+			inset-inline-start: unset !important;
+			inset-inline-end: 0;
+		}
+
+		.input[type='date'] {
+			position: relative;
+
+			&::-webkit-calendar-picker-indicator {
+				position: absolute;
+				width: 1.5em;
+				background: none;
+				color: transparent;
+				inset-inline-end: 0;
+				z-index: $zindex-dropdown;
+			}
+		}
+	}
+
+	&.input-icon,
+	&.input-icon-right {
+		padding-inline-start: $input-icon-size;
+
+		&.input-icon-right {
+			padding-inline-start: $control-padding-horizontal;
+		}
+
+		+ .icon {
+			@include fill-current-color();
+
+			position: absolute;
+			inset-block-start: 0;
+			inset-inline-start: 0;
+			width: $input-icon-size;
+			height: 100%;
+			color: $input-icon-color;
+			pointer-events: none;
+			z-index: $zindex-multi;
+		}
+
+		@include focus-visible {
+			+ .icon {
+				color: $input-icon-active-color;
+			}
+		}
+
+		&.input-sm {
+			~ .icon svg {
+				width: 0.875em;
+				height: 0.875em;
+			}
+		}
+
+		&.input-lg {
+			~ .icon svg {
+				width: 1.125em;
+				height: 1.125em;
+			}
+		}
+	}
+}

package/src/components/form/label.scss

@@ -1,14 +1,14 @@
-$label-color: $text !default;
-$label-font-size: $font-size-7 !default;
-$label-font-weight: $weight-semibold !default;
-
-@mixin label {
-	display: block;
-	color: $label-color;
-	font-size: $label-font-size;
-	font-weight: $label-font-weight;
-}
-
-.label {
-	@include label;
-}
+$label-color: $text !default;
+$label-font-size: $font-size-7 !default;
+$label-font-weight: $weight-semibold !default;
+
+@mixin label {
+	display: block;
+	color: $label-color;
+	font-size: $label-font-size;
+	font-weight: $label-font-weight;
+}
+
+.label {
+	@include label;
+}

package/src/components/form/radio.scss

@@ -1,121 +1,121 @@
-$radio-circle-size: 1.25em !default;
-$radio-dot-size: 0.625em !default;
-$radio-border-color: $control-border !default;
-$radio-border-width: $control-border-width !default;
-$radio-dot-checked-color: $primary !default;
-$radio-dot-color: $text-subtle !default;
-$radio-dot-hover-unchecked-color: $control-border !default;
-$radio-timing-function: $input-timing-function !default;
-$radio-duration: $input-transition-duration !default;
-$radio-animation: boop !default;
-$radio-spacing: 0.5em !default;
-
-@mixin radio-dot {
-	position: absolute;
-	inset: 0;
-	width: $radio-dot-size;
-	height: $radio-dot-size;
-	margin: auto;
-	border-radius: $border-radius-rounded;
-	content: '';
-	overflow: hidden;
-}
-
-@mixin radio-dot-checked {
-	background: $radio-dot-checked-color;
-	box-shadow: inset 0 0 0 0.25em $body-background;
-}
-
-.radio {
-	display: inline-flex;
-	line-height: 1.25;
-	cursor: pointer;
-
-	.radio-dot {
-		display: inline-block;
-		position: relative;
-		inset-block-start: 0.0625em;
-		flex-shrink: 0;
-		width: $radio-circle-size;
-		height: $radio-circle-size;
-		border: $radio-border-width solid $radio-border-color;
-		border-radius: $border-radius-rounded;
-		background-color: $body-background;
-		color: $radio-dot-color;
-		cursor: pointer;
-		appearance: none;
-
-		@include forced-colors {
-			border-color: CanvasText !important;
-			background-color: unset !important;
-
-			&::before {
-				@include radio-dot;
-			}
-		}
-	}
-
-	.radio-label-text {
-		margin: 0 $radio-spacing;
-	}
-
-	/* stylelint-disable selector-max-specificity, selector-no-qualifying-type, max-nesting-depth */
-
-	input {
-		&.is-focused {
-			@extend %focus;
-		}
-
-		@include focus-visible {
-			@extend %focus;
-		}
-	}
-
-	input.is-checked,
-	input:checked,
-	.radio-dot.is-checked {
-		@include radio-dot-checked;
-
-		animation: $radio-animation $radio-duration $radio-timing-function 1;
-		border-color: $radio-dot-checked-color;
-
-		@include forced-colors {
-			border-color: CanvasText !important;
-			background-color: unset !important;
-			box-shadow: none !important;
-
-			&::before {
-				background-color: CanvasText !important;
-			}
-		}
-	}
-
-	&.is-hovered,
-	&:hover {
-		.radio-dot:not(:checked):not([disabled]) {
-			background: $radio-dot-hover-unchecked-color;
-			box-shadow: inset 0 0 0 0.25em $body-background;
-
-			@include forced-colors {
-				background-color: unset !important;
-				box-shadow: none !important;
-
-				&::before {
-					background-color: CanvasText !important;
-				}
-			}
-		}
-
-		.radio-dot.is-checked {
-			@include radio-dot-checked;
-		}
-	}
-
-	input[disabled],
-	input[disabled] ~ .radio-label-text {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* stylelint-enable */
-}
+$radio-circle-size: 1.25em !default;
+$radio-dot-size: 0.625em !default;
+$radio-border-color: $control-border !default;
+$radio-border-width: $control-border-width !default;
+$radio-dot-checked-color: $primary !default;
+$radio-dot-color: $text-subtle !default;
+$radio-dot-hover-unchecked-color: $control-border !default;
+$radio-timing-function: $input-timing-function !default;
+$radio-duration: $input-transition-duration !default;
+$radio-animation: boop !default;
+$radio-spacing: 0.5em !default;
+
+@mixin radio-dot {
+	position: absolute;
+	inset: 0;
+	width: $radio-dot-size;
+	height: $radio-dot-size;
+	margin: auto;
+	border-radius: $border-radius-rounded;
+	content: '';
+	overflow: hidden;
+}
+
+@mixin radio-dot-checked {
+	background: $radio-dot-checked-color;
+	box-shadow: inset 0 0 0 0.25em $body-background;
+}
+
+.radio {
+	display: inline-flex;
+	line-height: 1.25;
+	cursor: pointer;
+
+	.radio-dot {
+		display: inline-block;
+		position: relative;
+		inset-block-start: 0.0625em;
+		flex-shrink: 0;
+		width: $radio-circle-size;
+		height: $radio-circle-size;
+		border: $radio-border-width solid $radio-border-color;
+		border-radius: $border-radius-rounded;
+		background-color: $body-background;
+		color: $radio-dot-color;
+		cursor: pointer;
+		appearance: none;
+
+		@include forced-colors {
+			border-color: CanvasText !important;
+			background-color: unset !important;
+
+			&::before {
+				@include radio-dot;
+			}
+		}
+	}
+
+	.radio-label-text {
+		margin: 0 $radio-spacing;
+	}
+
+	/* stylelint-disable selector-max-specificity, selector-no-qualifying-type, max-nesting-depth */
+
+	input {
+		&.is-focused {
+			@extend %focus;
+		}
+
+		@include focus-visible {
+			@extend %focus;
+		}
+	}
+
+	input.is-checked,
+	input:checked,
+	.radio-dot.is-checked {
+		@include radio-dot-checked;
+
+		animation: $radio-animation $radio-duration $radio-timing-function 1;
+		border-color: $radio-dot-checked-color;
+
+		@include forced-colors {
+			border-color: CanvasText !important;
+			background-color: unset !important;
+			box-shadow: none !important;
+
+			&::before {
+				background-color: CanvasText !important;
+			}
+		}
+	}
+
+	&.is-hovered,
+	&:hover {
+		.radio-dot:not(:checked):not([disabled]) {
+			background: $radio-dot-hover-unchecked-color;
+			box-shadow: inset 0 0 0 0.25em $body-background;
+
+			@include forced-colors {
+				background-color: unset !important;
+				box-shadow: none !important;
+
+				&::before {
+					background-color: CanvasText !important;
+				}
+			}
+		}
+
+		.radio-dot.is-checked {
+			@include radio-dot-checked;
+		}
+	}
+
+	input[disabled],
+	input[disabled] ~ .radio-label-text {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* stylelint-enable */
+}