@clayui/css 3.126.0 → 3.128.0

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

@@ -79,7 +79,9 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
 
 			@if ($breakpoint-down) {
 				@include media-breakpoint-down($breakpoint-down) {
@@ -87,124 +89,209 @@
 				}
 			}
 
-			&::before {
-				@include clay-css(map-get($map, before));
+			$_before: map-get($map, before);
+
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
 			}
 
-			&::after {
-				@include clay-css(map-get($map, after));
+			$_after: map-get($map, after);
+
+			@if ($_after) {
+				&::after {
+					@include clay-css($_after);
+				}
 			}
 
-			&.show {
-				@include clay-css(map-get($map, show));
+			$_show: map-get($map, show);
+
+			@if ($_show) {
+				&.show {
+					@include clay-css($_show);
+				}
 			}
 
-			.dropdown-header {
-				@include clay-css(map-get($map, dropdown-header));
+			$_dropdown-header: map-get($map, dropdown-header);
+
+			@if ($_dropdown-header) {
+				.dropdown-header {
+					@include clay-css($_dropdown-header);
+				}
 			}
 
-			.dropdown-subheader {
-				@include clay-css(map-get($map, dropdown-subheader));
+			$_dropdown-subheader: map-get($map, dropdown-subheader);
+
+			@if ($_dropdown-subheader) {
+				.dropdown-subheader {
+					@include clay-css($_dropdown-subheader);
+				}
 			}
 
-			.dropdown-section {
-				@include clay-css(map-get($map, dropdown-section));
+			$_dropdown-section: map-get($map, dropdown-section);
+
+			@if ($_dropdown-section) {
+				.dropdown-section {
+					@include clay-css($_dropdown-section);
+				}
 			}
 
-			.dropdown-caption {
-				@include clay-css(map-get($map, dropdown-caption));
+			$_dropdown-caption: map-get($map, dropdown-caption);
+
+			@if ($_dropdown-caption) {
+				.dropdown-caption {
+					@include clay-css($_dropdown-caption);
+				}
 			}
 
-			.dropdown-item {
-				@include clay-dropdown-item-variant(
-					map-get($map, dropdown-item)
-				);
+			$_dropdown-item: map-get($map, dropdown-item);
+
+			@if ($_dropdown-item) {
+				.dropdown-item {
+					@include clay-dropdown-item-variant($_dropdown-item);
+				}
 			}
 
-			.dropdown-item-scroll {
-				@include clay-dropdown-item-variant(
-					map-get($map, dropdown-item-scroll)
-				);
+			$_dropdown-item-scroll: map-get($map, dropdown-item-scroll);
+
+			@if ($_dropdown-item-scroll) {
+				.dropdown-item-scroll {
+					@include clay-dropdown-item-variant($_dropdown-item-scroll);
+				}
 			}
 
-			.dropdown-item-scroll-down {
-				@include clay-dropdown-item-variant(
-					map-get($map, dropdown-item-scroll-down)
-				);
+			$_dropdown-item-scroll-down: map-get(
+				$map,
+				dropdown-item-scroll-down
+			);
+
+			@if ($_dropdown-item-scroll-down) {
+				.dropdown-item-scroll-down {
+					@include clay-dropdown-item-variant(
+						$_dropdown-item-scroll-down
+					);
+				}
 			}
 
-			.dropdown-item-scroll-up {
-				@include clay-dropdown-item-variant(
-					map-get($map, dropdown-item-scroll-up)
-				);
+			$_dropdown-item-scroll-up: map-get($map, dropdown-item-scroll-up);
+
+			@if ($_dropdown-item-scroll-up) {
+				.dropdown-item-scroll-up {
+					@include clay-dropdown-item-variant(
+						$_dropdown-item-scroll-up
+					);
+				}
 			}
 
-			.dropdown-divider {
-				@include clay-css(map-get($map, dropdown-divider));
+			$_dropdown-divider: map-get($map, dropdown-divider);
+
+			@if ($_dropdown-divider) {
+				.dropdown-divider {
+					@include clay-css($_dropdown-divider);
+				}
 			}
 
-			.dropdown-footer {
-				@include clay-css(map-get($map, dropdown-footer));
+			$_dropdown-ooter: map-get($map, dropdown-ooter);
+
+			@if ($_dropdown-ooter) {
+				.dropdown-footer {
+					@include clay-css($_dropdown-footer);
+				}
 			}
 
-			.alert {
-				@include clay-alert-variant(map-get($map, alert));
+			$_alert: map-get($map, alert);
+
+			@if ($_alert) {
+				.alert {
+					@include clay-alert-variant($_alert);
+				}
 			}
 
-			.alert-fluid {
-				@include clay-alert-variant(map-get($map, alert-fluid));
+			$_alert-fluid: map-get($map, alert-fluid);
+
+			@if ($_alert-fluid) {
+				.alert-fluid {
+					@include clay-alert-variant($_alert-fluid);
+				}
 			}
 
-			&.dropdown-menu-indicator-start {
-				$dropdown-menu-indicator-start: setter(
-					map-get($map, dropdown-menu-indicator-start),
-					()
-				);
+			$_dropdown-menu-indicator-start: map-get(
+				$map,
+				dropdown-menu-indicator-start
+			);
 
-				@include clay-css($dropdown-menu-indicator-start);
+			@if ($_dropdown-menu-indicator-start) {
+				&.dropdown-menu-indicator-start {
+					@include clay-css($_dropdown-menu-indicator-start);
 
-				.dropdown-item {
-					@include clay-dropdown-item-variant(
-						map-get($dropdown-menu-indicator-start, dropdown-item)
+					$_dropdown-item: map-get(
+						$_dropdown-menu-indicator-start,
+						dropdown-item
 					);
-				}
 
-				.dropdown-item-indicator-start {
-					@include clay-link(
-						map-get(
-							$dropdown-menu-indicator-start,
-							dropdown-item-indicator-start
-						)
+					@if ($_dropdown-item) {
+						.dropdown-item {
+							@include clay-dropdown-item-variant(
+								$_dropdown-item
+							);
+						}
+					}
+
+					$_dropdown-item-indicator-start: map-get(
+						$_dropdown-menu-indicator-start,
+						dropdown-item-indicator-start
 					);
+
+					@if ($_dropdown-item-indicator-start) {
+						.dropdown-item-indicator-start {
+							@include clay-link($_dropdown-item-indicator-start);
+						}
+					}
 				}
 			}
 
-			&.dropdown-menu-indicator-end {
-				$dropdown-menu-indicator-end: setter(
-					map-get($map, dropdown-menu-indicator-end),
-					()
-				);
+			$_dropdown-menu-indicator-end: map-get(
+				$map,
+				dropdown-menu-indicator-end
+			);
 
-				@include clay-css($dropdown-menu-indicator-end);
+			@if ($_dropdown-menu-indicator-end) {
+				&.dropdown-menu-indicator-end {
+					@include clay-css($_dropdown-menu-indicator-end);
 
-				.dropdown-item {
-					@include clay-dropdown-item-variant(
-						map-get($dropdown-menu-indicator-end, dropdown-item)
+					$_dropdown-item: map-get(
+						$_dropdown-menu-indicator-end,
+						dropdown-item
 					);
-				}
 
-				.dropdown-item-indicator-end {
-					@include clay-link(
-						map-get(
-							$dropdown-menu-indicator-end,
-							dropdown-item-indicator-end
-						)
+					@if ($_dropdown-item) {
+						.dropdown-item {
+							@include clay-dropdown-item-variant(
+								$_dropdown-item
+							);
+						}
+					}
+
+					$_dropdown-item-indicator-end: map-get(
+						$_dropdown-menu-indicator-end,
+						dropdown-item-indicator-end
 					);
+
+					@if ($_dropdown-item-indicator-end) {
+						.dropdown-item-indicator-end {
+							@include clay-link($_dropdown-item-indicator-end);
+						}
+					}
 				}
 			}
 
-			.inline-scroller {
-				@include clay-css(map-get($map, inline-scroller));
+			$_inline-scroller: map-get($map, inline-scroller);
+
+			@if ($_inline-scroller) {
+				.inline-scroller {
+					@include clay-css($_inline-scroller);
+				}
 			}
 
 			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
@@ -364,26 +451,6 @@
 			setter(map-get($map, hover-c-kbd-inline), ())
 		);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-		$_focus-selector: if(
-			$_enable-focus-visible,
-			'&:focus-visible',
-			'&:focus'
-		);
-		$_prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
 		$focus: setter(map-get($map, focus), ());
 		$focus: map-deep-merge(
 			$focus,
@@ -599,136 +666,214 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
 
-			&:link {
-				$_link: setter(map-get($map, link), ());
+			$_link: map-get($map, link);
 
-				@include clay-css($_link);
+			@if ($_link) {
+				&:link {
+					@include clay-css($_link);
 
-				&::before {
-					@include clay-css(map-get($_link, before));
-				}
+					$_before: map-get($_link, before);
 
-				&::after {
-					@include clay-css(map-get($_link, after));
-				}
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
 
-				.c-kbd-inline {
-					@include clay-css(map-get($_link, c-kbd-inline));
-				}
-			}
+					$_after: map-get($_link, after);
 
-			&:visited {
-				$_visited: setter(map-get($map, visited), ());
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
 
-				@include clay-css($_visited);
+					$_c-kbd-inline: map-get($_link, c-kbd-inline);
 
-				&::before {
-					@include clay-css(map-get($_visited, before));
+					@if ($_c-kbd-inline) {
+						.c-kbd-inline {
+							@include clay-css($_c-kbd-inline);
+						}
+					}
 				}
+			}
 
-				&::after {
-					@include clay-css(map-get($_visited, after));
-				}
+			$_visited: map-get($map, visited);
 
-				.c-kbd-inline {
-					@include clay-css(map-get($_visited, c-kbd-inline));
-				}
-			}
+			@if ($_visited) {
+				&:visited {
+					@include clay-css($_visited);
 
-			&:hover,
-			&.hover {
-				@include clay-css($hover);
+					$_before: map-get($_visited, before);
 
-				&::before {
-					@include clay-css(map-get($hover, before));
-				}
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
 
-				&::after {
-					@include clay-css(map-get($hover, after));
-				}
+					$_after: map-get($_visited, after);
 
-				.c-kbd-inline {
-					@include clay-css($hover-c-kbd-inline);
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
+
+					$_c-kbd-inline: map-get($_visited, c-kbd-inline);
+
+					@if ($_c-kbd-inline) {
+						.c-kbd-inline {
+							@include clay-css($_c-kbd-inline);
+						}
+					}
 				}
 			}
 
-			@at-root {
-				&.focus,
-				#{$_focus-selector},
-				#{$_prefers-focus-selector} {
-					@include clay-css($focus);
+			@if (length($hover) != 0) {
+				&:hover,
+				&.hover {
+					@include clay-css($hover);
 
-					&::before {
-						@include clay-css(map-get($focus, before));
+					$_before: map-get($hover, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
 					}
 
-					&::after {
-						@include clay-css(map-get($focus, after));
+					$_after: map-get($hover, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
 					}
 
-					.c-kbd-inline {
-						@include clay-css($focus-c-kbd-inline);
+					@if (length($hover-c-kbd-inline) != 0) {
+						.c-kbd-inline {
+							@include clay-css($hover-c-kbd-inline);
+						}
 					}
 				}
 			}
 
-			&:active {
-				@include clay-css($active);
-
-				&::before {
-					@include clay-css(map-get($active, before));
+			@if (length($focus) != 0) {
+				@at-root {
+					&.focus,
+					#{$focus-visible-selector},
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
+						@include clay-css($focus);
+
+						$_before: map-get($focus, before);
+
+						@if ($_before) {
+							&::before {
+								@include clay-css($_before);
+							}
+						}
+
+						$_after: map-get($focus, after);
+
+						@if ($_after) {
+							&::after {
+								@include clay-css($_after);
+							}
+						}
+
+						@if (length($focus-c-kbd-inline) != 0) {
+							.c-kbd-inline {
+								@include clay-css($focus-c-kbd-inline);
+							}
+						}
+					}
 				}
+			}
 
-				&::after {
-					@include clay-css(map-get($active, after));
-				}
+			@if (length($active) != 0) {
+				&:active {
+					@include clay-css($active);
 
-				label {
-					color: map-get($active, color);
-				}
+					$_before: map-get($active, before);
 
-				.form-check-label {
-					color: map-get($active, color);
-					font-weight: map-get($active, font-weight);
-				}
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
 
-				.custom-control-label {
-					font-weight: map-get($active, font-weight);
-				}
+					$_after: map-get($active, after);
 
-				.c-kbd-inline {
-					@include clay-css($active-c-kbd-inline);
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
+
+					label {
+						color: map-get($active, color);
+					}
+
+					.form-check-label {
+						color: map-get($active, color);
+						font-weight: map-get($active, font-weight);
+					}
+
+					.custom-control-label {
+						font-weight: map-get($active, font-weight);
+					}
+
+					@if (length($active-c-kbd-inline) != 0) {
+						.c-kbd-inline {
+							@include clay-css($active-c-kbd-inline);
+						}
+					}
 				}
 			}
 
-			&.active {
-				@include clay-css($active-class);
+			@if (length($active-class) != 0) {
+				&.active {
+					@include clay-css($active-class);
 
-				&::before {
-					@include clay-css(map-get($active-class, before));
-				}
+					$_before: map-get($active-class, before);
 
-				&::after {
-					@include clay-css(map-get($active-class, after));
-				}
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
 
-				label {
-					color: map-get($active-class, color);
-				}
+					$_after: map-get($active-class, after);
 
-				.form-check-label {
-					color: map-get($active-class, color);
-					font-weight: map-get($active-class, font-weight);
-				}
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
 
-				.custom-control-label {
-					font-weight: map-get($active-class, font-weight);
-				}
+					label {
+						color: map-get($active-class, color);
+					}
 
-				.c-kbd-inline {
-					@include clay-css($active-class-c-kbd-inline);
+					.form-check-label {
+						color: map-get($active-class, color);
+						font-weight: map-get($active-class, font-weight);
+					}
+
+					.custom-control-label {
+						font-weight: map-get($active-class, font-weight);
+					}
+
+					@if (length($active-class-c-kbd-inline) != 0) {
+						.c-kbd-inline {
+							@include clay-css($active-class-c-kbd-inline);
+						}
+					}
 				}
 			}
 
@@ -738,67 +883,107 @@
 			@at-root {
 				&.btn:not([disabled]):not(.disabled):active,
 				&.btn:not([disabled]):not(.disabled).active {
-					#{$_focus-selector},
-					#{$_prefers-focus-selector} {
+					#{$focus-visible-selector},
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						box-shadow: map-get($focus, box-shadow);
 					}
 				}
 			}
 
-			&:disabled,
-			&.disabled {
-				@include clay-css($disabled);
+			@if (length($disabled) != 0) {
+				&:disabled,
+				&.disabled {
+					@include clay-css($disabled);
 
-				&::before {
-					@include clay-css(map-get($disabled, before));
-				}
+					$_before: map-get($disabled, before);
 
-				&::after {
-					@include clay-css(map-get($disabled, after));
-				}
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
 
-				label,
-				.form-check-label {
-					color: map-get($disabled, color);
-				}
+					$_after: map-get($disabled, after);
 
-				.c-kbd-inline {
-					@include clay-css($disabled-c-kbd-inline);
-				}
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
 
-				&:active {
-					@include clay-css($disabled-active);
+					label,
+					.form-check-label {
+						color: map-get($disabled, color);
+					}
 
-					&::before {
-						@include clay-css(map-get($disabled-active, before));
+					@if (length($disabled-c-kbd-inline) != 0) {
+						.c-kbd-inline {
+							@include clay-css($disabled-c-kbd-inline);
+						}
 					}
 
-					&::after {
-						@include clay-css(map-get($disabled-active, after));
+					@if (length($disabled-active) != 0) {
+						&:active {
+							@include clay-css($disabled-active);
+
+							$_before: map-get($disabled-active, before);
+
+							@if ($_before) {
+								&::before {
+									@include clay-css($_before);
+								}
+							}
+
+							$_after: map-get($map, after);
+
+							@if ($_after) {
+								&::after {
+									@include clay-css($_after);
+								}
+							}
+						}
 					}
 				}
 			}
 
-			&.show {
-				$show: setter(map-get($map, show), ());
+			$_show: map-get($map, show);
 
-				@include clay-css($show);
+			@if ($_show) {
+				&.show {
+					@include clay-css($_show);
 
-				&::before {
-					@include clay-css(map-get($show, before));
-				}
+					$_before: map-get($_show, before);
 
-				&::after {
-					@include clay-css(map-get($show, after));
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_show, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
 				}
 			}
 
-			&::before {
-				@include clay-css(map-get($map, before));
+			$_before: map-get($map, before);
+
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
 			}
 
-			&::after {
-				@include clay-css(map-get($map, after));
+			$_after: map-get($map, after);
+
+			@if ($_after) {
+				&::after {
+					@include clay-css($_after);
+				}
 			}
 
 			@if (map-get($c-inner, enabled)) {
@@ -807,40 +992,66 @@
 				}
 			}
 
-			&.autofit-row {
-				@include clay-css(map-deep-get($map, '&.autofit-row'));
+			$_autofit-row: map-get($map, '&.autofit-row');
 
-				> .autofit-col {
-					@include clay-css(
-						map-deep-get($map, '&.autofit-row', autofit-col)
-					);
-				}
+			@if ($_autofit-row) {
+				&.autofit-row {
+					@include clay-css($_autofit-row);
+
+					$_autofit-col: map-get($_autofit-row, autofit-col);
+
+					@if ($_autofit-col) {
+						> .autofit-col {
+							@include clay-css($_autofit-col);
+						}
+					}
 
-				> .autofit-col-expand {
-					@include clay-css(
-						map-deep-get($map, '&.autofit-row', autofit-col-expand)
+					$_autofit-col-expand: map-get(
+						$_autofit-row,
+						autofit-col-expand
 					);
+
+					@if ($_autofit-col-expand) {
+						> .autofit-col-expand {
+							@include clay-css($_autofit-col-expand);
+						}
+					}
 				}
 			}
 
-			.autofit-row {
-				@include clay-css(map-get($map, autofit-row));
+			$_autofit-row: map-get($map, autofit-row);
 
-				> .autofit-col {
-					@include clay-css(
-						map-deep-get($map, autofit-row, autofit-col)
-					);
-				}
+			@if ($_autofit-row) {
+				.autofit-row {
+					@include clay-css($_autofit-row);
+
+					$_autofit-col: map-get($_autofit-row, autofit-col);
+
+					@if ($_autofit-col) {
+						> .autofit-col {
+							@include clay-css($_autofit-col);
+						}
+					}
 
-				> .autofit-col-expand {
-					@include clay-css(
-						map-deep-get($map, autofit-row, autofit-col-expand)
+					$_autofit-col-expand: map-get(
+						$_autofit-row,
+						autofit-col-expand
 					);
+
+					@if ($_autofit-col-expand) {
+						> .autofit-col-expand {
+							@include clay-css($_autofit-col-expand);
+						}
+					}
 				}
 			}
 
-			.c-kbd-inline {
-				@include clay-css(map-get($map, c-kbd-inline));
+			$_c-kbd-inline: map-get($map, c-kbd-inline);
+
+			@if ($_c-kbd-inline) {
+				.c-kbd-inline {
+					@include clay-css($_c-kbd-inline);
+				}
 			}
 
 			.form-check-label {
@@ -850,6 +1061,32 @@
 			.custom-control-label {
 				font-weight: map-get($map, font-weight);
 			}
+
+			$_inline-item: map-get($map, inline-item);
+
+			@if ($_inline-item) {
+				.inline-item {
+					@include clay-css($_inline-item);
+
+					$_lexicon-icon: map-get($_inline-item, lexicon-icon);
+
+					@if ($_lexicon-icon) {
+						.lexicon-icon {
+							@include clay-css(
+								map-get($_inline-item, lexicon-icon)
+							);
+						}
+					}
+				}
+			}
+
+			$_label: map-get($map, label);
+
+			@if ($_label) {
+				.label {
+					@include clay-label-variant($_label);
+				}
+			}
 		}
 	}
 }