@clayui/css 3.92.0 → 3.94.0

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);
+		}
 	}
 }
 
@@ -184,6 +190,10 @@
 	display: none !important;
 }
 
+// Display C Reduced Motion
+
+@include clay-map-to-css($displays-c-prefers-reduced-motion);
+
 // Display Print
 
 @media print {
@@ -732,16 +742,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 +764,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 +797,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);
+						}
 					}
 				}
 			}

package/src/scss/mixins/_buttons.scss

@@ -616,6 +616,66 @@
 				@include clay-css(map-get($map, after));
 			}
 
+			&:link {
+				$_link: setter(map-get($map, link), ());
+
+				@include clay-css($_link);
+
+				&::before {
+					@include clay-css(map-get($_link, before));
+				}
+
+				&::after {
+					@include clay-css(map-get($_link, after));
+				}
+
+				.inline-item {
+					@include clay-css(map-get($_link, inline-item));
+				}
+
+				.inline-item-before {
+					@include clay-css(map-get($_link, inline-item-before));
+				}
+
+				.inline-item-middle {
+					@include clay-css(map-get($_link, inline-item-middle));
+				}
+
+				.inline-item-after {
+					@include clay-css(map-get($_link, inline-item-after));
+				}
+			}
+
+			&:visited {
+				$_visited: setter(map-get($map, visited), ());
+
+				@include clay-css($_visited);
+
+				&::before {
+					@include clay-css(map-get($_visited, before));
+				}
+
+				&::after {
+					@include clay-css(map-get($_visited, after));
+				}
+
+				.inline-item {
+					@include clay-css(map-get($_visited, inline-item));
+				}
+
+				.inline-item-before {
+					@include clay-css(map-get($_visited, inline-item-before));
+				}
+
+				.inline-item-middle {
+					@include clay-css(map-get($_visited, inline-item-middle));
+				}
+
+				.inline-item-after {
+					@include clay-css(map-get($_visited, inline-item-after));
+				}
+			}
+
 			&:hover {
 				@include clay-css($hover);
 

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

@@ -549,6 +549,42 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
+			&:link {
+				$_link: setter(map-get($map, link), ());
+
+				@include clay-css($_link);
+
+				&::before {
+					@include clay-css(map-get($_link, before));
+				}
+
+				&::after {
+					@include clay-css(map-get($_link, after));
+				}
+
+				.c-kbd-inline {
+					@include clay-css(map-get($_link, c-kbd-inline));
+				}
+			}
+
+			&:visited {
+				$_visited: setter(map-get($map, visited), ());
+
+				@include clay-css($_visited);
+
+				&::before {
+					@include clay-css(map-get($_visited, before));
+				}
+
+				&::after {
+					@include clay-css(map-get($_visited, after));
+				}
+
+				.c-kbd-inline {
+					@include clay-css(map-get($_visited, c-kbd-inline));
+				}
+			}
+
 			&:hover,
 			&.hover {
 				@include clay-css($hover);

package/src/scss/mixins/_globals.scss

@@ -260,6 +260,30 @@
 					}
 
 					appearance: $value;
+				} @else if ($key == 'animation') {
+					animation: $value;
+
+					@if ($value != 'none' and $value != null) {
+						@at-root {
+							$selector: '.c-prefers-reduced-motion &';
+
+							@if (variable-exists(cadmin-selector)) {
+								$selector: clay-insert-after(
+									'.cadmin ',
+									'.c-prefers-reduced-motion '
+								);
+								$selector: clay-insert-after(
+									'.cadmin.',
+									'c-prefers-reduced-motion.',
+									$selector
+								);
+							}
+
+							#{$selector} {
+								animation: none;
+							}
+						}
+					}
 				} @else if ($key == 'content') {
 					content: $value;
 				} @else if ($key == 'word-wrap') {
@@ -277,7 +301,21 @@
 						}
 
 						@at-root {
-							.c-prefers-reduced-motion & {
+							$selector: '.c-prefers-reduced-motion &';
+
+							@if (variable-exists(cadmin-selector)) {
+								$selector: clay-insert-after(
+									'.cadmin ',
+									'.c-prefers-reduced-motion '
+								);
+								$selector: clay-insert-after(
+									'.cadmin.',
+									'c-prefers-reduced-motion.',
+									$selector
+								);
+							}
+
+							#{$selector} {
 								transition: none;
 							}
 						}
@@ -296,3 +334,47 @@
 		}
 	}
 }
