@clayui/css 3.63.0 → 3.65.2

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

@@ -35,12 +35,12 @@
 /// - Add @link to documentation
 
 @mixin clay-aspect-ratio-item-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$base: setter($map, ());
-
-	@if ($enabled) {
-		@include clay-css($base);
+		@if ($enabled) {
+			@include clay-css($map);
+		}
 	}
 }
 
@@ -58,56 +58,58 @@
 /// - Add @link to documentation
 
 @mixin clay-aspect-ratio-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$horizontal: map-get($map, horizontal);
-	$vertical: map-get($map, vertical);
+		$horizontal: map-get($map, horizontal);
+		$vertical: map-get($map, vertical);
 
-	$base: setter($map, ());
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($base, background-color)),
-			background-image:
-				setter(
-					map-get($map, bg-image),
-					map-get($base, background-image)
-				),
-		)
-	);
+		$base: setter($map, ());
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($base, background-color)),
+				background-image:
+					setter(
+						map-get($map, bg-image),
+						map-get($base, background-image)
+					),
+			)
+		);
 
-	$lexicon-icon: setter(map-get($map, lexicon-icon), ());
-	$lexicon-icon: map-merge(
-		$lexicon-icon,
-		(
-			height:
-				setter(
-					map-get($map, lexicon-icon-height),
-					map-get($lexicon-icon, height)
-				),
-			margin-top:
-				setter(
-					map-get($map, lexicon-icon-margin-top),
-					map-get($lexicon-icon, margin-top)
-				),
-			width:
-				setter(
-					map-get($map, lexicon-icon-width),
-					map-get($lexicon-icon, width)
-				),
-		)
-	);
+		$lexicon-icon: setter(map-get($map, lexicon-icon), ());
+		$lexicon-icon: map-merge(
+			$lexicon-icon,
+			(
+				height:
+					setter(
+						map-get($map, lexicon-icon-height),
+						map-get($lexicon-icon, height)
+					),
+				margin-top:
+					setter(
+						map-get($map, lexicon-icon-margin-top),
+						map-get($lexicon-icon, margin-top)
+					),
+				width:
+					setter(
+						map-get($map, lexicon-icon-width),
+						map-get($lexicon-icon, width)
+					),
+			)
+		);
 
-	@if ($enabled) {
-		@include clay-css($base);
+		@if ($enabled) {
+			@include clay-css($base);
 
-		@if ($horizontal and $vertical) {
-			@include clay-aspect-ratio($horizontal, $vertical);
-		}
+			@if ($horizontal and $vertical) {
+				@include clay-aspect-ratio($horizontal, $vertical);
+			}
 
-		.lexicon-icon {
-			@include clay-css($lexicon-icon);
+			.lexicon-icon {
+				@include clay-css($lexicon-icon);
+			}
 		}
 	}
 }

package/src/scss/mixins/_badges.scss

@@ -62,181 +62,181 @@
 }
 
 @mixin clay-badge-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
