@clayui/css 3.82.0 → 3.83.1

package/src/scss/components/_sidebar.scss

@@ -1,8 +1,10 @@
 .sidebar {
-	height: 100%;
-	overflow: auto;
+	@include clay-css($sidebar);
 
-	-webkit-overflow-scrolling: touch;
+	&:focus,
+	&.focus {
+		@include clay-css(map-get($sidebar, focus));
+	}
 
 	.container-fluid {
 		padding-left: $sidebar-padding-left;
@@ -12,35 +14,32 @@
 
 // Sidebar Header / Footer
 
-.sidebar-header,
-.sidebar-footer {
-	padding-bottom: $sidebar-padding-bottom;
-	padding-left: $sidebar-padding-left;
-	padding-right: $sidebar-padding-right;
-	padding-top: $sidebar-padding-top;
-}
-
 .sidebar-header {
+	$sidebar-header: setter(map-get($sidebar, sidebar-header), ());
+
+	@include clay-css($sidebar-header);
+
 	.component-title {
-		@include clay-text-typography($sidebar-header-component-title);
+		@include clay-text-typography(
+			map-get($sidebar-header, component-title)
+		);
 	}
 
 	.component-subtitle {
-		@include clay-text-typography($sidebar-header-component-subtitle);
+		@include clay-text-typography(
+			map-get($sidebar-header, component-subtitle)
+		);
 	}
 }
 
+.sidebar-footer {
+	@include clay-css(map-get($sidebar, sidebar-footer));
+}
+
 // Sidebar Body
 
 .sidebar-body {
-	overflow: auto;
-
-	-webkit-overflow-scrolling: touch;
-
-	padding-bottom: $sidebar-padding-bottom;
-	padding-left: $sidebar-padding-left;
-	padding-right: $sidebar-padding-right;
-	padding-top: $sidebar-padding-top;
+	@include clay-css(map-get($sidebar, sidebar-body));
 
 	> .sidebar-section {
 		margin-bottom: 2rem;
@@ -61,11 +60,9 @@
 // Sidebar List Group
 
 .sidebar-list-group {
-	display: flex;
-	flex-direction: column;
-	font-size: $sidebar-list-group-font-size;
-	margin-bottom: 0;
-	padding-left: 0;
+	$sidebar-list-group: setter(map-get($sidebar, sidebar-list-group));
+
+	@include clay-css($sidebar-list-group);
 
 	@extend %#{$sidebar-list-group-type} !optional;
 
@@ -81,31 +78,28 @@
 	}
 
 	.list-group-item {
-		background-color: $sidebar-list-group-bg;
-		border-color: $sidebar-list-group-border-color;
-		padding: $sidebar-list-group-item-padding;
+		@include clay-css(map-get($sidebar-list-group, list-group-item));
 	}
 
 	.sticker {
-		@include clay-sticker-variant($sidebar-list-group-sticker-size);
+		@include clay-sticker-variant(map-get($sidebar-list-group, sticker));
 	}
 }
 
 // Sidebar Panel
 
 .sidebar-panel {
-	margin-bottom: $sidebar-panel-margin-bottom;
-	position: relative;
+	@include clay-css(map-get($sidebar, sidebar-panel));
 }
 
 // Sidebar Definition List (dl dt dd)
 
 .sidebar-dt {
-	@include clay-text-typography($sidebar-dt);
+	@include clay-text-typography(map-get($sidebar, sidebar-dt));
 }
 
 .sidebar-dd {
-	@include clay-text-typography($sidebar-dd);
+	@include clay-text-typography(map-get($sidebar, sidebar-dd));
 }
 
 // Sidebar Variants

package/src/scss/components/_spinners.scss

@@ -9,9 +9,10 @@
 
 	.spinner-border {
 		animation: spinner-border 0.75s linear infinite;
+		border-color: currentColor transparent currentColor currentColor;
 		border-radius: 50%;
-		border-right-color: transparent;
-		border: $spinner-border-width solid currentColor;
+		border-style: solid;
+		border-width: $spinner-border-width;
 		display: inline-block;
 		height: $spinner-height;
 		vertical-align: text-bottom;

package/src/scss/mixins/_dropdown-menu.scss

@@ -99,12 +99,36 @@
 				@include clay-css(map-get($map, show));
 			}
 
+			.dropdown-header {
+				@include clay-css(map-get($map, dropdown-header));
+			}
+
+			.dropdown-subheader {
+				@include clay-css(map-get($map, dropdown-subheader));
+			}
+
+			.dropdown-section {
+				@include clay-css(map-get($map, dropdown-section));
+			}
+
+			.dropdown-caption {
+				@include clay-css(map-get($map, dropdown-caption));
+			}
+
 			.dropdown-item {
 				@include clay-dropdown-item-variant(
 					map-deep-get($map, dropdown-item)
 				);
 			}
 
+			.dropdown-divider {
+				@include clay-css(map-get($map, dropdown-divider));
+			}
+
+			.dropdown-footer {
+				@include clay-css(map-get($map, dropdown-footer));
+			}
+
 			.alert {
 				@include clay-alert-variant(map-get($map, alert));
 			}
@@ -112,6 +136,54 @@
 			.alert-fluid {
 				@include clay-alert-variant(map-get($map, alert-fluid));
 			}
+
+			&.dropdown-menu-indicator-start {
+				$dropdown-menu-indicator-start: setter(
+					map-get($map, dropdown-menu-indicator-start),
+					()
+				);
+
+				@include clay-css($dropdown-menu-indicator-start);
+
+				.dropdown-item {
+					@include clay-dropdown-item-variant(
+						map-get($dropdown-menu-indicator-start, dropdown-item)
+					);
+				}
+
+				.dropdown-item-indicator-start {
+					@include clay-link(
+						map-get(
+							$dropdown-menu-indicator-start,
+							dropdown-item-indicator-start
+						)
+					);
+				}
+			}
+
+			&.dropdown-menu-indicator-end {
+				$dropdown-menu-indicator-end: setter(
+					map-get($map, dropdown-menu-indicator-end),
+					()
+				);
+
+				@include clay-css($dropdown-menu-indicator-end);
+
+				.dropdown-item {
+					@include clay-dropdown-item-variant(
+						map-get($dropdown-menu-indicator-end, dropdown-item)
+					);
+				}
+
+				.dropdown-item-indicator-end {
+					@include clay-link(
+						map-get(
+							$dropdown-menu-indicator-end,
+							dropdown-item-indicator-end
+						)
+					);
+				}
+			}
 		}
 	}
 }