+
+/// A mixin that outputs CSS based on the structure of a Sass map.
+
+@mixin clay-map-to-css($map) {
+	@each $key, $value in $map {
+		@if not clay-is-map-unset($value) {
+			@each $nestedKey, $nestedValue in $value {
+				@if (type-of($nestedValue) == 'map') {
+					$parentSelector: if(
+						starts-with($key, '.') or
+							starts-with($key, '#') or
+							starts-with($key, '@'),
+						$key,
+						str-insert($key, '.', 1)
+					);
+
+					$nestedMap: (#{$nestedKey}: $nestedValue);
+
+					@if (starts-with($parentSelector, '@media ')) {
+						@media #{clay-str-replace('#{$parentSelector}', '@media ', '')} {
+							@include clay-map-to-css($nestedMap);
+						}
+					} @else {
+						#{$parentSelector} {
+							@include clay-map-to-css($nestedMap);
+						}
+					}
+				} @else {
+					$selector: if(
+						starts-with($key, '.') or
+							starts-with($key, '#') or
+							starts-with($key, '@'),
+						$key,
+						str-insert($key, '.', 1)
+					);
+
+					#{$selector} {
+						@include clay-css($value);
+					}
+				}
+			}
+		}
+	}
+}

package/src/scss/mixins/_links.scss

@@ -852,14 +852,16 @@
 
 			@if ($c-link-variants) {
 				@each $key, $value in $c-link-variants {
-					$selector: if(
-						starts-with($key, '.') or starts-with($key, '#'),
-						$key,
-						str-insert($key, '.', 1)
-					);
+					@if not clay-is-map-unset($value) {
+						$selector: if(
+							starts-with($key, '.') or starts-with($key, '#'),
+							$key,
+							str-insert($key, '.', 1)
+						);
 
-					&#{$selector} {
-						@include clay-link($value);
+						&#{$selector} {
+							@include clay-link($value);
+						}
 					}
 				}
 			}

package/src/scss/mixins/_transition.scss

@@ -34,7 +34,21 @@
 		}
 
 		@at-root {
-			.c-prefers-reduced-motion & {
+			$selector: '.c-prefers-reduced-motion &';
+
+			@if (variable-exists(cadmin-selector)) {
+				$selector: clay-insert-after(
+					'.cadmin ',
+					'.c-prefers-reduced-motion '
+				);
+				$selector: clay-insert-after(
+					'.cadmin.',
+					'c-prefers-reduced-motion.',
+					$selector
+				);
+			}
+
+			#{$selector} {
 				transition: none;
 			}
 		}

package/src/scss/variables/_sheets.scss

@@ -27,6 +27,23 @@ $sheet-plus-sheet: map-merge(
 	$sheet-plus-sheet
 );
 
+// Sheet Row
+
+$sheet-row: () !default;
+$sheet-row: map-merge(
+	(
+		margin-left: math-sign($sheet-padding-left),
+		margin-right: math-sign($sheet-padding-right),
+		media-breakpoint-down: (
+			sm: (
+				margin-left: math-sign($sheet-padding-left-mobile),
+				margin-right: math-sign($sheet-padding-right-mobile),
+			),
+		),
+	),
+	$sheet-row
+);
+
 // Sheet Header
 
 $sheet-header-margin-bottom: 3rem !default; // 48px

package/src/scss/variables/_utilities.scss

@@ -360,6 +360,41 @@ $border-theme-colors: map-deep-merge(
 $displays: none, inline, inline-block, block, grid, contents, table, table-row,
 	table-cell, flex, inline-flex !default;
 
+$displays-c-prefers-reduced-motion: () !default;
+$displays-c-prefers-reduced-motion: map-deep-merge(
+	(
+		d-block-c-prefers-reduced-motion: (
+			display: none !important,
+		),
+		d-inline-block-c-prefers-reduced-motion: (
+			display: none !important,
+		),
+		'@media (prefers-reduced-motion: reduce)': (
+			d-none-c-prefers-reduced-motion: (
+				display: none !important,
+			),
+			d-block-c-prefers-reduced-motion: (
+				display: block !important,
+			),
+			d-inline-block-c-prefers-reduced-motion: (
+				display: inline-block !important,
+			),
+		),
+		c-prefers-reduced-motion: (
+			d-none-c-prefers-reduced-motion: (
+				display: none !important,
+			),
+			d-block-c-prefers-reduced-motion: (
+				display: block !important,
+			),
+			d-inline-block-c-prefers-reduced-motion: (
+				display: inline-block !important,
+			),
+		),
+	),
+	$displays-c-prefers-reduced-motion
+);
+
 // Overflow
 
 $overflows: auto, hidden !default;