-
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-			padding-bottom:
-				setter(map-get($map, padding-y), map-get($map, padding-bottom)),
-			padding-left:
-				setter(map-get($map, padding-x), map-get($map, padding-left)),
-			padding-right:
-				setter(map-get($map, padding-x), map-get($map, padding-right)),
-			padding-top:
-				setter(map-get($map, padding-y), map-get($map, padding-top)),
-		)
-	);
-
-	$empty: setter(map-get($map, empty), ());
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$href: setter(map-get($map, href), ());
-	$href: map-deep-merge(
-		$href,
-		(
-			hover: (
+		$base: map-merge(
+			$map,
+			(
 				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+				padding-bottom:
 					setter(
-						map-get($map, hover-bg),
-						map-deep-get($href, hover, background-color)
-					),
-				border-color:
-					setter(
-						map-get($map, hover-border-color),
-						map-deep-get($href, hover, border-color)
-					),
-				color:
-					setter(
-						map-get($map, hover-color),
-						map-deep-get($href, hover, color)
+						map-get($map, padding-y),
+						map-get($map, padding-bottom)
 					),
-			),
-			focus: (
-				background-color:
+				padding-left:
 					setter(
-						map-get($map, hover-bg),
-						map-deep-get($href, focus, background-color)
+						map-get($map, padding-x),
+						map-get($map, padding-left)
 					),
-				border-color:
+				padding-right:
 					setter(
-						map-get($map, hover-border-color),
-						map-deep-get($href, focus, border-color)
+						map-get($map, padding-x),
+						map-get($map, padding-right)
 					),
-				color:
+				padding-top:
 					setter(
-						map-get($map, hover-color),
-						map-deep-get($href, focus, color)
+						map-get($map, padding-y),
+						map-get($map, padding-top)
 					),
-			),
-		)
-	);
+			)
+		);
+
+		$href: setter(map-get($map, href), ());
+		$href: map-deep-merge(
+			$href,
+			(
+				hover: (
+					background-color:
+						setter(
+							map-get($map, hover-bg),
+							map-deep-get($href, hover, background-color)
+						),
+					border-color:
+						setter(
+							map-get($map, hover-border-color),
+							map-deep-get($href, hover, border-color)
+						),
+					color:
+						setter(
+							map-get($map, hover-color),
+							map-deep-get($href, hover, color)
+						),
+				),
+				focus: (
+					background-color:
+						setter(
+							map-get($map, hover-bg),
+							map-deep-get($href, focus, background-color)
+						),
+					border-color:
+						setter(
+							map-get($map, hover-border-color),
+							map-deep-get($href, focus, border-color)
+						),
+					color:
+						setter(
+							map-get($map, hover-color),
+							map-deep-get($href, focus, color)
+						),
+				),
+			)
+		);
+
+		$link: setter(map-get($map, link), ());
+		$link: map-deep-merge(
+			$link,
+			(
+				color: setter(map-get($map, link-color), map-get($link, color)),
+				hover: (
+					color:
+						setter(
+							map-get($map, link-hover-color),
+							map-deep-get($link, hover, color)
+						),
+				),
+				focus: (
+					color:
+						setter(
+							map-get($map, link-hover-color),
+							map-deep-get($link, focus, color)
+						),
+				),
+			)
+		);
 