@@ -477,7 +549,8 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
-			&:hover {
+			&:hover,
+			&.hover {
 				@include clay-css($hover);
 
 				&::before {
@@ -493,7 +566,8 @@
 				}
 			}
 
-			&:focus {
+			&:focus,
+			&.focus {
 				@include clay-css($focus);
 
 				&::before {

package/src/scss/mixins/_forms.scss

@@ -543,7 +543,8 @@
 				@include clay-css(map-deep-get($map, input-group-inset-item));
 			}
 
-			&:hover {
+			&:hover,
+			&.hover {
 				@include clay-css($hover);
 
 				&::placeholder {
@@ -572,6 +573,14 @@
 				}
 			}
 
+			&:active {
+				@include clay-css(map-get($map, active));
+			}
+
+			&.active {
+				@include clay-css(map-get($map, active-class));
+			}
+
 			// @deprecated after v2.18.0 [readonly] can have hover focus styles, declare a separate selector and use `clay-form-control-variant` mixin (e.g., `.form-control[readonly] { @include clay-form-control-variant($the-readonly-map); }`).
 
 			&[readonly] {
@@ -857,12 +866,11 @@
 			)
 		);
 
-		$option: setter(map-get($map, option), ());
-
 		@if ($enabled) {
 			@include clay-css($base);
 
-			&:hover {
+			&:hover,
+			&.hover {
 				@include clay-css($hover);
 
 				> option {
@@ -891,6 +899,54 @@
 				}
 			}
 
+			&:active {
+				$active: setter(map-get($map, active), ());
+
+				@include clay-css($active);
+
+				> option {
+					$option: setter(map-get($active, option), ());
+
+					@include clay-css($option);
+
+					&:checked {
+						@include clay-css(map-get($option, checked));
+					}
+				}
+			}
+
+			&.active {
+				$active-class: setter(map-get($map, active-class), ());
+
+				@include clay-css($active-class);
+
+				> option {
+					$option: setter(map-get($active-class, option), ());
+
+					@include clay-css($option);
+
+					&:checked {
+						@include clay-css(map-get($option, checked));
+					}
+				}
+			}
+
+			&.show {
+				$show: setter(map-get($map, show), ());
+
+				@include clay-css($show);
+
+				> option {
+					$option: setter(map-get($show, option), ());
+
+					@include clay-css($option);
+
+					&:checked {
+						@include clay-css(map-get($option, checked));
+					}
+				}
+			}
+
 			&:disabled,
 			&.disabled {
 				@include clay-css($disabled);
@@ -905,6 +961,8 @@
 			}
 
 			option {
+				$option: setter(map-get($map, option), ());
+
 				@include clay-css($option);
 
 				&:checked {
@@ -916,7 +974,8 @@
 				@-moz-document url-prefix() {
 					@include clay-css(map-get($map, firefox-only));
 
-					&:hover {
+					&:hover,
+					&.hover {
 						@include clay-css(
 							map-deep-get($map, firefox-only, hover)
 						);

package/src/scss/mixins/_sidebar.scss

@@ -244,6 +244,11 @@
 				}
 			}
 
+			&:focus,
+			&.focus {
+				@include clay-css(map-get($map, focus));
+			}
+
 			.component-link {
 				@include clay-text-typography(map-get($map, component-link));
 			}

package/src/scss/variables/_dropdowns.scss

@@ -936,3 +936,55 @@ $dropdown-menu: map-deep-merge(
 	),
 	$dropdown-menu
 );
+
+// Dropdown Menu Variants
+
+$dropdown-menu-palette: () !default;
+$dropdown-menu-palette: map-deep-merge(
+	(
+		'.dropdown-menu-select.dropdown-menu': (
+			dropdown-header: (
+				padding-bottom: 0.375rem,
+				padding-left: 1.75rem,
+				padding-right: 1.75rem,
+				padding-top: 0.3125rem,
+			),
+			dropdown-subheader: (
+				padding-bottom: 0.4375rem,
+				padding-left: 1.75rem,
+				padding-right: 1.75rem,
+				padding-top: 0.4375rem,
+			),
+			dropdown-section: (
+				padding-left: 1.75rem,
+				padding-right: 1.75rem,
+			),
+			dropdown-item: (
+				padding-bottom: 0.375rem,
+				padding-left: 1.75rem,
+				padding-right: 1.75rem,
+				padding-top: 0.3125rem,
+				'&.autofit-row': (
+					padding-left: 1.5rem,
+					padding-right: 1.5rem,
+				),
+			),
+			dropdown-divider: (
+				margin: 0.3125rem 0,
+			),
+			dropdown-menu-indicator-start: (
+				dropdown-item-indicator-start: (
+					left: 0.5rem,
+					top: 0.5rem,
+				),
+			),
+			dropdown-menu-indicator-end: (
+				dropdown-item-indicator-end: (
+					right: 0.5rem,
+					top: 0.5rem,
+				),
+			),
+		),
+	),
+	$dropdown-menu-palette
+);

package/src/scss/variables/_forms.scss

@@ -110,6 +110,10 @@ $input: map-deep-merge(
 	$input
 );
 
+// Form Control Variants
+
+$input-palette: () !default;
+
 // Form Control Plaintext
 
 $input-plaintext-color: $body-color !default;
@@ -1248,6 +1252,7 @@ $form-control-select: map-deep-merge(
 				appearance: null,
 				cursor: null,
 				overflow: hidden,
+				text-align: left,
 				text-overflow: ellipsis,
 				white-space: nowrap,
 				hover: (
@@ -1260,6 +1265,12 @@ $form-control-select: map-deep-merge(
 	$form-control-select
 );
 
+// Form Control Select Variants
+
+$form-control-select-palette: () !default;
+
+// Form Control Select Sizes
+
 $form-control-select-sm: () !default;
 $form-control-select-sm: map-deep-merge(
 	(
@@ -1282,6 +1293,7 @@ $input-select-size: map-deep-merge(
 	(
 		background-image: none,
 		height: auto,
+		margin-left: 0,
 		padding-left: 0.5rem,
 		padding-right: 0.5rem,
 		scrollbar-width: thin,

package/src/scss/variables/_sidebar.scss

@@ -77,6 +77,60 @@ $sidebar-list-group-sticker-size: map-deep-merge(
 	$sidebar-list-group-sticker-size
 );
 
+$sidebar: () !default;
+$sidebar: map-deep-merge(
+	(
+		height: 100%,
+		overflow: auto,
+		-webkit-overflow-scrolling: touch,
+		focus: (
+			box-shadow: $component-focus-inset-box-shadow,
+		),
+		sidebar-header: (
+			padding-bottom: $sidebar-padding-bottom,
+			padding-left: $sidebar-padding-left,
+			padding-right: $sidebar-padding-right,
+			padding-top: $sidebar-padding-top,
+			component-title: $sidebar-header-component-title,
+			component-subtitle: $sidebar-header-component-subtitle,
+		),
+		sidebar-footer: (
+			padding-bottom: $sidebar-padding-bottom,
+			padding-left: $sidebar-padding-left,
+			padding-right: $sidebar-padding-right,
+			padding-top: $sidebar-padding-top,
+		),
+		sidebar-body: (
+			overflow: auto,
+			-webkit-overflow-scrolling: touch,
+			padding-bottom: $sidebar-padding-bottom,
+			padding-left: $sidebar-padding-left,
+			padding-right: $sidebar-padding-right,
+			padding-top: $sidebar-padding-top,
+		),
+		sidebar-list-group: (
+			display: flex,
+			flex-direction: column,
+			font-size: $sidebar-list-group-font-size,
+			margin-bottom: 0,
+			padding-left: 0,
+			list-group-item: (
+				background-color: $sidebar-list-group-bg,
+				border-color: $sidebar-list-group-border-color,
+				padding: $sidebar-list-group-item-padding,
+			),
+			sticker: $sidebar-list-group-sticker-size,
+		),
+		sidebar-panel: (
+			margin-bottom: $sidebar-panel-margin-bottom,
+			position: relative,
+		),
+		sidebar-dt: $sidebar-dt,
+		sidebar-dd: $sidebar-dd,
+	),
+	$sidebar
+);
+
 // Sidebar Light
 
 $sidebar-light-navigation-bar: () !default;

package/src/scss/variables/_utilities.scss

@@ -357,8 +357,8 @@ $border-theme-colors: map-deep-merge(
 
 // Display
 
-$displays: none, inline, inline-block, block, grid, table, table-row, table-cell,
-	flex, inline-flex !default;
+$displays: none, inline, inline-block, block, grid, contents, table, table-row,
+	table-cell, flex, inline-flex !default;
 
 // Overflow