@clayui/css 3.93.0 → 3.95.0

package/src/scss/cadmin/components/_aspect-ratio.scss

@@ -160,42 +160,47 @@
 
 // aspect-ratio-#-to-#
 
-@each $selector, $value in $cadmin-aspect-ratio-sizes {
-	$selector: if(
-		starts-with($selector, '.') or
-			starts-with($selector, '#') or
-			starts-with($selector, '%'),
-		$selector,
-		str-insert($selector, '.', 1)
-	);
-
-	@if (starts-with($selector, '%')) {
-		#{$selector} {
-			@include clay-aspect-ratio(
-				map-get($value, width),
-				map-get($value, height)
-			);
-		}
-	} @else if (map-get($value, extend)) {
-		#{$selector} {
-			@include clay-css($value);
-		}
-	} @else {
-		$placeholder: str-insert(
-			str-slice($selector, 2, str-length($selector)),
-			'%',
-			1
+@each $size, $value in $cadmin-aspect-ratio-sizes {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, '.') or
+				starts-with($size, '#') or
+				starts-with($size, '%'),
+			$size,
+			str-insert($size, '.', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-aspect-ratio(
-				map-get($value, width),
-				map-get($value, height)
-			);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($selector, '%')) {
+			#{$selector} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
+		} @else if (map-get($value, extend)) {
+			#{$selector} {
+				@include clay-css($value);
+			}
+		} @else if (starts-with($size, 'aspect-ratio-')) {
+			$placeholder: '%#{$size}';
+
+			#{$placeholder} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
 		}
 	}
 }

package/src/scss/cadmin/components/_badges.scss

@@ -61,35 +61,49 @@
 // Badge Variants
 
 @each $color, $value in $cadmin-badge-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		if(
-			starts-with($color, 'badge'),
-			str-insert($color, '.', 1),
-			str-insert($color, '.badge-', 1)
-		)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-badge-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%badge-#{$color}'
+	@if not clay-is-map-unset($value) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
+		$selector: if(
+			index($deprecated-keys, '#{$color}') != null,
+			str-insert($color, '.badge-', 1),
+			if
+				(
+					starts-with($color, 'badge'),
+					str-insert($color, '.', 1),
+					$color
+				)
 		);
 
-		#{$placeholder} {
-			@include clay-badge-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-badge-variant($value);
+			}
+		} @else if
+			(
+				starts-with($color, 'badge') or
+					index($deprecated-keys, '#{$color}') !=
+					null
+			)
+		{
+			$placeholder: if(
+				starts-with($color, '.') or starts-with($color, '#'),
+				'%#{str-slice($color, 2)}',
+				'%badge-#{$color}'
+			);
+
+			#{$placeholder} {
+				@include clay-badge-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-badge-variant($value);
+			}
 		}
 	}
 }

package/src/scss/cadmin/components/_buttons.scss

