@clayui/css 3.92.0 → 3.93.0

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 {

package/src/scss/components/_stickers.scss

@@ -54,31 +54,33 @@
 // Sticker Sizes
 
 @each $selector, $value in $sticker-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-sticker-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-sticker-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($selector, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($selector, '.') or starts-with($selector, '#'),
+				'%#{str-slice($selector, 2)}',
+				'%#{$selector}'
+			);
+
+			#{$placeholder} {
+				@include clay-sticker-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }
@@ -86,31 +88,33 @@
 // Sticker Variants
 
 @each $color, $value in $sticker-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.sticker-', 1)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-sticker-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%sticker-#{$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, '.sticker-', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-sticker-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-sticker-variant($value);
+			}
+		} @else {
+			$placeholder: if(
+				starts-with($color, '.') or starts-with($color, '#'),
+				'%#{str-slice($color, 2)}',
+				'%sticker-#{$color}'
+			);
+
+			#{$placeholder} {
+				@include clay-sticker-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }

package/src/scss/components/_tables.scss

@@ -78,44 +78,46 @@ caption {
 // Table Row Backgrounds
 
 @each $color, $value in $table-row-theme-colors {
-	.table {
-		.table-#{$color} {
-			$table-row: setter($value, ());
-
-			&,
-			> th,
-			> td {
-				@include clay-css($table-row);
-
-				.table-title {
-					@include clay-text-typography(
-						map-get($table-row, table-title)
-					);
+	@if not clay-is-map-unset($value) {
+		.table {
+			.table-#{$color} {
+				$table-row: setter($value, ());
+
+				&,
+				> th,
+				> td {
+					@include clay-css($table-row);
+
+					.table-title {
+						@include clay-text-typography(
+							map-get($table-row, table-title)
+						);
+					}
 				}
-			}
 
-			th,
-			td,
-			thead th,
-			tbody + tbody {
-				border-color: map-get($table-row, border-color);
+				th,
+				td,
+				thead th,
+				tbody + tbody {
+					border-color: map-get($table-row, border-color);
+				}
 			}
 		}
-	}
 
-	// Hover states for `.table-hover`
-	// Note: this is not available for cells or rows within `thead` or `tfoot`.
+		// Hover states for `.table-hover`
+		// Note: this is not available for cells or rows within `thead` or `tfoot`.
 
-	.table-hover {
-		$hover: setter(map-get($value, hover), ());
+		.table-hover {
+			$hover: setter(map-get($value, hover), ());
 
-		.table-#{$color} {
-			&:hover {
-				@include clay-css($hover);
+			.table-#{$color} {
+				&:hover {
+					@include clay-css($hover);
 
-				> td,
-				> th {
-					background-color: map-get($hover, background-color);
+					> td,
+					> th {
+						background-color: map-get($hover, background-color);
+					}
 				}
 			}
 		}

package/src/scss/components/_utilities-functional-important.scss

@@ -25,31 +25,35 @@
 // Background
 
 @each $color, $value in $bg-theme-colors {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.bg-', 1)
-	);
-
-	#{$selector} {
-		@include clay-css($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, '.bg-', 1)
+		);
+
+		#{$selector} {
+			@include clay-css($value);
+		}
 
-	a#{$selector},
-	button#{$selector} {
-		&:hover,
-		&:focus {
-			@include clay-css(map-get($value, hover));
+		a#{$selector},
+		button#{$selector} {
+			&:hover,
+			&:focus {
+				@include clay-css(map-get($value, hover));
+			}
 		}
 	}
 }
 
 @if $enable-gradients {
 	@each $color, $value in $bg-gradient-theme-colors {
-		.bg-gradient-#{$color} {
-			@include clay-css($value);
+		@if not clay-is-map-unset($value) {
+			.bg-gradient-#{$color} {
+				@include clay-css($value);
+			}
 		}
 	}
 }
@@ -97,16 +101,18 @@
 }
 
 @each $color, $value in $border-theme-colors {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.border-', 1)
-	);
-
-	#{$selector} {
-		@include clay-css($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, '.border-', 1)
+		);
+
+		#{$selector} {
+			@include clay-css($value);
+		}
 	}
 }
 
