@clayui/css 3.91.0 → 3.93.0

package/src/scss/components/_labels.scss

@@ -89,31 +89,33 @@
 // Label Sizes
 
 @each $selector, $value in $label-sizes {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	@if (starts-with($selector, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-label-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($selector, '.') or starts-with($selector, '#'),
-			'%#{str-slice($selector, 2)}',
-			'%#{$selector}'
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-label-variant($value);
-		}
+		@if (starts-with($selector, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($selector, '.') or starts-with($selector, '#'),
+				'%#{str-slice($selector, 2)}',
+				'%#{$selector}'
+			);
+
+			#{$placeholder} {
+				@include clay-label-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }
@@ -121,31 +123,33 @@
 // Label Variants
 
 @each $color, $value in $label-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.label-', 1)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-label-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%label-#{$color}'
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.label-', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-label-variant($value);
-		}
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($color, '.') or starts-with($color, '#'),
+				'%#{str-slice($color, 2)}',
+				'%label-#{$color}'
+			);
+
+			#{$placeholder} {
+				@include clay-label-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }

package/src/scss/components/_list-group.scss

@@ -410,20 +410,22 @@
 // List Group Item Variants
 
 @each $color, $value in $list-group-item-theme-colors {
-	.list-group-item-#{$color} {
-		@include clay-css($value);
+	@if not clay-is-map-unset($value) {
+		.list-group-item-#{$color} {
+			@include clay-css($value);
 
-		&.list-group-item-action {
-			&:hover {
-				@include clay-css(map-get($value, hover));
-			}
+			&.list-group-item-action {
+				&:hover {
+					@include clay-css(map-get($value, hover));
+				}
 
-			&:focus {
-				@include clay-css(map-get($value, focus));
-			}
+				&:focus {
+					@include clay-css(map-get($value, focus));
+				}
 
-			&.active {
-				@include clay-css(map-get($value, active));
+				&.active {
+					@include clay-css(map-get($value, active));
+				}
 			}
 		}
 	}

package/src/scss/components/_loaders.scss

@@ -79,31 +79,35 @@
 // Loading Animation Sizes
 
 @each $selector, $value in $loading-animation-sizes {
-	$_selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$_selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
+		);
 
-	#{$_selector} {
-		@include clay-spinner-variant($value);
+		#{$_selector} {
+			@include clay-spinner-variant($value);
+		}
 	}
 }
 
 // Loading Animation Variants
 
 @each $selector, $value in $loading-animation-palette {
-	$_selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$_selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
+		);
 
-	#{$_selector} {
-		@include clay-spinner-variant($value);
+		#{$_selector} {
+			@include clay-spinner-variant($value);
+		}
 	}
 }

package/src/scss/components/_modals.scss

@@ -490,8 +490,10 @@
 // Modal Variants
 
 @each $color, $value in $modal-palette {
-	.modal-#{$color} {
-		@include clay-modal-variant($value);
+	@if not clay-is-map-unset($value) {
+		.modal-#{$color} {
+			@include clay-modal-variant($value);
+		}
 	}
 }
 

package/src/scss/components/_multi-step-nav.scss

@@ -121,6 +121,45 @@
 		}
 	}
 
