@clayui/css 3.133.0 → 3.134.0

package/src/scss/mixins/_pagination.scss

@@ -107,106 +107,141 @@
 		$enabled: setter(map-get($map, enabled), true);
 
 		@if ($enabled) {
-			@include clay-css($map);
-
-			> a,
-			> button {
-				@include clay-link(map-get($map, link));
+			@if (length($map) != 0) {
+				@include clay-css($map);
 			}
 
-			&.active {
+			$_link: map-get($map, link);
+
+			@if ($_link) {
 				> a,
 				> button {
-					@include clay-link(map-deep-get($map, link, active-class));
+					@include clay-link(map-get($map, link));
 				}
-			}
 
-			&.disabled {
-				> a,
-				> button {
-					@include clay-link(map-deep-get($map, link, disabled));
+				$_active-class: map-get($_link, active-class);
+
+				@if ($_active-class) {
+					&.active {
+						> a,
+						> button {
+							@include clay-link($_active-class);
+						}
+					}
+				}
+
+				$_disabled: map-get($_link, disabled);
+
+				@if ($_disabled) {
+					&.disabled {
+						> a,
+						> button {
+							@include clay-link($_disabled);
+						}
+					}
 				}
 			}
 
-			.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);
+				}
 			}
 
-			.lexicon-icon {
-				@include clay-css(map-get($map, lexicon-icon));
+			$_lexicon-icon: map-get($map, lexicon-icon);
+
+			@if ($_lexicon-icon) {
+				.lexicon-icon {
+					@include clay-css($_lexicon-icon);
+				}
 			}
 
-			+ .pagination-results {
-				@include clay-css(map-get($map, pagination-results));
+			$_pagination-results: map-get($map, pagination-results);
+
+			@if ($_pagination-results) {
+				+ .pagination-results {
+					@include clay-css($_pagination-results);
+				}
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+
+			@if ($_media-breakpoint-down) {
+				@each $breakpoint in map-keys($_media-breakpoint-down) {
+					$media-breakpoint-down: map-get(
+						$_media-breakpoint-down,
 						$breakpoint
 					);
 
 					@include media-breakpoint-down($breakpoint) {
 						@include clay-css($media-breakpoint-down);
 
-						> a,
-						> button {
-							@include clay-link(
-								map-get($media-breakpoint-down, link)
-							);
-						}
+						$_link: map-get($media-breakpoint-down, link);
 
-						&.active {
+						@if ($_link) {
 							> a,
 							> button {
-								@include clay-link(
-									map-deep-get(
-										$media-breakpoint-down,
-										link,
-										active-class
-									)
-								);
+								@include clay-link($_link);
+							}
+
+							$_active-class: map-get($_link, active-class);
+
+							@if ($_active-class) {
+								&.active {
+									> a,
+									> button {
+										@include clay-link($_active-class);
+									}
+								}
+							}
+
+							$_disabled: map-get($_link, disabled);
+
+							@if ($_disabled) {
+								&.disabled {
+									> a,
+									> button {
+										@include clay-link($_disabled);
+									}
+								}
 							}
 						}
 
-						&.disabled {
-							> a,
-							> button {
-								@include clay-link(
-									map-deep-get(
-										$media-breakpoint-down,
-										link,
-										disabled
-									)
+						$_dropdown-menu: map-get(
+							$media-breakpoint-down,
+							dropdown-menu
+						);
+
+						@if ($_dropdown-menu) {
+							.dropdown-menu {
+								@include clay-dropdown-menu-variant(
+									$_dropdown-menu
 								);
 							}
 						}
 
-						.dropdown-menu {
-							@include clay-dropdown-menu-variant(
-								map-get($media-breakpoint-down, dropdown-menu)
-							);
-						}
+						$_lexicon-icon: map-get(
+							$media-breakpoint-down,
+							lexicon-icon
+						);
 
-						.lexicon-icon {
-							@include clay-css(
-								map-get($media-breakpoint-down, lexicon-icon)
-							);
+						@if ($_lexicon-icon) {
+							.lexicon-icon {
+								@include clay-css($_lexicon-icon);
+							}
 						}
 
-						+ .pagination-results {
-							@include clay-css(
-								map-get(
-									$media-breakpoint-down,
-									pagination-results
-								)
-							);
+						$_pagination-results: map-get(
+							$media-breakpoint-down,
+							pagination-results
+						);
+
+						@if ($_pagination-results) {
+							+ .pagination-results {
+								@include clay-css($_pagination-results);
+							}
 						}
 					}
 				}
@@ -288,132 +323,187 @@
 		$enabled: setter(map-get($map, enabled), true);
 
 		@if ($enabled) {
-			@include clay-css($map);
+			@if (length($map) != 0) {
+				@include clay-css($map);
+			}
+
+			$_page-item: map-get($map, page-item);
 
-			.page-item {
-				@include clay-css(map-get($map, page-item));
+			@if ($_page-item) {
+				.page-item {
+					@include clay-css($_page-item);
+				}
 			}
 
-			.page-link {
-				@include clay-link(map-get($map, page-link));
+			$_page-link: map-get($map, page-link);
+
+			@if ($_page-link) {
+				.page-link {
+					@include clay-link($_page-link);
+				}
 			}
 
-			.page-item:first-child .page-link,
-			.page-link-first {
-				@include clay-css(map-get($map, page-link-first));
+			$_page-link-first: map-get($map, page-link-first);
+
+			@if ($_page-link-first) {
+				.page-item:first-child .page-link,
+				.page-link-first {
+					@include clay-css($_page-link-first);
+				}
 			}
 
-			.page-item:last-child .page-link,
-			.page-link-last {
-				@include clay-css(map-get($map, page-link-last));
+			$_page-link-last: map-get($map, page-link-last);
+
+			@if ($_page-link-last) {
+				.page-item:last-child .page-link,
+				.page-link-last {
+					@include clay-css($_page-link-last);
+				}
 			}
 
-			.page-item {
-				&.active {
-					.page-link {
-						@include clay-link(
-							map-deep-get($map, page-link, active-class)
-						);
+			@if ($_page-link) {
+				.page-item {
+					$_active-class: map-get($_page-link, active-class);
+
+					@if ($_active-class) {
+						&.active {
+							.page-link {
+								@include clay-link($_active-class);
+							}
+						}
 					}
-				}
 
-				&.disabled {
-					.page-link {
-						@include clay-link(
-							map-deep-get($map, page-link, disabled)
-						);
+					$_disabled: map-get($_page-link, disabled);
+
+					@if ($_disabled) {
+						&.disabled {
+							.page-link {
+								@include clay-link($_disabled);
+							}
+						}
 					}
 				}
 			}
 
-			.pagination {
-				@include clay-pagination-variant(map-get($map, pagination));
+			$_pagination: map-get($map, pagination);
+
+			@if ($_pagination) {
+				.pagination {
+					@include clay-pagination-variant($_pagination);
+				}
 			}
 
-			.pagination-items-per-page {
-				@include clay-pagination-items-per-page-variant(
-					map-get($map, pagination-items-per-page)
-				);
+			$_pagination-items-per-page: map-get(
+				$map,
+				pagination-items-per-page
+			);
+
+			@if ($_pagination-items-per-page) {
+				.pagination-items-per-page {
+					@include clay-pagination-items-per-page-variant(
+						$_pagination-items-per-page
+					);
+				}
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+
+			@if ($_media-breakpoint-down) {
+				@each $breakpoint in map-keys($_media-breakpoint-down) {
+					$media-breakpoint-down: map-get(
+						$_media-breakpoint-down,
 						$breakpoint
 					);
 
 					@include media-breakpoint-down($breakpoint) {
 						@include clay-css($media-breakpoint-down);
 
-						.page-item {
-							@include clay-css(
-								map-get($media-breakpoint-down, page-item)
-							);
+						$_page-item: map-get($media-breakpoint-down, page-item);
+
+						@if ($_page-item) {
+							.page-item {
+								@include clay-css($_page-item);
+							}
 						}
 
-						.page-link {
-							@include clay-link(
-								map-get($media-breakpoint-down, page-link)
-							);
+						$_page-link: map-get($media-breakpoint-down, page-link);
+
+						@if ($_page-link) {
+							.page-link {
+								@include clay-link($_page-link);
+							}
 						}
 
-						.page-item:first-child .page-link,
-						.page-link-first {
-							@include clay-css(
-								map-get($media-breakpoint-down, page-link-first)
-							);
+						$_page-link-first: map-get(
+							$media-breakpoint-down,
+							page-link-first
+						);
+
+						@if ($_page-link-first) {
+							.page-item:first-child .page-link,
+							.page-link-first {
+								@include clay-css($_page-link-first);
+							}
 						}
 
-						.page-item:last-child .page-link,
-						.page-link-last {
-							@include clay-css(
-								map-get($media-breakpoint-down, page-link-last)
-							);
+						$_page-link-last: map-get(
+							$media-breakpoint-down,
+							page-link-last
+						);
+
+						@if ($_page-link-last) {
+							.page-item:last-child .page-link,
+							.page-link-last {
+								@include clay-css($_page-link-last);
+							}
 						}
 
-						.page-item {
-							&.active {
-								.page-link {
-									@include clay-link(
-										map-deep-get(
-											$media-breakpoint-down,
-											page-link,
-											active
-										)
-									);
+						@if ($_page-link) {
+							.page-item {
+								$_active: map-get($_page-link, active);
+
+								@if ($_active) {
+									&.active {
+										.page-link {
+											@include clay-link($_active);
+										}
+									}
 								}
-							}
 
-							&.disabled {
-								.page-link {
-									@include clay-link(
-										map-deep-get(
-											$media-breakpoint-down,
-											page-link,
-											disabled
-										)
-									);
+								$_disabled: map-get($_page-link, disabled);
+
+								@if ($_disabled) {
+									&.disabled {
+										.page-link {
+											@include clay-link($_disabled);
+										}
+									}
 								}
 							}
 						}
 
-						.pagination {
-							@include clay-pagination-variant(
-								map-get($media-breakpoint-down, pagination)
-							);
+						$_pagination: map-get(
+							$media-breakpoint-down,
+							pagination
+						);
+
+						@if ($_pagination) {
+							.pagination {
+								@include clay-pagination-variant($_pagination);
+							}
 						}
 
-						.pagination-items-per-page {
-							@include clay-pagination-items-per-page-variant(
-								map-get(
-									$media-breakpoint-down,
-									pagination-items-per-page
-								)
-							);
+						$_pagination-items-per-page: map-get(
+							$media-breakpoint-down,
+							pagination-items-per-page
+						);
+
+						@if ($_pagination-items-per-page) {
+							.pagination-items-per-page {
+								@include clay-pagination-items-per-page-variant(
+									$_pagination-items-per-page
+								);
+							}
 						}
 					}
 				}

package/src/scss/mixins/_panels.scss

@@ -308,83 +308,118 @@
 		);
 
 		@if ($enabled) {
-			@include clay-css($base);
+			@if (length($base) != 0) {
+				@include clay-css($base);
+			}
 
-			.panel-header {
-				@include clay-css($header);
+			@if (length($header) != 0) {
+				.panel-header {
+					@include clay-css($header);
 
-				@if (map-get($header-c-inner, enabled)) {
-					.c-inner {
-						@include clay-css($header-c-inner);
+					@if (map-get($header-c-inner, enabled)) {
+						.c-inner {
+							@include clay-css($header-c-inner);
+						}
 					}
-				}
 
-				&.collapsed {
-					@include clay-css($header-collapsed);
-				}
+					@if (length($header-collapsed) != 0) {
+						&.collapsed {
+							@include clay-css($header-collapsed);
+						}
+					}
 
-				&.panel-header-link {
-					@include clay-link($header-link);
-				}
+					@if (length($header-link) != 0) {
+						&.panel-header-link {
+							@include clay-link($header-link);
+						}
+					}
 
-				&.collapse-icon {
-					$_panel-header: setter(map-get($map, panel-header), ());
+					$_panel-header: map-get($map, panel-header);
 
-					@include clay-css(
-						map-get($_panel-header, '&.collapse-icon')
-					);
-				}
+					@if ($_panel-header) {
+						$_collapse-icon: map-get(
+							$_panel-header,
+							'&.collapse-icon'
+						);
 
-				&:not(.collapse-icon-middle) {
-					.collapse-icon-closed,
-					.collapse-icon-open {
-						@include clay-css($collapse-icon);
+						@if ($_collapse-icon) {
+							&.collapse-icon {
+								@include clay-css($_collapse-icon);
+							}
+						}
 					}
-				}
 
-				&.collapse-icon-middle {
-					$_collapse-icon-middle: setter(
-						map-get($map, collapse-icon-middle),
-						()
-					);
+					@if (length($collapse-icon) != 0) {
+						&:not(.collapse-icon-middle) {
+							.collapse-icon-closed,
+							.collapse-icon-open {
+								@include clay-css($collapse-icon);
+							}
+						}
+					}
 
-					@include clay-css($_collapse-icon-middle);
+					$_collapse-icon-middle: map-get($map, collapse-icon-middle);
 
-					.collapse-icon-closed,
-					.collapse-icon-open {
-						@include clay-css(
-							map-get($_collapse-icon-middle, collapse-icon)
-						);
+					@if ($_collapse-icon-middle) {
+						&.collapse-icon-middle {
+							@include clay-css($_collapse-icon-middle);
+
+							$_collapse-icon: map-get(
+								$_collapse-icon-middle,
+								collapse-icon
+							);
+
+							@if ($_collapse-icon) {
+								.collapse-icon-closed,
+								.collapse-icon-open {
+									@include clay-css($_collapse-icon);
+								}
+							}
+						}
 					}
-				}
 
-				.panel-group & {
-					+ .panel-collapse > .panel-body {
-						border-color: map-get($base, border-color);
+					$_border-color: map-get($base, border-color);
+
+					@if ($_border-color) {
+						.panel-group & {
+							+ .panel-collapse > .panel-body {
+								border-color: $_border-color;
+							}
+						}
 					}
 				}
 			}
 
-			.panel-title {
-				@include clay-css($title);
+			@if (length($title) != 0) {
+				.panel-title {
+					@include clay-css($title);
+				}
 			}
 
-			.panel-body {
-				@include clay-css($body);
+			@if (length($body) != 0) {
+				.panel-body {
+					@include clay-css($body);
+				}
 			}
 
-			.panel-footer {
-				@include clay-css($footer);
+			@if (length($footer) != 0) {
+				.panel-footer {
+					@include clay-css($footer);
+				}
 			}
 
 			// For Focus Box Shadow
 
-			@at-root {
-				.panel-group.panel-group-flush & {
-					.panel-header-link {
-						&,
-						&.collapsed {
-							border-radius: map-get($header-link, border-radius);
+			$_border-radius: map-get($header-link, border-radius);
+
+			@if ($_border-radius) {
+				@at-root {
+					.panel-group.panel-group-flush & {
+						.panel-header-link {
+							&,
+							&.collapsed {
+								border-radius: $_border-radius;
+							}
 						}
 					}
 				}