@clayui/css 3.133.0 → 3.134.0

package/src/scss/mixins/_menubar.scss

@@ -312,8 +312,10 @@
 		@if ($enabled) {
 			@include clay-css($map);
 
-			@include media-breakpoint-down($breakpoint-down) {
-				@include clay-css($mobile);
+			@if (length($breakpoint-down) != 0) {
+				@include media-breakpoint-down($breakpoint-down) {
+					@include clay-css($mobile);
+				}
 			}
 
 			.menubar-collapse {
@@ -353,28 +355,50 @@
 				}
 			}
 
-			.nav-nested {
-				@include clay-css(map-get($map, nav-nested));
+			$_nav-nested: map-get($map, nav-nested);
 
-				@include media-breakpoint-down($breakpoint-down) {
-					@include clay-css($nav-nested-mobile);
+			@if ($_nav-nested) {
+				.nav-nested {
+					@include clay-css($_nav-nested);
+
+					@include media-breakpoint-down($breakpoint-down) {
+						@include clay-css($nav-nested-mobile);
+					}
 				}
 			}
 
-			.nav-nested-margins {
-				@include clay-css(map-get($map, nav-nested-margins));
-
-				@include media-breakpoint-down($breakpoint-down) {
-					@include clay-css($nav-nested-margins-mobile);
-				}
+			$_nav-nested-margins: map-get($map, nav-nested-margins);
 
-				> li .nav > li {
-					@include clay-css(map-get($map, nav-nested-margins-item));
+			@if ($_nav-nested-margins) {
+				.nav-nested-margins {
+					@include clay-css($_nav-nested-margins);
 
 					@include media-breakpoint-down($breakpoint-down) {
-						@include clay-css(
-							map-get($map, nav-nested-margins-item-mobile)
-						);
+						@include clay-css($nav-nested-margins-mobile);
+					}
+
+					$_nav-nested-margins-item: map-get(
+						$map,
+						nav-nested-margins-item
+					);
+
+					@if ($_nav-nested-margins-item) {
+						> li .nav > li {
+							@include clay-css($_nav-nested-margins-item);
+
+							$_nav-nested-margins-item-mobile: $map,
+								nav-nested-margins-item-mobile;
+
+							@if ($_nav-nested-margins-item-mobile) {
+								@include media-breakpoint-down(
+									$breakpoint-down
+								) {
+									@include clay-css(
+										$_nav-nested-margins-item-mobile
+									);
+								}
+							}
+						}
 					}
 				}
 			}
@@ -877,81 +901,128 @@
 	);
 
 	@if ($enable) {
-		@include clay-css($map);
+		@if (length($map) != 0) {
+			@include clay-css($map);
+		}
 
-		@include media-breakpoint-down($breakpoint-down) {
-			@include clay-css($mobile);
+		@if (length($mobile) != 0) {
+			@include media-breakpoint-down($breakpoint-down) {
+				@include clay-css($mobile);
+			}
 		}
 
-		.menubar-collapse {
-			$_menubar-collapse: setter(map-get($map, collapse), ());
-			$_menubar-collapse: map-merge(
-				setter(map-get($map, menubar-collapse), ()),
-				$_menubar-collapse
-			);
+		$_menubar-collapse: setter(map-get($map, collapse), ());
+		$_menubar-collapse: map-merge(
+			setter(map-get($map, menubar-collapse), ()),
+			$_menubar-collapse
+		);
 
-			@include clay-css($_menubar-collapse);
+		@if (length($_menubar-collapse) != 0) {
+			.menubar-collapse {
+				@include clay-css($_menubar-collapse);
 
-			@include media-breakpoint-down($breakpoint-down) {
-				@include clay-css($collapse-mobile);
+				@include media-breakpoint-down($breakpoint-down) {
+					@include clay-css($collapse-mobile);
+				}
 			}
 		}
 
-		.menubar-toggler {
-			$_menubar-toggler: setter(map-get($map, menubar-toggler), ());
+		$_menubar-toggler: map-get($map, menubar-toggler);
 
-			@include clay-css($_menubar-toggler);
+		@if ($_menubar-toggler) {
+			.menubar-toggler {
+				@include clay-css($_menubar-toggler);
 
-			.c-inner {
-				@include clay-css(map-get($_menubar-toggler, c-inner));
-			}
+				$_c-inner: map-get($_menubar-toggler, c-inner);
 
-			.lexicon-icon {
-				@include clay-css(map-get($_menubar-toggler, lexicon-icon));
-			}
+				@if ($_c-inner) {
+					.c-inner {
+						@include clay-css($_c-inner);
+					}
+				}
 
-			@include media-breakpoint-down($breakpoint-down) {
-				@include clay-button-variant($toggler-mobile);
+				$_lexicon-icon: map-get($_menubar-toggler, lexicon-icon);
+
+				@if ($_lexicon-icon) {
+					.lexicon-icon {
+						@include clay-css($_lexicon-icon);
+					}
+				}
+
+				@if (length($toggler-mobile) != 0) {
+					@include media-breakpoint-down($breakpoint-down) {
+						@include clay-button-variant($toggler-mobile);
+					}
+				}
 			}
 		}
 
-		.nav-nested {
-			@include clay-css(map-get($map, nav-nested));
+		$_nav-nested: map-get($map, nav-nested);
+
+		@if ($_nav-nested) {
+			.nav-nested {
+				@include clay-css($_nav-nested);
+			}
 		}
 
-		.nav-nested-margins {
-			> li .nav > li {
-				@include clay-css(map-get($map, nav-nested-margins-item));
+		$_nav-nested-margins: map-get($map, nav-nested-margins-item);
 
-				@include media-breakpoint-down($breakpoint-down) {
-					@include clay-css(
-						map-get($map, nav-nested-margins-item-mobile)
+		@if ($_nav-nested-margins) {
+			.nav-nested-margins {
+				> li .nav > li {
+					@include clay-css($_nav-nested-margins);
+
+					$_nav-nested-margins-item-mobile: map-get(
+						$map,
+						nav-nested-margins-item-mobile
 					);
+
+					@if ($_nav-nested-margins-item-mobile) {
+						@include media-breakpoint-down($breakpoint-down) {
+							@include clay-css($_nav-nested-margins-item-mobile);
+						}
+					}
 				}
 			}
 		}
 
-		.nav-item {
-			@include clay-css(map-get($map, nav-item));
+		$_nav-item: map-get($map, nav-item);
+
+		@if ($_nav-item) {
+			.nav-item {
+				@include clay-css($_nav-item);
+			}
 		}
 
-		.nav-link {
-			$_nav-link: setter(map-get($map, nav-link), ());
-			$_nav-link: map-deep-merge($link, $_nav-link);
+		$_nav-link: setter(map-get($map, nav-link), ());
+		$_nav-link: map-deep-merge($link, $_nav-link);
 
-			@include clay-link($_nav-link);
+		@if (length($_nav-link) != 0) {
+			.nav-link {
+				@include clay-link($_nav-link);
 
-			@include media-breakpoint-down($breakpoint-down) {
-				@include clay-link($link-mobile);
+				@include media-breakpoint-down($breakpoint-down) {
+					@if (length($link-mobile) != 0) {
+						@include clay-link($link-mobile);
+					}
+				}
 			}
 		}
 
-		.menubar-actions-1 {
-			@include clay-css(map-get($map, menubar-actions-1));
+		$_menubar-actions-1: map-get($map, menubar-actions-1);
+
+		@if ($_menubar-actions-1) {
+			.menubar-actions-1 {
+				@include clay-css($_menubar-actions-1);
+			}
 		}
 
-		.menubar-action {
-			@include clay-css(map-get($map, menubar-action));
+		$_menubar-action: map-get($map, menubar-action);
+
+		@if ($_menubar-action) {
+			.menubar-action {
+				@include clay-css($_menubar-action);
+			}
 		}
 
 		$_media-breakpoint-down: map-get($map, media-breakpoint-down);

package/src/scss/mixins/_modals.scss

@@ -132,41 +132,57 @@
 		);
 
 		@if ($enabled) {
-			@include clay-map-to-css($map);
+			@if (length($map) != 0) {
+				@include clay-map-to-css($map);
+			}
 
 			// Modal specific btn-monospaced is deprecated in v2.0.0-rc.12
 
-			.btn-monospaced {
-				color: map-get($header-close, color);
+			$_color: map-get($header-close, color);
+
+			@if ($_color) {
+				.btn-monospaced {
+					color: $_color;
+				}
 			}
 
-			.close {
-				@include clay-close($header-close);
+			@if (length($header-close) != 0) {
+				.close {
+					@include clay-close($header-close);
+				}
 			}
 
-			@at-root {
-				button.close {
-					#{$focus-visible-selector},
-					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
-						box-shadow: map-get(
-							$header-close-btn-focus,
-							box-shadow
-						);
-						outline: map-get($header-close-btn-focus, outline);
+			$_box-shadow: map-get($header-close-btn-focus, box-shadow);
+			$_outline: map-get($header-close-btn-focus, outline);
+
+			@if ($_box-shadow or $_outline) {
+				@at-root {
+					button.close {
+						#{$focus-visible-selector},
+						#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
+							box-shadow: $_box-shadow;
+							outline: $_outline;
+						}
 					}
 				}
 			}
 
-			.modal-header {
-				@include clay-map-to-css($header);
+			@if (length($header) != 0) {
+				.modal-header {
+					@include clay-map-to-css($header);
+				}
 			}
 
-			.modal-body {
-				@include clay-map-to-css($body);
+			@if (length($body) != 0) {
+				.modal-body {
+					@include clay-map-to-css($body);
+				}
 			}
 
-			.modal-footer {
-				@include clay-map-to-css($footer);
+			@if (length($footer) != 0) {
+				.modal-footer {
+					@include clay-map-to-css($footer);
+				}
 			}
 		}
 	}

package/src/scss/mixins/_nav.scss

@@ -213,65 +213,117 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
-
-			.nav-link {
-				@include clay-link($nav-link);
+			@if (length($base) != 0) {
+				@include clay-css($base);
 			}
 
-			.nav-link-monospaced {
-				@include clay-link(map-get($map, nav-link-monospaced));
+			@if (length($nav-link) != 0) {
+				.nav-link {
+					@include clay-link($nav-link);
+				}
 			}
 
-			.nav-btn {
-				@include clay-button-variant(map-get($map, nav-btn));
-			}
+			$_nav-link-monospaced: map-get($map, nav-link-monospaced);
 
-			.nav-btn-monospaced {
-				@include clay-button-variant(map-get($map, nav-btn-monospaced));
+			@if ($_nav-link-monospaced) {
+				.nav-link-monospaced {
+					@include clay-link($_nav-link-monospaced);
+				}
 			}
 
-			.nav-item {
-				@include clay-css(map-get($map, nav-item));
+			$_nav-btn: map-get($map, nav-btn);
 
-				&::before {
-					@include clay-css(map-deep-get($map, nav-item, before));
+			@if ($_nav-btn) {
+				.nav-btn {
+					@include clay-button-variant($_nav-btn);
 				}
+			}
+
+			$_nav-btn-monospaced: map-get($map, nav-btn-monospaced);
 
-				&::before {
-					@include clay-css(map-deep-get($map, nav-item, after));
+			@if ($_nav-btn-monospaced) {
+				.nav-btn-monospaced {
+					@include clay-button-variant($_nav-btn-monospaced);
 				}
 			}
 
-			.nav-divider {
-				@include clay-css(map-get($map, nav-divider));
+			$_nav-item: map-get($map, nav-item);
 
-				&::before {
-					@include clay-css(map-deep-get($map, nav-divider, before));
+			@if ($_nav-item) {
+				.nav-item {
+					@include clay-css($_nav-item);
+
+					$_before: map-get($_nav-item, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_nav-item, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
 				}
+			}
 
-				&::after {
-					@include clay-css(map-deep-get($map, nav-divider, after));
+			$_nav-divider: map-get($map, nav-divider);
+
+			@if ($_nav-divider) {
+				.nav-divider {
+					@include clay-css($_nav-divider);
+
+					$_before: map-get($_nav-divider, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_nav-divider, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
 				}
 			}
 
-			.nav-form {
-				@include clay-css(map-get($map, nav-form));
+			$_nav-form: map-get($map, nav-form);
+
+			@if ($_nav-form) {
+				.nav-form {
+					@include clay-css($_nav-form);
+				}
 			}
 
-			.dropdown-menu {
-				@include clay-dropdown-menu-variant(
-					map-get($map, dropdown-menu)
-				);
+			$_dropdown-menu: map-get($map, dropdown-menu);
+
+			@if ($_dropdown-menu) {
+				.dropdown-menu {
+					@include clay-dropdown-menu-variant($_dropdown-menu);
+				}
 			}
 
-			+ .tab-content {
-				$_tab-content: setter(map-get($map, tab-content), ());
+			$_tab-content: map-get($map, tab-content);
+
+			@if ($_tab-content) {
+				+ .tab-content {
+					@include clay-css($_tab-content);
 
-				@include clay-css($_tab-content);
+					$_tab-pane: map-get($_tab-content, tab-pane);
 
-				.tab-pane {
-					@include clay-css(map-get($_tab-content, tab-pane));
+					@if ($_tab-pane) {
+						.tab-pane {
+							@include clay-css($_tab-pane);
+						}
+					}
 				}
 			}
 		}