@clayui/css 3.60.0 → 3.61.0

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

@@ -63,6 +63,7 @@
 	z-index: $zindex-sidenav;
 }
 
+.sidenav-end,
 .sidenav-right {
 	> .sidenav-content {
 		left: auto;
@@ -125,6 +126,7 @@
 		width: $sidenav-width;
 	}
 
+	&.sidenav-end,
 	&.sidenav-right {
 		left: auto;
 		right: 0;

package/src/scss/components/_sidebar.scss

@@ -110,14 +110,14 @@
 
 // Sidebar Variants
 
-.sidebar-light {
-	@include clay-sidebar-variant($sidebar-light);
-}
-
-.sidebar-light .component-navigation-bar {
-	@include clay-navbar-variant($sidebar-light-navigation-bar);
-}
-
-.sidebar-dark {
-	@include clay-sidebar-variant($sidebar-dark);
+@each $color, $value in $sidebar-palette {
+	$selector: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		$color,
+		str-insert($color, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-sidebar-variant($value);
+	}
 }

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

@@ -95,17 +95,48 @@
 /// @param {Any} $num - The variable
 
 @function math-sign($num) {
+	@if not(type-of($num) == 'number') and not
+		(type-of($num) == 'string') and not
+		($num == null)
+	{
+		@warn 'The value `#{$num}` is of type `#{type-of($num)}`. It must be a `number`, `string`, or `null`. This function has returned a value of `null`.';
+	}
+
 	@if (type-of($num) == 'number') {
 		@return -($num);
 	} @else if (type-of($num) == 'string') {
 		@if (starts-with($num, 'var(--')) {
 			@return calc(#{$num} * -1);
+		} @else {
+			@return $num;
 		}
 	}
 
 	@return null;
 }
 
+/// A function that returns the direct parent selector (e.g., clay-parent('#wrapper .container .row')) will return `.row`.
+/// @param {String} $selector - The full selector
+
+@function clay-parent($selector) {
+	$selector-list: simple-selectors(clay-str-replace('#{$selector}', ' ', ''));
+
+	@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`.
+/// @param {String} $location - The string to target
+/// @param {String} $insert - The string to insert before the location
+/// @param {String} $selector - The full selector
+
+@function clay-insert-before($location, $insert, $selector: &) {
+	@return clay-str-replace(
+		'#{$selector}',
+		'#{$location}',
+		'#{$insert}#{$location}'
+	);
+}
+
 /// A helper function for displaying warning messages for required variables.
 /// @param {Any} $var - The variable to check
 /// @param {String} $msg['This value is required!'] - The error message to display

package/src/scss/mixins/_alerts.scss

@@ -80,6 +80,18 @@
 /// 	component-subtitle: (
 /// 		// .alert .component-subtitle
 /// 	),
+/// 	custom-selectors: (
+/// 		// add custom selectors here, see examples below
+/// 		btn-primary: (
+/// 			// .alert .btn-primary
+/// 		),
+/// 		btn-secondary: (
+/// 			// .alert .btn-secondary
+/// 		),
+/// 		'#custom-alert-btn': (
+/// 			// .alert #custom-alert-btn
+/// 		),
+/// 	),
 /// )
 
 @mixin clay-alert-variant($map) {
@@ -236,6 +248,20 @@
 			.component-subtitle {
 				@include clay-text-typography($component-subtitle);
 			}
+
+			@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);
+					}
+				}
+			}
 		}
 	}
 }