+	&.error {
+		@include clay-css($multi-step-item-error);
+
+		.multi-step-title {
+			@include clay-css(
+				map-get($multi-step-item-error, multi-step-title)
+			);
+		}
+
+		.multi-step-icon {
+			$_multi-step-icon: setter(
+				map-get($multi-step-item-error, multi-step-icon)
+			);
+
+			@include clay-css($_multi-step-icon);
+
+			&[data-multi-step-icon] {
+				$_data-multi-step-icon: setter(
+					map-get($_multi-step-icon, data-multi-step-icon),
+					()
+				);
+
+				&::before {
+					@include clay-css(map-get($_data-multi-step-icon, before));
+				}
+			}
+
+			.lexicon-icon {
+				@include clay-css(map-get($_multi-step-icon, lexicon-icon));
+			}
+		}
+
+		.multi-step-divider {
+			@include clay-css(
+				map-get($multi-step-item-error, multi-step-divider)
+			);
+		}
+	}
+
 	&.disabled {
 		.multi-step-title {
 			color: $multi-step-title-disabled-color;
@@ -218,6 +257,9 @@
 .multi-step-icon {
 	align-items: center;
 	background-color: $multi-step-icon-bg;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: $multi-step-icon-font-size;
 	border-color: $multi-step-icon-border-color;
 	border-radius: $multi-step-icon-border-radius;
 	border-style: $multi-step-icon-border-style;
@@ -233,7 +275,9 @@
 	padding-left: $multi-step-icon-padding-left;
 	padding-right: $multi-step-icon-padding-right;
 	padding-top: $multi-step-icon-padding-top;
-	transition: $multi-step-icon-transition;
+
+	@include transition($multi-step-icon-transition);
+
 	width: $multi-step-icon-size;
 
 	&:hover {

package/src/scss/components/_navs.scss

@@ -135,20 +135,8 @@
 .nav-tabs {
 	@include clay-nav-variant($nav-tabs);
 
-	.dropdown-menu {
-		@include border-top-radius(0);
-
-		margin-top: math-sign($nav-tabs-border-width);
-	}
-
 	+ .tab-content {
 		.tab-pane {
-			background-color: $nav-tabs-tab-pane-bg;
-
-			@include border-radius($nav-tabs-tab-pane-border-radius);
-
-			padding: $nav-tabs-tab-pane-padding;
-
 			&.active:first-child {
 				border-top-left-radius: 0;
 			}
@@ -201,13 +189,15 @@
 // Nav Variants
 
 @each $key, $value in $nav-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-nav-variant($value);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-nav-variant($value);
+		}
 	}
 }

package/src/scss/components/_popovers.scss

@@ -1,16 +1,18 @@
 // Popovers
 
 @each $selector, $value in $popovers {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
+		);
 
-	#{$selector} {
-		@include clay-popover-variant($value);
+		#{$selector} {
+			@include clay-popover-variant($value);
+		}
 	}
 }
 
@@ -150,32 +152,36 @@
 // Popover Headers
 
 @each $selector, $value in $popover-headers {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
+		);
 
-	#{$selector} {
-		@include clay-popover-header-variant($value);
+		#{$selector} {
+			@include clay-popover-header-variant($value);
+		}
 	}
 }
 
 // Popover Bodies
 
 @each $selector, $value in $popover-bodies {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($selector, '.') or
+				starts-with($selector, '#') or
+				starts-with($selector, '%'),
+			$selector,
+			str-insert($selector, '.', 1)
+		);
 
-	#{$selector} {
-		@include clay-popover-header-variant($value);
+		#{$selector} {
+			@include clay-popover-header-variant($value);
+		}
 	}
 }
 

package/src/scss/components/_progress-bars.scss

@@ -61,6 +61,10 @@
 				animation: none;
 			}
 		}
+
+		.c-prefers-reduced-motion & {
+			animation: none;
+		}
 	}
 }
 