@@ -19,29 +19,31 @@ fieldset:disabled a.btn {
 // Button Sizes
 
 @each $size, $value in $cadmin-btn-sizes {
-	$selector: if(
-		starts-with($size, 'btn-'),
-		clay-str-replace($size, 'btn-', '.btn-'),
-		$size
-	);
-
-	@if (starts-with($size, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: if(
+	@if not clay-is-map-unset($value) {
+		$selector: if(
 			starts-with($size, 'btn-'),
-			'%clay-#{$size}',
-			'%#{str-slice($size, 2)}'
+			clay-str-replace($size, 'btn-', '.btn-'),
+			$size
 		);
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else if (starts-with($size, 'btn-')) {
+			$placeholder: '%clay-#{$size}';
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }
@@ -80,33 +82,35 @@ input[type='button'] {
 // Button Monospaced
 
 @each $size, $value in $cadmin-btn-monospaced-sizes {
-	$selector: if(
-		starts-with($size, 'btn-monospaced-'),
-		clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
-		if(
-			$size == 'btn-monospaced',
-			clay-str-replace($size, 'btn-monospaced', '.btn-monospaced'),
-			$size
-		)
-	);
-
-	@if (starts-with($size, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: if(
-			starts-with($size, 'btn-monospaced'),
-			'%clay-#{$size}',
-			'%#{str-slice($size, 2)}'
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, 'btn-monospaced-'),
+			clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
+			if(
+				$size == 'btn-monospaced',
+				clay-str-replace($size, 'btn-monospaced', '.btn-monospaced'),
+				$size
+			)
 		);
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else if (starts-with($size, 'btn-monospaced')) {
+			$placeholder: '%clay-#{$size}';
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }
@@ -114,37 +118,43 @@ input[type='button'] {
 // Button Variants
 
 @each $color, $value in $cadmin-btn-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		if(
-			starts-with($color, 'btn-'),
-			str-insert($color, '.', 1),
-			str-insert($color, '.btn-', 1)
-		)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: '%#{str-slice($selector, 2)}';
-
-		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
-
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
-		}
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			if(
+				starts-with($color, 'btn'),
+				str-insert($color, '.', 1),
+				str-insert($color, '.btn-', 1)
+			)
+		);
 
-		#{$placeholder-focus} {
-			@include clay-button-variant(map-get($value, focus));
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else if (starts-with($color, 'btn-')) {
+			$placeholder: '%#{str-slice($selector, 2)}';
+
+			$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+
+			#{$placeholder-focus} {
+				@include clay-button-variant(map-get($value, focus));
+			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }
@@ -152,37 +162,43 @@ input[type='button'] {
 // Button Outline Variants
 
 @each $color, $value in $cadmin-btn-outline-palette {
-	$selector: if(
-		starts-with($color, '.') or
-			starts-with($color, '#') or
-			starts-with($color, '%'),
-		$color,
-		if(
-			starts-with($color, 'btn-'),
-			str-insert($color, '.', 1),
-			str-insert($color, '.btn-outline-', 1)
-		)
-	);
-
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: '%#{str-slice($selector, 2)}';
-
-		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
-
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
-		}
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			if(
+				starts-with($color, 'btn'),
+				str-insert($color, '.', 1),
+				str-insert($color, '.btn-outline-', 1)
+			)
+		);
 
-		#{$placeholder-focus} {
-			@include clay-button-variant(map-get($value, focus));
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
+		} @else if (starts-with($color, 'btn-outline')) {
+			$placeholder: '%#{str-slice($selector, 2)}';
+
+			$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+
+			#{$placeholder-focus} {
+				@include clay-button-variant(map-get($value, focus));
+			}
+		} @else {
+			#{$selector} {
+				@include clay-button-variant($value);
+			}
 		}
 	}
 }

package/src/scss/cadmin/components/_forms.scss

@@ -181,14 +181,16 @@ fieldset[disabled] .form-control {
 }
 
 @each $key, $value in $cadmin-input-palette {
-	$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-form-control-variant($value);
+		#{$selector} {
+			@include clay-form-control-variant($value);
+		}
 	}
 }
 
@@ -324,14 +326,16 @@ select.form-control[multiple] {
 // Form Control Select Variants
 
 @each $key, $value in $cadmin-form-control-select-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-select-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-select-variant($value);
+		}
 	}
 }
 

package/src/scss/cadmin/components/_labels.scss

@@ -56,32 +56,34 @@
 
 // Label Sizes
 
-@each $selector, $value in $cadmin-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}'
+@each $size, $value in $cadmin-label-sizes {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, '.') or
+				starts-with($size, '#') or
+				starts-with($size, '%'),
+			$size,
+			str-insert($size, '.', 1)
 		);
 
-		#{$placeholder} {
-			@include clay-label-variant($value);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
+		} @else if (starts-with($size, 'label-')) {
+			$placeholder: '%#{size}';
+
+			#{$placeholder} {
+				@include clay-label-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
 		}
 	}
 }
@@ -89,31 +91,42 @@
 // Label Variants
 
 @each $color, $value in $cadmin-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) {
+		$deprecated-keys: 'primary', 'secondary', 'success', 'info', 'warning',
+			'danger', 'dark', 'light';
+
+		$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);
-		}
-
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
+		} @else if
+			(
+				starts-with($color, 'inverse-') or
+					index($deprecated-keys, '#{$color}') !=
+					null
+			)
+		{
+			$placeholder: '%label-#{$color}';
+
+			#{$placeholder} {
+				@include clay-label-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-label-variant($value);
+			}
 		}
 	}
 }

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

@@ -376,23 +376,25 @@
 // List Group Item Variants
 
 @each $cadmin-color, $cadmin-value in $cadmin-theme-colors {
-	.list-group-item-#{$cadmin-color} {
-		background-color: theme-color-level($cadmin-color, -9);
-		color: theme-color-level($cadmin-color, 6);
-
-		&.list-group-item-action {
-			@include hover-focus() {
-				background-color: clay-darken(
-					theme-color-level($cadmin-color, -9),
-					5%
-				);
-				color: theme-color-level($cadmin-color, 6);
-			}
-
-			&.active {
-				background-color: theme-color-level($cadmin-color, 6);
-				border-color: theme-color-level($cadmin-color, 6);
-				color: $cadmin-white;
+	@if not clay-is-map-unset($cadmin-value) {
+		.list-group-item-#{$cadmin-color} {
+			background-color: theme-color-level($cadmin-color, -9);
+			color: theme-color-level($cadmin-color, 6);
+
+			&.list-group-item-action {
+				@include hover-focus() {
+					background-color: clay-darken(
+						theme-color-level($cadmin-color, -9),
+						5%
+					);
+					color: theme-color-level($cadmin-color, 6);
+				}
+
+				&.active {
+					background-color: theme-color-level($cadmin-color, 6);
+					border-color: theme-color-level($cadmin-color, 6);
+					color: $cadmin-white;
+				}
 			}
 		}
 	}