feat(clay-css): Adds Clay Reorder component. A select[multiple] ele…

…ment with buttons that rearrange `option`s inside `select[multiple]`

feat(clay-css): Clay Reorder adds Sass maps `$clay-reorder`, `$clay-reorder-input-inset`, `$clay-reorder-underlay`, `$clay-reorder-underlay-focus`, `$clay-reorder-footer`, `$clay-reorder-footer-invisible`, `$clay-reorder-footer-center`, `$clay-reorder-footer-end`

issue #2896

packages/clay-css/src/scss/_components.scss

@@ -21,6 +21,7 @@
 @import "components/_links";
 
 @import "components/_range";
+@import "components/_reorder";
 
 @import "components/_clay-color";
 @import "components/_custom-forms";

packages/clay-css/src/scss/_variables.scss

@@ -16,6 +16,7 @@
 @import "variables/_links";
 
 @import "variables/_range";
+@import "variables/_reorder";
 
 @import "variables/_clay-color";
 @import "variables/_custom-forms";

packages/clay-css/src/scss/atlas/_variables.scss

@@ -15,6 +15,7 @@
 @import "variables/_links";
 
 @import "variables/_range";
+@import "variables/_reorder";
 
 @import "variables/_clay-color";
 @import "variables/_custom-forms";

packages/clay-css/src/scss/atlas/variables/_reorder.scss

@@ -0,0 +1,4 @@
+$clay-reorder-underlay-focus: () !default;
+$clay-reorder-underlay-focus: map-deep-merge((
+	box-shadow: null,
+), $clay-reorder-underlay-focus);

packages/clay-css/src/scss/components/_reorder.scss

@@ -0,0 +1,45 @@
+.clay-reorder {
+	@include clay-css($clay-reorder);
+
+	.form-control-inset {
+		@include clay-form-control-variant($clay-reorder-input-inset);
+
+		&:focus,
+		&.focus {
+			+ .clay-reorder-underlay {
+				@include clay-css($clay-reorder-underlay-focus);
+			}
+		}
+
+		+ .clay-reorder-underlay {
+			@include clay-css($clay-reorder-underlay);
+		}
+	}
+}
+
+.clay-reorder-footer {
+	@include clay-css($clay-reorder-footer);
+}
+
+.clay-reorder-footer-invisible {
+	&.clay-reorder-footer,
+	.clay-reorder-footer {
+		* {
+			@include clay-css($clay-reorder-footer-invisible);
+		}
+	}
+}
+
+.clay-reorder-footer-center {
+	&.clay-reorder-footer,
+	.clay-reorder-footer {
+		@include clay-css($clay-reorder-footer-center);
+	}
+}
+
+.clay-reorder-footer-end {
+	&.clay-reorder-footer,
+	.clay-reorder-footer {
+		@include clay-css($clay-reorder-footer-end);
+	}
+}

packages/clay-css/src/scss/variables/_reorder.scss

@@ -0,0 +1,56 @@
+$clay-reorder: () !default;
+$clay-reorder: map-deep-merge((
+	padding: 2px,
+	position: relative,
+	z-index: 0,
+), $clay-reorder);
+
+$clay-reorder-input-inset: () !default;
+$clay-reorder-input-inset: map-deep-merge((
+	margin-bottom: 0,
+	margin-top: 0,
+	overflow: auto,
+	padding-bottom: $input-padding-y,
+	padding-top: $input-padding-y,
+	focus: (
+		background-color: transparent,
+		box-shadow: none,
+	),
+), $clay-reorder-input-inset);
+
+$clay-reorder-underlay: () !default;
+$clay-reorder-underlay: map-deep-merge((
+	bottom: 0,
+	left: 0,
+	position: absolute,
+	right: 0,
+	top: 0,
+	z-index: -1,
+), $clay-reorder-underlay);
+
+$clay-reorder-underlay-focus: () !default;
+$clay-reorder-underlay-focus: map-deep-merge((
+	background-color: $input-focus-bg,
+	border-color: $input-focus-border-color,
+	box-shadow: $input-focus-box-shadow,
+), $clay-reorder-underlay-focus);
+
+$clay-reorder-footer: () !default;
+$clay-reorder-footer: map-deep-merge((
+	padding: 0.5rem,
+), $clay-reorder-footer);
+
+$clay-reorder-footer-invisible: () !default;
+$clay-reorder-footer-invisible: map-deep-merge((
+	visibility: hidden,
+), $clay-reorder-footer-invisible);
+
+$clay-reorder-footer-center: () !default;
+$clay-reorder-footer-center: map-deep-merge((
+	text-align: center,
+), $clay-reorder-footer-center);
+
+$clay-reorder-footer-end: () !default;
+$clay-reorder-footer-end: map-deep-merge((
+	text-align: right,
+), $clay-reorder-footer-end);