-	$link: setter(map-get($map, link), ());
-	$link: map-deep-merge(
-		$link,
-		(
-			color: setter(map-get($map, link-color), map-get($link, color)),
-			hover: (
-				color:
-					setter(
-						map-get($map, link-hover-color),
-						map-deep-get($link, hover, color)
-					),
-			),
-			focus: (
-				color:
-					setter(
-						map-get($map, link-hover-color),
-						map-deep-get($link, focus, color)
+		$c-inner: setter(map-get($map, c-inner), ());
+		$c-inner: map-merge(
+			(
+				enabled:
+					if(
+						variable-exists(enable-c-inner),
+						$enable-c-inner,
+						if(
+							variable-exists(cadmin-enable-c-inner),
+							$cadmin-enable-c-inner,
+							true
+						)
 					),
 			),
-		)
-	);
-
-	$c-inner: setter(map-get($map, c-inner), ());
-	$c-inner: map-merge(
-		(
-			enabled:
-				if(
-					variable-exists(enable-c-inner),
-					$enable-c-inner,
-					if(
-						variable-exists(cadmin-enable-c-inner),
-						$cadmin-enable-c-inner,
-						true
-					)
-				),
-		),
-		$c-inner
-	);
+			$c-inner
+		);
 
-	$badge-item: setter(map-get($map, badge-item), ());
+		$badge-item: setter(map-get($map, badge-item), ());
 
-	$badge-item-expand: setter(map-get($map, badge-item-expand), ());
+		$badge-item-expand: setter(map-get($map, badge-item-expand), ());
 
-	$badge-item-before: setter(map-get($map, badge-item-before), ());
+		@if ($enabled) {
+			@include clay-css($base);
 
-	$badge-item-after: setter(map-get($map, badge-item-after), ());
+			// Empty badges collapse automatically
 
-	@if ($enabled) {
-		@include clay-css($base);
-
-		// Empty badges collapse automatically
-
-		&:empty {
-			@include clay-css($empty);
-		}
-
-		&[href],
-		&[type] {
-			@include clay-link($href);
-		}
-
-		a {
-			@include clay-link($link);
-		}
+			&:empty {
+				@include clay-css(map-get($map, empty));
+			}
 
-		.badge-item {
-			@include clay-css($badge-item);
+			&[href],
+			&[type] {
+				@include clay-link($href);
+			}
 
 			a {
-				$link: setter(map-get($badge-item, link), ());
-
 				@include clay-link($link);
 			}
 
-			.btn-unstyled {
-				$btn-unstyled: setter(map-get($badge-item, btn-unstyled), ());
+			.badge-item {
+				@include clay-css($badge-item);
 
-				@include clay-button-variant($btn-unstyled);
-			}
+				a {
+					@include clay-link(map-get($badge-item, link));
+				}
 
-			.close {
-				$close: setter(map-get($badge-item, close), ());
+				.btn-unstyled {
+					@include clay-button-variant(
+						map-get($badge-item, btn-unstyled)
+					);
+				}
 
-				@include clay-close($close);
-			}
+				.close {
+					@include clay-close(map-get($badge-item, close));
+				}
 
-			.lexicon-icon {
-				$lexicon-icon: setter(map-get($badge-item, lexicon-icon), ());
-
-				@include clay-css($lexicon-icon);
+				.lexicon-icon {
+					@include clay-css(map-get($badge-item, lexicon-icon));
+				}
 			}
-		}
 
-		.badge-item-expand {
-			@include clay-css($badge-item-expand);
+			.badge-item-expand {
+				@include clay-css($badge-item-expand);
 
-			a {
-				$link: setter(map-get($badge-item-expand, link), ());
-
-				@include clay-link($link);
+				a {
+					@include clay-link(map-get($badge-item-expand, link));
+				}
 			}
-		}
 
-		.badge-item-before {
-			@include clay-css($badge-item-before);
-		}
+			.badge-item-before {
+				@include clay-css(map-get($map, badge-item-before));
+			}
 
-		.badge-item-after {
-			@include clay-css($badge-item-after);
-		}
+			.badge-item-after {
+				@include clay-css(map-get($map, badge-item-after));
+			}
 
-		@if (map-get($c-inner, enabled)) {
-			> .c-inner {
-				@include clay-css($c-inner);
+			@if (map-get($c-inner, enabled)) {
+				> .c-inner {
+					@include clay-css($c-inner);
+				}
 			}
 		}
 	}

package/src/scss/mixins/_buttons.scss

@@ -387,8 +387,6 @@
 		$active-class: setter(map-get($map, active-class), ());
 		$active-class: map-merge($active, $active-class);
 
-		$active-class-after: setter(map-get($map, active-class-after), ());
-
 		$show: map-deep-merge($active-class, map-get($map, show));
 
 		$disabled: setter(map-get($map, disabled), ());
@@ -433,8 +431,6 @@
 			)
 		);
 
-		$disabled-focus: setter(map-get($disabled, focus), ());
-
 		$nested-disabled-active: setter(map-get($disabled, active), ());
 		$disabled-active: setter(map-get($map, disabled-active), ());
 		$disabled-active: map-merge($nested-disabled-active, $disabled-active);
@@ -729,7 +725,7 @@
 				}
 
 				&::after {
-					@include clay-css($active-class-after);
+					@include clay-css(map-get($map, active-class-after));
 				}
 
 				&:focus {
@@ -772,7 +768,7 @@
 				}
 
 				&:focus {
-					@include clay-css($disabled-focus);
+					@include clay-css(map-get($disabled, focus));
 
 					&::before {
 						@include clay-css(

package/src/scss/mixins/_cards.scss

@@ -806,9 +806,7 @@
 			}
 
 			.aspect-ratio {
-				@include clay-aspect-ratio-variant(
-					setter(map-get($map, aspect-ratio), ())
-				);
+				@include clay-aspect-ratio-variant(map-get($map, aspect-ratio));
 
 				@if ($aspect-ratio-checkered-fg) {
 					@include clay-bg-checkered($aspect-ratio-checkered-fg);
@@ -828,7 +826,7 @@
 
 			.aspect-ratio-item {
 				@include clay-aspect-ratio-item-variant(
-					setter(map-get($map, aspect-ratio-item), ())
+					map-get($map, aspect-ratio-item)
 				);
 			}
 
@@ -879,9 +877,7 @@
 			}
 
 			.sticker {
-				@include clay-sticker-variant(
-					setter(map-get($map, sticker), ())
-				);
+				@include clay-sticker-variant(map-get($map, sticker));
 			}
 
 			.card {
@@ -1311,8 +1307,6 @@
 @mixin clay-card-type-asset-variant($map) {
 	$enabled: setter(map-get($map, enabled), true);
 
-	$base: setter($map, ());
-
 	$aspect-ratio: setter(map-get($map, aspect-ratio), ());
 	$aspect-ratio: map-merge(
 		$aspect-ratio,
@@ -1381,7 +1375,7 @@
 	);
 
 	@if ($enabled) {
-		@include clay-css($base);
+		@include clay-css($map);
 
 		.aspect-ratio {
 			@include clay-css($aspect-ratio);

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

@@ -88,15 +88,15 @@
 			}
 
 			&::before {
-				@include clay-css(setter(map-get($map, before), ()));
+				@include clay-css(map-get($map, before));
 			}
 
 			&::after {
-				@include clay-css(setter(map-get($map, after), ()));
+				@include clay-css(map-get($map, after));
 			}
 
 			&.show {
-				@include clay-css(setter(map-get($map, show), ()));
+				@include clay-css(map-get($map, show));
 			}
 
 			.dropdown-item {
@@ -451,10 +451,6 @@
 			)
 		);
 
-		$autofit-row: setter(map-get($map, autofit-row), ());
-
-		$c-kbd-inline: setter(map-get($map, c-kbd-inline), ());
-
 		$c-inner: setter(map-get($map, c-inner), ());
 		$c-inner: map-merge(
 			(
@@ -485,11 +481,11 @@
 				@include clay-css($hover);
 
 				&::before {
-					@include clay-css(setter(map-get($hover, before), ()));
+					@include clay-css(map-get($hover, before));
 				}
 
 				&::after {
-					@include clay-css(setter(map-get($hover, after), ()));
+					@include clay-css(map-get($hover, after));
 				}
 
 				.c-kbd-inline {
@@ -501,11 +497,11 @@
 				@include clay-css($focus);
 
 				&::before {
-					@include clay-css(setter(map-get($focus, before), ()));
+					@include clay-css(map-get($focus, before));
 				}
 
 				&::after {
-					@include clay-css(setter(map-get($focus, after), ()));
+					@include clay-css(map-get($focus, after));
 				}
 
 				.c-kbd-inline {
@@ -517,11 +513,11 @@
 				@include clay-css($active);
 
 				&::before {
-					@include clay-css(setter(map-get($active, before), ()));
+					@include clay-css(map-get($active, before));
 				}
 
 				&::after {
-					@include clay-css(setter(map-get($active, after), ()));
+					@include clay-css(map-get($active, after));
 				}
 
 				label {
@@ -546,15 +542,11 @@
 				@include clay-css($active-class);
 
 				&::before {
-					@include clay-css(
-						setter(map-get($active-class, before), ())
-					);
+					@include clay-css(map-get($active-class, before));
 				}
 
 				&::after {
-					@include clay-css(
-						setter(map-get($active-class, after), ())
-					);
+					@include clay-css(map-get($active-class, after));
 				}
 
 				label {
@@ -590,11 +582,11 @@
 				@include clay-css($disabled);
 
 				&::before {
-					@include clay-css(setter(map-get($disabled, before), ()));
+					@include clay-css(map-get($disabled, before));
 				}
 
 				&::after {
-					@include clay-css(setter(map-get($disabled, after), ()));
+					@include clay-css(map-get($disabled, after));
 				}
 
 				label,
@@ -610,25 +602,21 @@
 					@include clay-css($disabled-active);
 
 					&::before {
-						@include clay-css(
-							setter(map-get($disabled-active, before), ())
-						);
+						@include clay-css(map-get($disabled-active, before));
 					}
 
 					&::after {
-						@include clay-css(
-							setter(map-get($disabled-active, after), ())
-						);
+						@include clay-css(map-get($disabled-active, after));
 					}
 				}
 			}
 
 			&::before {
-				@include clay-css(setter(map-get($map, before), ()));
+				@include clay-css(map-get($map, before));
 			}
 
 			&::after {
-				@include clay-css(setter(map-get($map, after), ()));
+				@include clay-css(map-get($map, after));
 			}
 
 			@if (map-get($c-inner, enabled)) {
@@ -654,7 +642,7 @@
 			}
 
 			.autofit-row {
-				@include clay-css($autofit-row);
+				@include clay-css(map-get($map, autofit-row));
 
 				> .autofit-col {
 					@include clay-css(
@@ -670,7 +658,7 @@
 			}
 
 			.c-kbd-inline {
-				@include clay-css($c-kbd-inline);
+				@include clay-css(map-get($map, c-kbd-inline));
 			}
 
 			.form-check-label {

package/src/scss/mixins/_globals.scss

@@ -274,6 +274,8 @@
 							transition: none;
 						}
 					}
+				} @else if ($key == 'extend') {
+					@extend #{$value} !optional;
 				} @else if ($key == 'user-select') {
 					-ms-user-select: $value;
 					-moz-user-select: $value;