@clayui/css 3.92.0 → 3.94.0

package/src/scss/components/_alerts.scss

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

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

@@ -161,41 +161,43 @@
 // aspect-ratio-#-to-#
 
 @each $selector, $value in $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
+	@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-aspect-ratio(
-				map-get($value, width),
-				map-get($value, height)
+		@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
 			);
-		}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+			#{$placeholder} {
+				@include clay-aspect-ratio(
+					map-get($value, width),
+					map-get($value, height)
+				);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }

package/src/scss/components/_badges.scss

@@ -108,35 +108,37 @@
 // Badge Variants
 
 @each $color, $value in $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) {
+		$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)
+			)
 		);
 
-		#{$placeholder} {
-			@include clay-badge-variant($value);
-		}
+		@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}'
+			);
+
+			#{$placeholder} {
+				@include clay-badge-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }

package/src/scss/components/_buttons.scss

@@ -19,29 +19,31 @@ fieldset:disabled a.btn {
 // Button Sizes
 
 @each $size, $value in $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 {
+			$placeholder: if(
+				starts-with($size, 'btn-'),
+				'%clay-#{$size}',
+				'%#{str-slice($size, 2)}'
+			);
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }
@@ -80,33 +82,35 @@ input[type='button'] {
 // Button Monospaced
 
 @each $size, $value in $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 {
+			$placeholder: if(
+				starts-with($size, 'btn-monospaced'),
+				'%clay-#{$size}',
+				'%#{str-slice($size, 2)}'
+			);
+
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 		}
 	}
 }
@@ -114,37 +118,39 @@ input[type='button'] {
 // Button Variants
 
 @each $color, $value in $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 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)
+			)
+		);
 
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: '%#{str-slice($selector, 2)}';
+		@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-focus: '%#{str-slice($selector, 2)}-focus';
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
-		}
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 
-		#{$placeholder-focus} {
-			@include clay-button-variant(map-get($value, focus));
+			#{$placeholder-focus} {
+				@include clay-button-variant(map-get($value, focus));
+			}
 		}
 	}
 }
@@ -152,37 +158,39 @@ input[type='button'] {
 // Button Outline Variants
 
 @each $color, $value in $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 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)
+			)
+		);
 
-	@if (starts-with($color, '%') or map-get($value, extend)) {
-		#{$selector} {
-			@include clay-button-variant($value);
-		}
-	} @else {
-		$placeholder: '%#{str-slice($selector, 2)}';
+		@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-focus: '%#{str-slice($selector, 2)}-focus';
 
-		#{$placeholder} {
-			@include clay-button-variant($value);
-		}
+			#{$placeholder} {
+				@include clay-button-variant($value);
+			}
 
-		#{$selector} {
-			@extend #{$placeholder} !optional;
-		}
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
 
-		#{$placeholder-focus} {
-			@include clay-button-variant(map-get($value, focus));
+			#{$placeholder-focus} {
+				@include clay-button-variant(map-get($value, focus));
+			}
 		}
 	}
 }

package/src/scss/components/_drilldown.scss

@@ -13,7 +13,7 @@
 // Drilldown Transition Classes
 
 .drilldown-transition {
-	transition: $drilldown-transition;
+	@include transition($drilldown-transition);
 }
 
 .drilldown-item.transitioning {

package/src/scss/components/_dropdowns.scss

@@ -124,14 +124,16 @@
 // Dropdown Menu Variants
 
 @each $key, $value in $dropdown-menu-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-dropdown-menu-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-dropdown-menu-variant($value);
+		}
 	}
 }
 

package/src/scss/components/_forms.scss

@@ -158,14 +158,16 @@ fieldset[disabled] .form-control {
 }
 
 @each $key, $value in $input-palette {
-	$selector: if(
-		starts-with($key, '.') or starts-with($key, '#'),
-		$key,
-		str-insert($key, '.', 1)
-	);
-
-	#{$selector} {
-		@include clay-form-control-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-form-control-variant($value);
+		}
 	}
 }
 
@@ -343,7 +345,8 @@ textarea.form-control-plaintext,
 
 	&::-webkit-slider-thumb {
 		border-radius: 100px;
-		transition: $input-transition;
+
+		@include transition($input-transition);
 	}
 }
 

package/src/scss/components/_input-groups.scss

@@ -226,7 +226,8 @@
 		margin-bottom: 0;
 		padding-left: $input-group-inset-item-padding-left;
 		padding-right: $input-group-inset-item-padding-right;
-		transition: $input-transition;
+
+		@include transition($input-transition);
 
 		.btn {
 			@include clay-button-size($input-group-inset-item-btn);

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));
+				}
 			}
 		}
 	}