@@ -122,40 +126,42 @@
 // Progress Variants
 
 @each $color, $value in $progress-palette {
-	.progress-#{$color} {
-		.progress-bar {
-			$progress-bar: setter(map-get($value, progress-bar), ());
-			$progress-bar: map-merge(
-				$progress-bar,
-				(
-					background-color:
-						setter(
-							map-get($progress-bar, background-color),
-							map-get($value, bar-bg)
-						),
-				)
-			);
-
-			@include clay-css($progress-bar);
-		}
+	@if not clay-is-map-unset($value) {
+		.progress-#{$color} {
+			.progress-bar {
+				$progress-bar: setter(map-get($value, progress-bar), ());
+				$progress-bar: map-merge(
+					$progress-bar,
+					(
+						background-color:
+							setter(
+								map-get($progress-bar, background-color),
+								map-get($value, bar-bg)
+							),
+					)
+				);
+
+				@include clay-css($progress-bar);
+			}
 
-		.progress-group-feedback {
-			$progress-group-feedback: setter(
-				map-get($value, progress-group-feedback),
-				()
-			);
-			$progress-group-feedback: map-merge(
-				$progress-group-feedback,
-				(
-					color:
-						setter(
-							map-get($progress-group-feedback, color),
-							map-get($value, group-feedback-color)
-						),
-				)
-			);
-
-			@include clay-css($progress-group-feedback);
+			.progress-group-feedback {
+				$progress-group-feedback: setter(
+					map-get($value, progress-group-feedback),
+					()
+				);
+				$progress-group-feedback: map-merge(
+					$progress-group-feedback,
+					(
+						color:
+							setter(
+								map-get($progress-group-feedback, color),
+								map-get($value, group-feedback-color)
+							),
+					)
+				);
+
+				@include clay-css($progress-group-feedback);
+			}
 		}
 	}
 }

package/src/scss/components/_sheets.scss

@@ -64,6 +64,45 @@
 	}
 }
 
+.sheet-row {
+	@include clay-css($sheet-row);
+
+	@if (map-get($sheet-row, media-breakpoint-up)) {
+		@each $breakpoint in map-keys(map-get($sheet-row, media-breakpoint-up))
+		{
+			$media-breakpoint-up: map-deep-get(
+				$sheet-row,
+				media-breakpoint-up,
+				$breakpoint
+			);
+
+			@if ($breakpoint) {
+				@include media-breakpoint-up($breakpoint) {
+					@include clay-css($media-breakpoint-up);
+				}
+			}
+		}
+	}
+
+	@if (map-get($sheet-row, media-breakpoint-down)) {
+		@each $breakpoint
+			in map-keys(map-get($sheet-row, media-breakpoint-down))
+		{
+			$media-breakpoint-down: map-deep-get(
+				$sheet-row,
+				media-breakpoint-down,
+				$breakpoint
+			);
+
+			@if ($breakpoint) {
+				@include media-breakpoint-down($breakpoint) {
+					@include clay-css($media-breakpoint-down);
+				}
+			}
+		}
+	}
+}
+
 .sheet-header {
 	margin-bottom: $sheet-header-margin-bottom;
 

package/src/scss/components/_side-navigation.scss

@@ -91,14 +91,14 @@
 	.sidenav-content,
 	.sidenav-menu,
 	.sidenav-menu-slider {
-		transition: $sidenav-transition;
+		@include transition($sidenav-transition);
 	}
 }
 
 // Simple Sidenav Transition
 
 .sidenav-transition {
-	transition: $sidenav-transition;
+	@include transition($sidenav-transition);
 }
 
 // Simple Sidenav

package/src/scss/components/_sidebar.scss

@@ -105,15 +105,17 @@
 // Sidebar Variants
 
 @each $color, $value in $sidebar-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-sidebar-variant($value);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			str-insert($color, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-sidebar-variant($value);
+		}
 	}
 }

package/src/scss/components/_spinners.scss

@@ -17,6 +17,16 @@
 		height: $spinner-height;
 		vertical-align: text-bottom;
 		width: $spinner-width;
+
+		@if $enable-prefers-reduced-motion-media-query {
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
+		}
+
+		.c-prefers-reduced-motion & {
+			animation: none;
+		}
 	}
 
 	.spinner-border-sm {
@@ -45,6 +55,16 @@
 		opacity: 0;
 		vertical-align: text-bottom;
 		width: $spinner-width;
+
+		@if $enable-prefers-reduced-motion-media-query {
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+			}
+		}
+
+		.c-prefers-reduced-motion & {
+			animation: none;
+		}
 	}
 
 	.spinner-grow-sm {