@microsoft/atlas-css 3.42.1 → 3.44.0

package/src/components/form/checkbox.scss

@@ -1,141 +1,141 @@
-/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */
-
-$checkbox-border-radius: $border-radius-sm !default;
-$checkbox-border-width: 0.0625em !default;
-$checkbox-unchecked-border-color: $control-border !default;
-$checkbox-invalid-border-color: $danger !default;
-$checkbox-color: $primary !default;
-$checkbox-check-color: $primary-invert !default;
-$checkbox-check-hover-color: $text-subtle !default;
-$checkbox-size: 1.25em !default;
-$checkbox-check-height: 0.75em !default;
-$checkbox-check-top: 0.125em !default;
-$checkbox-check-width: 0.3125em !default;
-$checkbox-check-thickness: 0.0625em !default;
-$checkbox-timing-function: $input-timing-function !default;
-$checkbox-duration: $input-transition-duration !default;
-$checkbox-spacing: $spacer-3 !default;
-
-@mixin checkmark {
-	display: block;
-	position: absolute;
-	inset-block-start: $checkbox-check-top;
-	width: $checkbox-check-width;
-	height: $checkbox-check-height;
-	transform: rotate(45deg);
-	border: solid $checkbox-check-hover-color;
-	border-width: 0 $checkbox-check-thickness $checkbox-check-thickness 0;
-	content: '';
-}
-
-.checkbox {
-	display: flex;
-	position: relative;
-	align-items: center;
-	line-height: 1.25;
-	cursor: pointer;
-
-	&:not(:last-child) {
-		margin-block-end: $checkbox-spacing;
-	}
-
-	.checkbox-check {
-		display: flex;
-		position: relative;
-		flex-shrink: 0;
-		align-items: center;
-		justify-content: center;
-		width: $checkbox-size;
-		height: $checkbox-size;
-		transition-duration: $checkbox-duration;
-		transition-property: background, border, border-color;
-		transition-timing-function: $checkbox-timing-function;
-		border: $checkbox-border-width solid $checkbox-unchecked-border-color;
-		border-radius: $checkbox-border-radius;
-
-		&:not(:last-child) {
-			margin-inline-end: $checkbox-spacing;
-		}
-
-		&::before {
-			content: '\0020';
-		}
-	}
-
-	&.checkbox-sm {
-		@include control-sm;
-	}
-
-	&.checkbox-lg {
-		@include control-lg;
-	}
-
-	input[type='checkbox'] {
-		@include visually-hidden();
-
-		&:checked + .checkbox-check {
-			border-color: $checkbox-color;
-			background-color: $checkbox-color;
-
-			&::before {
-				@include checkmark;
-
-				border-color: $checkbox-check-color;
-			}
-		}
-
-		&[disabled] {
-			+ .checkbox-check {
-				border-color: $checkbox-unchecked-border-color;
-				opacity: 0.6;
-			}
-
-			+ .checkbox-check,
-			~ .checkbox-text {
-				cursor: not-allowed;
-			}
-		}
-
-		@include focus-visible {
-			+ .checkbox-check {
-				@extend %focus;
-			}
-		}
-	}
-
-	&.checkbox-muted {
-		input[type='checkbox'] {
-			&:checked + .checkbox-check {
-				border-color: $text-subtle;
-				background-color: $text-subtle;
-
-				&::before {
-					border-color: $text-invert;
-				}
-			}
-		}
-	}
-
-	.checkbox-check.is-checked {
-		border-color: $checkbox-color;
-		background-color: $checkbox-color;
-
-		&::before {
-			@include checkmark;
-
-			border-color: $checkbox-check-color;
-		}
-	}
-
-	&.is-invalid {
-		input[type='checkbox']:not(:checked) + .checkbox-check {
-			border-color: $checkbox-invalid-border-color;
-		}
-	}
-
-	&:hover {
-		input[type='checkbox']:not(:checked):not([disabled]) + .checkbox-check::before {
-			@include checkmark;
-		}
-	}
-}
+/* stylelint-disable selector-max-specificity, max-nesting-depth, selector-no-qualifying-type */
+
+$checkbox-border-radius: $border-radius-sm !default;
+$checkbox-border-width: 0.0625em !default;
+$checkbox-unchecked-border-color: $control-border !default;
+$checkbox-invalid-border-color: $danger !default;
+$checkbox-color: $primary !default;
+$checkbox-check-color: $primary-invert !default;
+$checkbox-check-hover-color: $text-subtle !default;
+$checkbox-size: 1.25em !default;
+$checkbox-check-height: 0.75em !default;
+$checkbox-check-top: 0.125em !default;
+$checkbox-check-width: 0.3125em !default;
+$checkbox-check-thickness: 0.0625em !default;
+$checkbox-timing-function: $input-timing-function !default;
+$checkbox-duration: $input-transition-duration !default;
+$checkbox-spacing: $spacer-3 !default;
+
+@mixin checkmark {
+	display: block;
+	position: absolute;
+	inset-block-start: $checkbox-check-top;
+	width: $checkbox-check-width;
+	height: $checkbox-check-height;
+	transform: rotate(45deg);
+	border: solid $checkbox-check-hover-color;
+	border-width: 0 $checkbox-check-thickness $checkbox-check-thickness 0;
+	content: '';
+}
+
+.checkbox {
+	display: flex;
+	position: relative;
+	align-items: center;
+	line-height: 1.25;
+	cursor: pointer;
+
+	&:not(:last-child) {
+		margin-block-end: $checkbox-spacing;
+	}
+
+	.checkbox-check {
+		display: flex;
+		position: relative;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		width: $checkbox-size;
+		height: $checkbox-size;
+		transition-duration: $checkbox-duration;
+		transition-property: background, border, border-color;
+		transition-timing-function: $checkbox-timing-function;
+		border: $checkbox-border-width solid $checkbox-unchecked-border-color;
+		border-radius: $checkbox-border-radius;
+
+		&:not(:last-child) {
+			margin-inline-end: $checkbox-spacing;
+		}
+
+		&::before {
+			content: '\0020';
+		}
+	}
+
+	&.checkbox-sm {
+		@include control-sm;
+	}
+
+	&.checkbox-lg {
+		@include control-lg;
+	}
+
+	input[type='checkbox'] {
+		@include visually-hidden();
+
+		&:checked + .checkbox-check {
+			border-color: $checkbox-color;
+			background-color: $checkbox-color;
+
+			&::before {
+				@include checkmark;
+
+				border-color: $checkbox-check-color;
+			}
+		}
+
+		&[disabled] {
+			+ .checkbox-check {
+				border-color: $checkbox-unchecked-border-color;
+				opacity: 0.6;
+			}
+
+			+ .checkbox-check,
+			~ .checkbox-text {
+				cursor: not-allowed;
+			}
+		}
+
+		@include focus-visible {
+			+ .checkbox-check {
+				@extend %focus;
+			}
+		}
+	}
+
+	&.checkbox-muted {
+		input[type='checkbox'] {
+			&:checked + .checkbox-check {
+				border-color: $text-subtle;
+				background-color: $text-subtle;
+
+				&::before {
+					border-color: $text-invert;
+				}
+			}
+		}
+	}
+
+	.checkbox-check.is-checked {
+		border-color: $checkbox-color;
+		background-color: $checkbox-color;
+
+		&::before {
+			@include checkmark;
+
+			border-color: $checkbox-check-color;
+		}
+	}
+
+	&.is-invalid {
+		input[type='checkbox']:not(:checked) + .checkbox-check {
+			border-color: $checkbox-invalid-border-color;
+		}
+	}
+
+	&:hover {
+		input[type='checkbox']:not(:checked):not([disabled]) + .checkbox-check::before {
+			@include checkmark;
+		}
+	}
+}

