@clayui/css 3.81.0 → 3.83.0

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/components/_utilities.scss

@@ -324,6 +324,28 @@
 	background-color: $page-header-bg;
 }
 
+// Clay Gap
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+	@include media-breakpoint-up($breakpoint) {
+		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+		@each $size, $length in $c-gap {
+			.c-gap#{$infix}-#{$size} {
+				gap: $length;
+			}
+
+			.c-gapx#{$infix}-#{$size} {
+				column-gap: $length;
+			}
+
+			.c-gapy#{$infix}-#{$size} {
+				row-gap: $length;
+			}
+		}
+	}
+}
+
 // Clay Margin and Padding
 
 @each $breakpoint in map-keys($grid-breakpoints) {

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] {
@@ -862,7 +871,8 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
-			&:hover {
+			&:hover,
+			&.hover {
 				@include clay-css($hover);
 
 				> option {
@@ -891,6 +901,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);
@@ -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/_globals.scss

@@ -119,6 +119,7 @@
 			'font-style',
 			'font-variant',
 			'font-weight',
+			'gap',
 			'grid',
 			'grid-area',
 			'grid-auto-columns',
@@ -199,6 +200,7 @@
 			'position',
 			'resize',
 			'right',
+			'row-gap',
 			'scroll-behavior',
 			'scrollbar-width',
 			'table-layout',

package/src/scss/mixins/_input-groups.scss

@@ -27,7 +27,7 @@
 	$breakpoint: setter(map-get($map, breakpoint), md);
 	$breakpoint-down: clay-breakpoint-prev($breakpoint);
 
-	$item: setter(map-get($map, item), ());
+	$item: setter(map-get($map, input-group-item), map-get($map, item), ());
 	$item: map-merge(
 		$item,
 		(
@@ -55,7 +55,11 @@
 		)
 	);
 
-	$item-shrink: setter(map-get($map, item-shrink), ());
+	$item-shrink: setter(
+		map-get($map, input-group-item-shrink),
+		map-get($map, item-shrink),
+		()
+	);
 	$item-shrink: map-merge(
 		$item-shrink,
 		(

package/src/scss/mixins/_modals.scss

@@ -24,7 +24,7 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$header: setter(map-get($map, header), ());
+		$header: setter(map-get($map, modal-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
 			(
@@ -46,7 +46,11 @@
 			)
 		);
 
-		$header-close: setter(map-get($map, header-close), ());
+		$header-close: setter(
+			map-deep-get($map, header, close),
+			map-get($map, header-close),
+			()
+		);
 		$header-close: map-merge(
 			$header-close,
 			(
@@ -75,7 +79,7 @@
 			)
 		);
 
-		$body: setter(map-get($map, body), ());
+		$body: setter(map-get($map, modal-body), map-get($map, body), ());
 		$body: map-merge(
 			$body,
 			(
@@ -88,7 +92,7 @@
 			)
 		);
 
-		$footer: setter(map-get($map, footer), ());
+		$footer: setter(map-get($map, modal-footer), map-get($map, footer), ());
 		$footer: map-merge(
 			$footer,
 			(

package/src/scss/mixins/_panels.scss

@@ -67,7 +67,7 @@
 			)
 		);
 
-		$header: setter(map-get($map, header), ());
+		$header: setter(map-get($map, panel-header), map-get($map, header), ());
 		$header: map-merge(
 			$header,
 			(
@@ -184,7 +184,7 @@
 		$header-link: setter(map-get($header, link), ());
 		$header-link: map-deep-merge($header-link, $old-header-link);
 
-		$title: setter(map-get($map, title), ());
+		$title: setter(map-get($map, panel-title), map-get($map, title), ());
 		$title: map-merge(
 			$title,
 			(
@@ -238,7 +238,7 @@
 			)
 		);
 
-		$body: setter(map-get($map, body), ());
+		$body: setter(map-get($map, panel-body), map-get($map, body), ());
 		$body: map-merge(
 			$body,
 			(
@@ -285,7 +285,7 @@
 			)
 		);
 
-		$footer: setter(map-get($map, footer), ());
+		$footer: setter(map-get($map, panel-footer), map-get($map, footer), ());
 		$footer: map-merge(
 			$footer,
 			(

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));
 			}