@clayui/css 3.132.0 → 3.134.0

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

@@ -89,14 +89,20 @@
 
 	@if ($enabled) {
 		@include media-breakpoint-down($breakpoint-down) {
-			@include clay-css($map);
+			@if (length($map) != 0) {
+				@include clay-css($map);
+			}
 
-			> .input-group-item {
-				@include clay-css($item);
+			@if (length($item) != 0) {
+				> .input-group-item {
+					@include clay-css($item);
+				}
 			}
 
-			> .input-group-item-shrink {
-				@include clay-css($item-shrink);
+			@if (length($item-shrink) != 0) {
+				> .input-group-item-shrink {
+					@include clay-css($item-shrink);
+				}
 			}
 		}
 	}
@@ -164,29 +170,49 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
+
+			$_label: map-get($map, label);
 
-			label {
-				@include clay-css(map-deep-get($map, label));
+			@if ($_label) {
+				label {
+					@include clay-css($_label);
+				}
 			}
 
-			.custom-control {
-				@include clay-custom-control-variant(
-					map-deep-get($map, custom-control)
-				);
+			$_custom-control: map-get($map, custom-control);
+
+			@if ($_custom-control) {
+				.custom-control {
+					@include clay-custom-control-variant($_custom-control);
+				}
 			}
 
-			.form-check {
-				@include clay-css(map-deep-get($map, form-check));
+			$_form-check: map-get($map, form-check);
+
+			@if ($_form-check) {
+				.form-check {
+					@include clay-css($_form-check);
+
+					$_input: map-get($_form-check, input);
 
-				input[type='radio'],
-				input[type='checkbox'] {
-					@include clay-css(map-deep-get($map, form-check, input));
+					@if ($_input) {
+						input[type='radio'],
+						input[type='checkbox'] {
+							@include clay-css($_input);
+						}
+					}
 				}
 			}
 
-			.lexicon-icon {
-				@include clay-css(map-deep-get($map, lexicon-icon));
+			$_lexicon-icon: map-get($map, lexicon-icon);
+
+			@if ($_lexicon-icon) {
+				.lexicon-icon {
+					@include clay-css($_lexicon-icon);
+				}
 			}
 
 			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
@@ -288,121 +314,190 @@
 		$enabled: setter(map-get($map, enabled), true);
 
 		@if ($enabled) {
-			@include clay-css($map);
-
-			&::before {
-				@include clay-css(map-get($map, before));
+			@if (length($map) != 0) {
+				@include clay-css($map);
 			}
 
-			&::after {
-				@include clay-css(map-get($map, after));
-			}
+			$_before: map-get($map, before);
 
-			&.focus {
-				@include clay-input-group-item-variant(map-get($map, focus));
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
 			}
 
-			&:focus-within:has(input:focus) {
-				@include clay-input-group-item-variant(
-					map-get($map, focus-within)
-				);
+			$_after: map-get($map, after);
+
+			@if ($_after) {
+				&::after {
+					@include clay-css($_after);
+				}
 			}
 
-			&:first-child {
-				@include clay-css(map-deep-get($map, first-child));
+			$_focus: map-get($map, focus);
+
+			@if ($_focus) {
+				&.focus {
+					@include clay-input-group-item-variant($_focus);
+				}
 			}
 
-			&.input-group-prepend {
-				@include clay-css(map-deep-get($map, input-group-prepend));
+			$_focus-within: map-get($map, focus-within);
+
+			@if ($_focus-within) {
+				&:focus-within:has(input:focus) {
+					@include clay-input-group-item-variant($_focus-within);
+				}
 			}
 
-			&.input-group-append {
-				@include clay-css(map-deep-get($map, input-group-append));
+			$_first-child: map-get($map, first-child);
+
+			@if ($_first-child) {
+				&:first-child {
+					@include clay-css($_first-child);
+				}
 			}
 
-			> .btn {
-				@include clay-button-variant(map-deep-get($map, btn));
+			$_input-group-prepend: map-get($map, input-group-prepend);
+
+			@if ($_input-group-prepend) {
+				&.input-group-prepend {
+					@include clay-css($_input-group-prepend);
+				}
 			}
 
-			> .btn-monospaced {
-				@include clay-button-variant(
-					map-deep-get($map, btn-monospaced)
-				);
+			$_input-group-append: map-get($map, input-group-append);
+
+			@if ($_input-group-append) {
+				&.input-group-append {
+					@include clay-css($_input-group-append);
+				}
 			}
 
-			> .dropdown {
-				@include clay-css(map-deep-get($map, dropdown));
+			$_btn: map-get($map, btn);
+
+			@if ($_btn) {
+				> .btn {
+					@include clay-button-variant($_btn);
+				}
 			}
 
-			> .form-control {
-				@include clay-form-control-variant(
-					map-deep-get($map, form-control)
-				);
+			$_btn-monospaced: map-get($map, btn-monospaced);
+
+			@if ($_btn-monospaced) {
+				> .btn-monospaced {
+					@include clay-button-variant($_btn-monospaced);
+				}
 			}
 
-			> .form-file {
-				@include clay-css(map-deep-get($map, form-file));
+			$_dropdown: map-get($map, dropdown);
 
-				.btn {
-					@include clay-button-variant(
-						map-deep-get($map, form-file, btn)
-					);
+			@if ($_dropdown) {
+				> .dropdown {
+					@include clay-css($_dropdown);
 				}
 			}
 
-			> textarea.form-control,
-			> .form-control-textarea {
-				@include clay-form-control-variant(
-					map-deep-get($map, textarea)
-				);
+			$_form-control: map-get($map, form-control);
+
+			@if ($_form-control) {
+				> .form-control {
+					@include clay-form-control-variant($_form-control);
+				}
 			}
 
-			> .form-control-plaintext {
-				@include clay-form-control-variant(
-					map-deep-get($map, form-control-plaintext)
-				);
+			$_form-file: map-get($map, form-file);
+
+			@if ($_form-file) {
+				> .form-file {
+					@include clay-css($_form-file);
+
+					$_btn: map-get($_form-file, btn);
+
+					@if ($_btn) {
+						.btn {
+							@include clay-button-variant($_btn);
+						}
+					}
+				}
 			}
 
-			> .input-group-text {
-				@include clay-input-group-text-variant(
-					map-deep-get($map, input-group-text)
-				);
+			$_textarea: map-get($map, textarea);
+
+			@if ($_textarea) {
+				> textarea.form-control,
+				> .form-control-textarea {
+					@include clay-form-control-variant($_textarea);
+				}
 			}
 
-			> .input-group-inset-item {
-				@include clay-css(map-deep-get($map, input-group-inset-item));
+			$_form-control-plaintext: map-get($map, form-control-plaintext);
 
-				> .btn {
-					@include clay-button-variant(
-						map-deep-get($map, input-group-inset-item, btn)
+			@if ($_form-control-plaintext) {
+				> .form-control-plaintext {
+					@include clay-form-control-variant(
+						$_form-control-plaintext
 					);
 				}
+			}
 
-				> .btn-monospaced {
-					@include clay-button-variant(
-						map-deep-get(
-							$map,
-							input-group-inset-item,
-							btn-monospaced
-						)
-					);
+			$_input-group-text: map-get($map, input-group-text);
+
+			@if ($_input-group-text) {
+				> .input-group-text {
+					@include clay-input-group-text-variant($_input-group-text);
 				}
+			}
 
-				> .form-file {
-					@include clay-css(map-deep-get($map, form-file));
+			$_input-group-inset-item: map-get($map, input-group-inset-item);
+
+			@if ($_input-group-inset-item) {
+				> .input-group-inset-item {
+					@include clay-css($_input-group-inset-item);
+
+					$_btn: map-get($_input-group-inset-item, btn);
 
-					.btn {
-						@include clay-button-variant(
-							map-deep-get($map, form-file, btn)
-						);
+					@if ($_btn) {
+						> .btn {
+							@include clay-button-variant($_btn);
+						}
+					}
+
+					$_btn-monospaced: map-get(
+						$_input-group-inset-item,
+						btn-monospaced
+					);
+
+					@if ($_btn-monospaced) {
+						> .btn-monospaced {
+							@include clay-button-variant($_btn-monospaced);
+						}
+					}
+
+					$_form-file: map-get($map, form-file);
+
+					@if ($_form-file) {
+						> .form-file {
+							@include clay-css($_form-file);
+
+							$_btn: map-get($_form-file, btn);
+
+							@if ($_btn) {
+								.btn {
+									@include clay-button-variant($_btn);
+								}
+							}
+						}
 					}
 				}
 			}
 
-			.form-control-inset {
-				@include clay-form-control-variant(
-					map-deep-get($map, form-control-inset)
-				);
+			$_form-control-inset: map-get($map, form-control-inset);
+
+			@if ($_form-control-inset) {
+				.form-control-inset {
+					@include clay-form-control-variant($_form-control-inset);
+				}
 			}
 		}
 	}
@@ -463,30 +558,50 @@
 		$enabled: setter(map-get($map, enabled), true);
 
 		@if ($enabled) {
-			@include clay-css($map);
+			@if (length($map) != 0) {
+				@include clay-css($map);
+			}
 
-			> .input-group-item {
-				@include clay-input-group-item-variant(
-					map-deep-get($map, input-group-item)
-				);
+			$_input-group-item: map-get($map, input-group-item);
+
+			@if ($_input-group-item) {
+				> .input-group-item {
+					@include clay-input-group-item-variant($_input-group-item);
+				}
 			}
 
-			> .input-group-item-shrink {
-				@include clay-input-group-item-variant(
-					map-deep-get($map, input-group-item-shrink)
-				);
+			$_input-group-item-shrink: map-get($map, input-group-item-shrink);
+
+			@if ($_input-group-item-shrink) {
+				> .input-group-item-shrink {
+					@include clay-input-group-item-variant(
+						$_input-group-item-shrink
+					);
+				}
 			}
 
-			.btn-primary {
-				@include clay-button-variant(map-deep-get($map, btn-primary));
+			$_btn-primary: map-get($map, btn-primary);
+
+			@if ($_btn-primary) {
+				.btn-primary {
+					@include clay-button-variant($_btn-primary);
+				}
 			}
 
-			.btn-secondary {
-				@include clay-button-variant(map-deep-get($map, btn-secondary));
+			$_btn-secondary: map-get($map, btn-secondary);
+
+			@if ($_btn-secondary) {
+				.btn-secondary {
+					@include clay-button-variant($_btn-secondary);
+				}
 			}
 
-			.btn-unstyled {
-				@include clay-button-variant(map-deep-get($map, btn-unstyled));
+			$_btn-unstyled: map-get($map, btn-unstyled);
+
+			@if ($_btn-unstyled) {
+				.btn-unstyled {
+					@include clay-button-variant($_btn-unstyled);
+				}
 			}
 
 			$_media-breakpoint-down: map-get($map, media-breakpoint-down);

package/src/scss/mixins/_labels.scss

@@ -212,7 +212,9 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
 
 			// Inline Item in Labels are deprecated in v2.0.0-rc.11 use .label-item
 			// pattern instead
@@ -228,39 +230,59 @@
 				}
 			}
 
-			.label-item {
-				@include clay-css($label-item);
+			@if (length($label-item) != 0) {
+				.label-item {
+					@include clay-css($label-item);
 
-				.lexicon-icon {
-					@include clay-css($lexicon-icon);
+					@if (length($lexicon-icon) != 0) {
+						.lexicon-icon {
+							@include clay-css($lexicon-icon);
+						}
+					}
 				}
 			}
 
-			.label-item-expand {
-				@include clay-css(map-get($map, label-item-expand));
+			$_label-item-expand: map-get($map, label-item-expand);
+
+			@if ($_label-item-expand) {
+				.label-item-expand {
+					@include clay-css($_label-item-expand);
+				}
 			}
 
-			.label-item-before {
-				@include clay-css($label-item-before);
+			@if (length($label-item-before) != 0) {
+				.label-item-before {
+					@include clay-css($label-item-before);
+				}
 			}
 
-			.label-item-after {
-				@include clay-css($label-item-after);
+			@if (length($label-item-after) != 0) {
+				.label-item-after {
+					@include clay-css($label-item-after);
+				}
 			}
 
-			.close {
-				@include clay-close(map-get($map, close));
+			$_close: map-get($map, close);
+
+			@if ($_close) {
+				.close {
+					@include clay-close($_close);
+				}
 			}
 
-			.sticker {
-				@include clay-css($sticker);
+			@if (length($sticker) != 0) {
+				.sticker {
+					@include clay-css($sticker);
+				}
 			}
 
-			.sticker-overlay {
-				@include clay-css($sticker-overlay);
+			@if (length($sticker-overlay) != 0) {
+				.sticker-overlay {
+					@include clay-css($sticker-overlay);
+				}
 			}
 
-			@if (map-get($c-inner, enabled)) {
+			@if (map-get($c-inner, enabled) and length($c-inner) != 0) {
 				> .c-inner {
 					@include clay-css($c-inner);
 				}
@@ -670,61 +692,91 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($map);
-
-			&:disabled,
-			&.disabled {
-				@include clay-css($disabled);
+			@if (length($map) != 0) {
+				@include clay-css($map);
 			}
 
-			&[href],
-			&[type],
-			&[tabindex] {
-				@include clay-link($href);
+			@if (length($disabled) != 0) {
+				&:disabled,
+				&.disabled {
+					@include clay-css($disabled);
+				}
 			}
 
-			.lexicon-icon {
-				@include clay-css($lexicon-icon);
+			@if (length($href) != 0) {
+				&[href],
+				&[type],
+				&[tabindex] {
+					@include clay-link($href);
+				}
 			}
 
-			.label-item {
-				@include clay-css($label-item);
-
+			@if (length($lexicon-icon) != 0) {
 				.lexicon-icon {
 					@include clay-css($lexicon-icon);
 				}
 			}
 
-			.label-item-expand {
-				@include clay-css(map-get($map, label-item-expand));
+			@if (length($label-item) != 0) {
+				.label-item {
+					@include clay-css($label-item);
+
+					@if (length($lexicon-icon) != 0) {
+						.lexicon-icon {
+							@include clay-css($lexicon-icon);
+						}
+					}
+				}
 			}
 
-			.label-item-before {
-				@include clay-css($label-item-before);
+			$_label-item-expand: map-get($map, label-item-expand);
+
+			@if ($_label-item-expand) {
+				.label-item-expand {
+					@include clay-css($_label-item-expand);
+				}
 			}
 
-			.label-item-after {
-				@include clay-css($label-item-after);
+			@if (length($label-item-before) != 0) {
+				.label-item-before {
+					@include clay-css($label-item-before);
+				}
 			}
 
-			a,
-			.btn-unstyled {
-				@include clay-link($link);
+			@if (length($label-item-after) != 0) {
+				.label-item-after {
+					@include clay-css($label-item-after);
+				}
 			}
 
-			.close {
-				@include clay-close(map-get($map, close));
+			@if (length($link) != 0) {
+				a,
+				.btn-unstyled {
+					@include clay-link($link);
+				}
 			}
 
-			.sticker {
-				@include clay-css($sticker);
+			$_close: map-get($map, close);
+
+			@if ($_close) {
+				.close {
+					@include clay-close($_close);
+				}
 			}
 
-			.sticker-overlay {
-				@include clay-css($sticker-overlay);
+			@if (length($sticker) != 0) {
+				.sticker {
+					@include clay-css($sticker);
+				}
+			}
+
+			@if (length($sticker-overlay) != 0) {
+				.sticker-overlay {
+					@include clay-css($sticker-overlay);
+				}
 			}
 
-			@if (map-get($c-inner, enabled)) {
+			@if (map-get($c-inner, enabled) and length($c-inner) != 0) {
 				> .c-inner {
 					@include clay-css($c-inner);
 				}