package/src/components/form/form.scss

@@ -1,67 +1,67 @@
-/* stylelint-disable max-nesting-depth, selector-max-specificity  */
-
-$field-line-height: 1.5 !default;
-$field-error-color: $danger !default;
-
-.field {
-	&:not(:last-child) {
-		margin-block-end: $spacer-4;
-	}
-
-	.field-description {
-		margin-block-end: $spacer-3;
-		font-size: $font-size-8;
-	}
-
-	.field-label {
-		@include label;
-
-		margin-block-end: $spacer-3;
-
-		&.field-label-inline {
-			display: inline-flex;
-			margin-block-end: unset;
-			align-self: flex-end;
-		}
-
-		@include tablet {
-			flex: 1 0 0;
-		}
-
-		&.field-label-sm {
-			font-size: $font-size-8;
-		}
-
-		&.field-label-lg {
-			font-size: $font-size-6;
-		}
-	}
-
-	.field-body {
-		> * {
-			scroll-margin-top: 3rem;
-		}
-
-		&:not(:first-child) {
-			margin-block-start: $spacer-3;
-
-			&.field-body-inline {
-				display: inline-flex;
-				vertical-align: text-bottom;
-			}
-		}
-	}
-
-	.field-error {
-		color: $field-error-color;
-		font-size: $font-size-8;
-		line-height: $field-line-height;
-	}
-}
-
-.required-indicator::after,
-::part(required-indicator)::after {
-	color: $danger;
-	content: '*';
-	vertical-align: top;
-}
+/* stylelint-disable max-nesting-depth, selector-max-specificity  */
+
+$field-line-height: 1.5 !default;
+$field-error-color: $danger !default;
+
+.field {
+	&:not(:last-child) {
+		margin-block-end: $spacer-4;
+	}
+
+	.field-description {
+		margin-block-end: $spacer-3;
+		font-size: $font-size-8;
+	}
+
+	.field-label {
+		@include label;
+
+		margin-block-end: $spacer-3;
+
+		&.field-label-inline {
+			display: inline-flex;
+			margin-block-end: unset;
+			align-self: flex-end;
+		}
+
+		@include tablet {
+			flex: 1 0 0;
+		}
+
+		&.field-label-sm {
+			font-size: $font-size-8;
+		}
+
+		&.field-label-lg {
+			font-size: $font-size-6;
+		}
+	}
+
+	.field-body {
+		> * {
+			scroll-margin-top: 3rem;
+		}
+
+		&:not(:first-child) {
+			margin-block-start: $spacer-3;
+
+			&.field-body-inline {
+				display: inline-flex;
+				vertical-align: text-bottom;
+			}
+		}
+	}
+
+	.field-error {
+		color: $field-error-color;
+		font-size: $font-size-8;
+		line-height: $field-line-height;
+	}
+}
+
+.required-indicator::after,
+::part(required-indicator)::after {
+	color: $danger;
+	content: '*';
+	vertical-align: top;
+}

