@clayui/css 3.126.0 → 3.128.0

package/src/scss/mixins/_alerts.scss

@@ -152,87 +152,143 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
+
+			$_first-child: map-get($map, first-child);
 
-			&:first-child {
-				@include clay-css(map-get($map, first-child));
+			@if ($_first-child) {
+				&:first-child {
+					@include clay-css($_first-child);
+				}
 			}
 
-			&:last-child {
-				@include clay-css(map-get($map, last-child));
+			$_last-child: map-get($map, last-child);
+
+			@if ($_last-child) {
+				&:last-child {
+					@include clay-css($_last-child);
+				}
 			}
 
-			hr {
-				@include clay-css(map-get($map, hr));
+			$_hr: map-get($map, hr);
+
+			@if ($_hr) {
+				hr {
+					@include clay-css($_hr);
+				}
 			}
 
-			&.alert-dismissible {
-				@include clay-css(setter(map-get($map, alert-dismissible), ()));
+			$_alert-dismissible: map-get($map, alert-dismissible);
 
-				.container,
-				.container-fluid {
-					@include clay-css(
-						setter(
-							map-deep-get(
-								$map,
-								alert-dismissible,
-								container-fluid
-							),
-							()
-						)
+			@if ($_alert-dismissible) {
+				&.alert-dismissible {
+					@include clay-css($_alert-dismissible);
+
+					$_container-fluid: map-get(
+						$_alert-dismissible,
+						container-fluid
 					);
+
+					@if ($_container-fluid) {
+					}
+					.container,
+					.container-fluid {
+						@include clay-css($_container-fluid);
+					}
 				}
 			}
 
-			.alert-indicator {
-				@include clay-css($alert-indicator);
+			@if (length($alert-indicator) != 0) {
+				.alert-indicator {
+					@include clay-css($alert-indicator);
 
-				.lexicon-icon {
-					@include clay-css(map-get($alert-indicator, lexicon-icon));
-				}
+					$_lexicon-icon: map-get($alert-indicator, lexicon-icon);
+
+					@if ($_lexicon-icon) {
+						.lexicon-icon {
+							@include clay-css(
+								map-get($alert-indicator, lexicon-icon)
+							);
+						}
+					}
+
+					$_lead: map-get($alert-indicator, lead);
 
-				+ .lead {
-					@include clay-css(map-get($alert-indicator, lead));
+					@if ($_lead) {
+						+ .lead {
+							@include clay-css(map-get($alert-indicator, lead));
+						}
+					}
 				}
 			}
 
-			.alert-btn {
-				@include clay-button-variant(map-get($map, alert-btn));
+			$_alert-btn: map-get($map, alert-btn);
+
+			@if ($_alert-btn) {
+				.alert-btn {
+					@include clay-button-variant($_alert-btn);
+				}
 			}
 
-			.btn-group {
-				@include clay-container(map-get($map, btn-group));
+			$_btn-group: map-get($map, btn-group);
+
+			@if ($_btn-group) {
+				.btn-group {
+					@include clay-container($_btn-group);
+				}
 			}
 
-			.btn-group-item {
-				@include clay-container(map-get($map, btn-group-item));
+			$_btn-group-item: map-get($map, btn-group-item);
+
+			@if ($_btn-group-item) {
+				.btn-group-item {
+					@include clay-container($_btn-group-item);
+				}
 			}
 
-			.close {
-				@include clay-close($close);
+			@if (length($close) != 0) {
+				.close {
+					@include clay-close($close);
+				}
 			}
 
-			.container,
-			.container-fluid {
-				@include clay-css(setter(map-get($map, container-fluid), ()));
+			$_container-fluid: map-get($map, container-fluid);
+
+			@if ($_container-fluid) {
+				.container,
+				.container-fluid {
+					@include clay-css($_container-fluid);
+				}
 			}
 
-			.lead {
-				@include clay-css($lead);
+			@if (length($lead) != 0) {
+				.lead {
+					@include clay-css($lead);
+				}
 			}
 
-			.alert-link {
-				@include clay-link($alert-link);
+			@if (length($alert-link) != 0) {
+				.alert-link {
+					@include clay-link($alert-link);
+				}
 			}
 
-			.component-title {
-				@include clay-text-typography(map-get($map, component-title));
+			$_compontent-title: map-get($map, compontent-title);
+
+			@if ($_compontent-title) {
+				.component-title {
+					@include clay-text-typography($_component-title);
+				}
 			}
 
-			.component-subtitle {
-				@include clay-text-typography(
-					map-get($map, component-subtitle)
-				);
+			$_component-subtitle: map-get($map, component-subtitle);
+
+			@if ($_component-subtitle) {
+				.component-subtitle {
+					@include clay-text-typography($_component-subtitle);
+				}
 			}
 
 			@each $key, $properties in map-get($map, custom-selectors) {

package/src/scss/mixins/_badges.scss

@@ -178,64 +178,106 @@
 		$badge-item-expand: setter(map-get($map, badge-item-expand), ());
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
 
 			// Empty badges collapse automatically
 
-			&:empty {
-				@include clay-css(map-get($map, empty));
-			}
+			$_empty: map-get($map, empty);
 
-			&[href],
-			&[type] {
-				@include clay-link($href);
+			@if ($_empty) {
+				&:empty {
+					@include clay-css(map-get($map, empty));
+				}
 			}
 
-			a {
-				@include clay-link($link);
+			@if (length($href) != 0) {
+				&[href],
+				&[type] {
+					@include clay-link($href);
+				}
 			}
 
-			.badge-item {
-				@include clay-css($badge-item);
-
+			@if (length($link) != 0) {
 				a {
-					@include clay-link(map-get($badge-item, link));
+					@include clay-link($link);
 				}
+			}
 
-				.btn-unstyled {
-					@include clay-button-variant(
-						map-get($badge-item, btn-unstyled)
-					);
-				}
+			@if (length($badge-item) != 0) {
+				.badge-item {
+					@include clay-css($badge-item);
 
-				.close {
-					@include clay-close(map-get($badge-item, close));
-				}
+					$_link: map-get($badge-item, link);
+
+					@if ($_link) {
+						a {
+							@include clay-link($_link);
+						}
+					}
+
+					$_btn-unstyled: map-get($badge-item, btn-unstyled);
 
-				.lexicon-icon {
-					@include clay-css(map-get($badge-item, lexicon-icon));
+					@if ($_btn-unstyled) {
+						.btn-unstyled {
+							@include clay-button-variant($_btn-unstyled);
+						}
+					}
+
+					$_close: map-get($badge-item, close);
+
+					@if ($_close) {
+						.close {
+							@include clay-close($_close);
+						}
+					}
+
+					$_lexicon-icon: map-get($badge-item, lexicon-icon);
+
+					@if ($_lexicon-icon) {
+						.lexicon-icon {
+							@include clay-css($_lexicon-icon);
+						}
+					}
 				}
 			}
 
-			.badge-item-expand {
-				@include clay-css($badge-item-expand);
+			@if (length($badge-item-expand) != 0) {
+				.badge-item-expand {
+					@include clay-css($badge-item-expand);
 
-				a {
-					@include clay-link(map-get($badge-item-expand, link));
+					$_link: map-get($badge-item-expand, link);
+
+					@if ($_link) {
+						a {
+							@include clay-link($_link);
+						}
+					}
 				}
 			}
 
-			.badge-item-before {
-				@include clay-css(map-get($map, badge-item-before));
+			$_badge-item-before: map-get($map, badge-item-before);
+
+			@if ($_badge-item-before) {
+				.badge-item-before {
+					@include clay-css($_badge-item-before);
+				}
 			}
 
-			.badge-item-after {
-				@include clay-css(map-get($map, badge-item-after));
+			$_badge-item-after: map-get($map, badge-item-after);
+
+			@if ($_badge-item-after) {
+				.badge-item-after {
+					@include clay-css($_badge-item-after);
+				}
 			}
 
 			@if (map-get($c-inner, enabled)) {
-				> .c-inner {
-					@include clay-css($c-inner);
+				@if (length($c-inner) != 0) {
+					> .c-inner {
+						@include clay-css($c-inner);
+					}
 				}
 			}
 		}