@microsoft/atlas-css 3.11.0 → 3.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@microsoft/atlas-css",
-	"version": "3.11.0",
+	"version": "3.12.2",
 	"description": "Styles backing the Atlas Design System used by Microsoft's Developer Relations.",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",

package/src/components/form/checkbox.scss

@@ -36,6 +36,7 @@ $checkbox-spacing: $spacer-3 !default;
 
 	.checkbox-check {
 		display: flex;
+		position: relative;
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;

package/src/components/form/index.scss

@@ -3,3 +3,4 @@
 @import './checkbox.scss';
 @import './input.scss';
 @import './textarea.scss';
+@import './select.scss';

package/src/components/form/input.scss

@@ -40,8 +40,12 @@ $input-focus-box-shadow-size: 0 0 0 0.125rem !default;
 	}
 
 	@include focus-visible {
+		@extend %focus;
+
 		border-color: $input-focus-border-color;
-		outline: none !important;
+		outline-color: transparent;
+		outline-offset: 0;
+		outline-style: solid;
 		box-shadow: $input-focus-box-shadow-size $input-focus-border-color;
 	}
 
@@ -57,7 +61,6 @@ $input-focus-box-shadow-size: 0 0 0 0.125rem !default;
 		border-color: $input-danger-border-color;
 
 		@include focus-visible() {
-			outline: none !important;
 			box-shadow: $input-focus-box-shadow-size $input-danger-border-color;
 		}
 	}
@@ -66,7 +69,6 @@ $input-focus-box-shadow-size: 0 0 0 0.125rem !default;
 		border-color: $input-success-border-color;
 
 		@include focus-visible() {
-			outline: none !important;
 			box-shadow: $input-focus-box-shadow-size $input-success-border-color;
 		}
 	}

package/src/components/form/select.scss

@@ -0,0 +1,123 @@
+/* stylelint-disable selector-no-qualifying-type */
+
+$select-color: $text !default;
+$select-background-color: $body-background !default;
+$select-border-color: $text !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;
+		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;
+			top: 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-top: 0;
+			border-right: 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 {
+			@include control-sm;
+		}
+	}
+
+	&.select-lg {
+		font-size: $control-lg-font-size;
+
+		select {
+			@include control-lg;
+		}
+	}
+
+	&.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

@@ -51,8 +51,12 @@ $textarea-focus-box-shadow-size: 0 0 0 0.125rem !default;
 	}
 
 	@include focus-visible {
+		@extend %focus;
+
 		border-color: $textarea-focus-border-color;
-		outline: none !important;
+		outline-color: transparent;
+		outline-offset: 0;
+		outline-style: solid;
 		box-shadow: $textarea-focus-box-shadow-size $textarea-focus-border-color;
 	}
 
@@ -64,15 +68,14 @@ $textarea-focus-box-shadow-size: 0 0 0 0.125rem !default;
 		border-color: $textarea-danger-border-color;
 
 		@include focus-visible() {
-			outline: none !important;
 			box-shadow: $textarea-focus-box-shadow-size $textarea-danger-border-color;
 		}
 	}
 
 	&.textarea-success {
 		border-color: $textarea-success-border-color;
+
 		@include focus-visible() {
-			outline: none !important;
 			box-shadow: $textarea-focus-box-shadow-size $textarea-success-border-color;
 		}
 	}