@@ -732,16 +738,18 @@
 // Font Sizes
 
 @each $selector, $value in $font-sizes {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-css($value);
+	@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-css($value);
+		}
 	}
 }
 
@@ -752,22 +760,24 @@
 }
 
 @each $color, $value in $text-theme-colors {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		str-insert($color, '.text-', 1)
-	);
-
-	#{$selector} {
-		@include clay-css($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, '.text-', 1)
+		);
+
+		#{$selector} {
+			@include clay-css($value);
+		}
 
-	a#{$selector} {
-		&:hover,
-		&:focus {
-			@include clay-css(map-get($value, hover));
+		a#{$selector} {
+			&:hover,
+			&:focus {
+				@include clay-css(map-get($value, hover));
+			}
 		}
 	}
 }
@@ -783,16 +793,18 @@
 }
 
 @each $key, $value in $text-decorations {
-	$selector: if(
-		starts-with($key, '.') or
-			starts-with($key, '#') or
-			starts-with($key, '%'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-link($value);
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or
+				starts-with($key, '#') or
+				starts-with($key, '%'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-link($value);
+		}
 	}
 }
 

package/src/scss/functions/_global-functions.scss

@@ -8,6 +8,13 @@
 @import '_lx-icons-generated.scss';
 @import '_type-conversion-functions.scss';
 
+/// A function that checks if the value contains the key word `c-unset` or `clay-unset`
+/// @param {Any} $value The value to check
+
+@function clay-is-map-unset($value) {
+	@return if(($value == c-unset) or ($value == clay-unset), true, false);
+}
+
 /// A helper function that calculates text-indent of data-label-on and data-label-off in a `.toggle-switch`.
 /// @param {Number} $toggle-switch-width - Width of switch bar
 /// @param {Number} $toggle-switch-padding - Space between button and bar
@@ -52,6 +59,10 @@
 /// @param {Map, Null} $map2[()]
 
 @function map-deep-merge($map1: (), $map2: ()) {
+	// @if ($map1 == c-unset or $map2 == c-unset) or ($map1 == clay-unset or $map2 == clay-unset) {
+	// 	@return null;
+	// }
+
 	@if (type-of($map1) == 'list' and length($map1) == 0) or
 		(type-of($map1) == 'null')
 	{
@@ -140,7 +151,20 @@
 	@return nth($selector-list, length($selector-list));
 }
 
-/// A function that inserts a CSS selector at a specific place (e.g., clay-insert-at('.container', '#content ', '#wrapper .container .row')) will return `#wrapper #content .container .row`.
+/// A function that appends to a specific place in a CSS selector (e.g., clay-insert-after('.container ', '.myselector ', '.container .row .col-md-12')) will return `.container .myselector .row .col-md-12`.
+/// @param {String} $location - The string to target
+/// @param {String} $insert - The string to insert after the location
+/// @param {String} $selector - The full selector
+
+@function clay-insert-after($location, $insert, $selector: &) {
+	@return clay-str-replace(
+		'#{$selector}',
+		'#{$location}',
+		'#{$location}#{$insert}'
+	);
+}
+
+/// A function that prepends to a specific place in a CSS selector (e.g., clay-insert-before('.container ', '.myselector ', '.container .row .col-md-12')) will return `.myselector .container .row .col-md-12`.
 /// @param {String} $location - The string to target
 /// @param {String} $insert - The string to insert before the location
 /// @param {String} $selector - The full selector

package/src/scss/mixins/_alerts.scss

@@ -236,15 +236,17 @@
 			}
 
 			@each $key, $properties in map-get($map, custom-selectors) {
-				@if ($key) {
-					$selector: if(
-						starts-with($key, '.') or starts-with($key, '#'),
-						$key,
-						str-insert($key, '.', 1)
-					);
-
-					#{$selector} {
-						@include clay-button-variant($properties);
+				@if not clay-is-map-unset($properties) {
+					@if ($key) {
+						$selector: if(
+							starts-with($key, '.') or starts-with($key, '#'),
+							$key,
+							str-insert($key, '.', 1)
+						);
+
+						#{$selector} {
+							@include clay-button-variant($properties);
+						}
 					}
 				}
 			}