package/src/components/form/help.scss

@@ -1,18 +1,18 @@
-$help-color: $text !default;
-$help-danger-color: $danger !default;
-$help-success-color: $success !default;
-$help-font-size: $font-size-8 !default;
-
-.help {
-	display: block;
-	color: $help-color;
-	font-size: $help-font-size;
-
-	&.help-danger {
-		color: $help-danger-color;
-	}
-
-	&.help-success {
-		color: $help-success-color;
-	}
-}
+$help-color: $text !default;
+$help-danger-color: $danger !default;
+$help-success-color: $success !default;
+$help-font-size: $font-size-8 !default;
+
+.help {
+	display: block;
+	color: $help-color;
+	font-size: $help-font-size;
+
+	&.help-danger {
+		color: $help-danger-color;
+	}
+
+	&.help-success {
+		color: $help-success-color;
+	}
+}

package/src/components/form/index.scss

@@ -1,8 +1,8 @@
-@import './label.scss';
-@import './help.scss';
-@import './checkbox.scss';
-@import './input.scss';
-@import './textarea.scss';
-@import './select.scss';
-@import './radio.scss';
-@import './form.scss';
+@import './label.scss';
+@import './help.scss';
+@import './checkbox.scss';
+@import './input.scss';
+@import './textarea.scss';
+@import './select.scss';
+@import './radio.scss';
+@import './form.scss';