@clayui/css 3.133.0 → 3.135.0

package/src/scss/mixins/_tables.scss

@@ -55,403 +55,598 @@
 		$enabled: setter(map-get($map, enabled), true);
 
 		@if ($enabled) {
-			@include clay-css($map);
+			@if (length($map) != 0) {
+				@include clay-css($map);
+			}
 
-			thead {
-				$_thead: setter(map-get($map, thead), ());
+			$_thead: map-get($map, thead);
 
-				@include clay-css($_thead);
+			@if ($_thead) {
+				thead {
+					@include clay-css($_thead);
 
-				th,
-				td {
-					$_thead-table-cell: setter(
-						map-get($_thead, table-cell),
-						()
-					);
+					$_thead-table-cell: map-get($_thead, table-cell);
 
-					@include clay-css($_thead-table-cell);
+					@if ($_thead-table-cell) {
+						th,
+						td {
+							@include clay-css($_thead-table-cell);
 
-					&:hover {
-						@include clay-css(map-get($_thead-table-cell, hover));
-					}
+							$_hover: map-get($_thead-table-cell, hover);
 
-					&:first-child {
-						@include clay-css(
-							map-get($_thead-table-cell, table-column-start)
-						);
-					}
+							@if ($_hover) {
+								&:hover {
+									@include clay-css($_hover);
+								}
+							}
 
-					&:last-child {
-						@include clay-css(
-							map-get($_thead-table-cell, table-column-end)
-						);
-					}
+							$_first-child: map-get(
+								$_thead-table-cell,
+								table-column-start
+							);
 
-					.component-action {
-						@include clay-css(
-							map-get($_thead-table-cell, component-action)
-						);
-					}
-				}
+							@if ($_first-child) {
+								&:first-child {
+									@include clay-css($_first-child);
+								}
+							}
 
-				th {
-					@include clay-css(map-deep-get($map, thead, th));
+							$_last-child: map-get(
+								$_thead-table-cell,
+								table-column-end
+							);
 
-					a[href] {
-						@include clay-link(map-deep-get($map, thead, th, href));
+							@if ($_last-child) {
+								&:last-child {
+									@include clay-css($_last-child);
+								}
+							}
+
+							$_component-action: map-get(
+								$_thead-table-cell,
+								component-action
+							);
+
+							@if ($_component-action) {
+								.component-action {
+									@include clay-css($_component-action);
+								}
+							}
+						}
 					}
-				}
 
-				.autofit-col {
-					$_autofit-col: setter(map-get($_thead, autofit-col), ());
+					$_th: map-get($_thead, th);
 
-					@include clay-css($_autofit-col);
+					@if ($_th) {
+						th {
+							@include clay-css($_th);
 
-					&:first-child {
-						$_first-child: setter(
-							map-get($_autofit-col, first-child),
-							()
-						);
+							$_href: map-get($_th, href);
 
-						@include clay-css($_first-child);
+							@if ($_href) {
+								a[href] {
+									@include clay-link($_href);
+								}
+							}
+						}
 					}
 
-					&:last-child {
-						$_last-child: setter(
-							map-get($_autofit-col, last-child),
-							()
-						);
+					$_autofit-col: map-get($_thead, autofit-col);
+
+					@if ($_autofit-col) {
+						.autofit-col {
+							@include clay-css($_autofit-col);
+
+							$_first-child: map-get($_autofit-col, first-child);
+
+							@if ($_first-child) {
+								&:first-child {
+									@include clay-css($_first-child);
+								}
+							}
 
-						@include clay-css($_last-child);
+							$_last-child: map-get($_autofit-col, last-child);
+
+							@if ($_last-child) {
+								&:last-child {
+									@include clay-css($_last-child);
+								}
+							}
+						}
 					}
 				}
 			}
 
-			th,
-			td {
-				@include clay-css(map-get($map, table-cell));
+			$_table-cell: map-get($map, table-cell);
+
+			@if ($_table-cell) {
+				th,
+				td {
+					@include clay-css($_table-cell);
 
-				a[href] {
-					@include clay-link(map-deep-get($map, table-cell, href));
+					$_href: map-get($_table-cell, href);
+
+					@if ($_href) {
+						a[href] {
+							@include clay-link($_href);
+						}
+					}
 				}
 			}
 
-			th:first-child,
-			td:first-child,
-			.table-column-start {
-				@include clay-css(map-get($map, table-column-start));
+			$_table-column-start: map-get($map, table-column-start);
+
+			@if ($_table-column-start) {
+				th:first-child,
+				td:first-child,
+				.table-column-start {
+					@include clay-css($_table-column-start);
+				}
 			}
 
-			th:last-child,
-			td:last-child,
-			.table-column-end {
-				@include clay-css(map-get($map, table-column-end));
+			$_table-column-end: map-get($map, table-column-end);
+
+			@if ($_table-column-end) {
+				th:last-child,
+				td:last-child,
+				.table-column-end {
+					@include clay-css($_table-column-end);
+				}
 			}
 
-			th {
-				@include clay-css(map-get($map, th));
+			$_th: map-get($map, th);
+
+			@if ($_th) {
+				th {
+					@include clay-css($_th);
+				}
 			}
 
-			td {
-				@include clay-css(map-get($map, td));
+			$_td: map-get($map, td);
+
+			@if ($_td) {
+				td {
+					@include clay-css($_td);
+				}
 			}
 
-			thead:first-child,
-			tbody:first-child,
-			tfoot:first-child,
-			caption:first-child + thead {
-				tr:first-child {
-					@include clay-css(map-get($map, table-row-start));
+			$_table-row-start: map-get($map, table-row-start);
 
-					th,
-					td {
-						@include clay-css(
-							map-deep-get($map, table-row-start, table-cell)
-						);
+			@if ($_table-row-start) {
+				thead:first-child,
+				tbody:first-child,
+				tfoot:first-child,
+				caption:first-child + thead {
+					tr:first-child {
+						@include clay-css($_table-row-start);
 
-						&:first-child {
-							@include clay-css(
-								map-deep-get(
-									$map,
-									table-row-start,
+						$_table-cell: map-get($_table-row-start, table-cell);
+
+						@if ($_table-cell) {
+							th,
+							td {
+								@include clay-css($_table-cell);
+
+								$_table-cell-start: map-get(
+									$_table-row-start,
 									table-cell-start
-								)
-							);
-						}
+								);
 
-						&:last-child {
-							@include clay-css(
-								map-deep-get(
-									$map,
-									table-row-start,
+								@if ($_table-cell-start) {
+									&:first-child {
+										@include clay-css($_table-cell-start);
+									}
+								}
+
+								$_table-cell-end: map-get(
+									$_table-row-start,
 									table-cell-end
-								)
-							);
+								);
+
+								@if ($_table-cell-end) {
+									&:last-child {
+										@include clay-css($_table-cell-end);
+									}
+								}
+							}
 						}
 					}
 				}
-			}
 
-			.table-row-start {
-				@include clay-css(map-get($map, table-row-start));
+				.table-row-start {
+					@include clay-css($_table-row-start);
 
-				.table-cell-start {
-					@include clay-css(
-						map-deep-get($map, table-row-start, table-cell-start)
+					$_table-cell-start: map-get(
+						$_table-row-start,
+						table-cell-start
 					);
-				}
 
-				.table-cell-end {
-					@include clay-css(
-						map-deep-get($map, table-row-start, table-cell-end)
+					@if ($_table-cell-start) {
+						.table-cell-start {
+							@include clay-css($_table-cell-start);
+						}
+					}
+
+					$_table-cell-end: map-get(
+						$_table-row-start,
+						table-cell-end
 					);
+
+					@if ($_table-cell-end) {
+						.table-cell-end {
+							@include clay-css($_table-cell-end);
+						}
+					}
 				}
 			}
 
-			thead:last-child,
-			tbody:last-child,
-			tfoot:last-child {
-				tr:last-child {
-					@include clay-css(map-get($map, table-row-end));
+			$_table-row-end: map-get($map, table-row-end);
 
-					th,
-					td {
-						&:first-child {
-							@include clay-css(
-								map-deep-get(
-									$map,
-									table-row-end,
-									table-cell-start
-								)
+			@if ($_table-row-end) {
+				thead:last-child,
+				tbody:last-child,
+				tfoot:last-child {
+					tr:last-child {
+						@include clay-css($_table-row-end);
+
+						th,
+						td {
+							$_table-cell-start: map-get(
+								$_table-row-end,
+								table-cell-start
 							);
-						}
 
-						&:last-child {
-							@include clay-css(
-								map-deep-get(
-									$map,
-									table-row-end,
-									table-cell-end
-								)
+							@if ($_table-cell-start) {
+								&:first-child {
+									@include clay-css($_table-cell-start);
+								}
+							}
+
+							$_table-cell-end: map-get(
+								$_table-row-end,
+								table-cell-end
 							);
+
+							@if ($_table-cell-end) {
+								&:last-child {
+									@include clay-css($_table-cell-end);
+								}
+							}
 						}
 					}
 				}
-			}
 
-			.table-row-end {
-				@include clay-css(map-get($map, table-row-end));
+				.table-row-end {
+					@include clay-css($_table-row-end);
 
-				.table-cell-start {
-					@include clay-css(
-						map-deep-get($map, table-row-end, table-cell-start)
+					$_table-cell-start: map-get(
+						$_table-row-end,
+						table-cell-start
 					);
-				}
 
-				.table-cell-end {
-					@include clay-css(
-						map-deep-get($map, table-row-end, table-cell-end)
-					);
+					@if ($_table-cell-start) {
+						.table-cell-start {
+							@include clay-css($_table-cell-start);
+						}
+					}
+
+					$_table-cell-end: map-get($_table-row-end, table-cell-end);
+
+					@if ($_table-cell-end) {
+						.table-cell-end {
+							@include clay-css($_table-cell-end);
+						}
+					}
 				}
 			}
 
-			tbody {
-				@include clay-css(map-get($map, tbody));
+			$_tbody: map-get($map, tbody);
+
+			@if ($_tbody) {
+				tbody {
+					@include clay-css($_tbody);
+
+					$_tr: map-get($_tbody, tr);
+
+					@if ($_tr) {
+						tr {
+							@include clay-css($_tr);
+
+							$_hover: map-get($_tr, hover);
+
+							@if ($_hover) {
+								&:hover {
+									@include clay-css($_hover);
 
-				tr {
-					@include clay-css(map-deep-get($map, tbody, tr));
+									$_table-cell: map-get($_hover, table-cell);
 
-					&:hover {
-						@include clay-css(map-deep-get($map, tbody, tr, hover));
+									@if ($_table-cell) {
+										th,
+										td {
+											@include clay-css($_table-cell);
+										}
+									}
 
+									$_quick-action-menu: map-get(
+										$_hover,
+										quick-action-menu
+									);
+
+									@if ($_quick-action-menu) {
+										.quick-action-menu {
+											@include clay-css(
+												$_quick-action-menu
+											);
+										}
+									}
+								}
+							}
+						}
+					}
+
+					$_table-cell: map-get($_tbody, table-cell);
+
+					@if ($_table-cell) {
 						th,
 						td {
-							@include clay-css(
-								map-deep-get($map, tbody, tr, hover, table-cell)
-							);
+							@include clay-css($_table-cell);
 						}
+					}
 
-						.quick-action-menu {
-							@include clay-css(
-								map-deep-get(
-									$map,
-									tbody,
-									tr,
-									hover,
-									quick-action-menu
-								)
-							);
+					$_tbody: map-get($_tbody, tbody);
+
+					@if ($_tbody) {
+						+ tbody {
+							@include clay-css($_tbody);
 						}
 					}
 				}
+			}
 
-				th,
-				td {
-					@include clay-css(map-deep-get($map, tbody, table-cell));
-				}
+			$_tfoot: map-get($map, tfoot);
 
-				+ tbody {
-					@include clay-css(map-deep-get($map, tbody, tbody));
+			@if ($_tfoot) {
+				tfoot {
+					@include clay-css($_tfoot);
+
+					$_table-cell: map-get($_tfoot, table-cell);
+
+					@if ($_table-cell) {
+						th,
+						td {
+							@include clay-css($_table-cell);
+						}
+					}
 				}
 			}
 
-			tfoot {
-				@include clay-css(map-get($map, tfoot));
+			$_caption: map-get($map, caption);
 
-				th,
-				td {
-					@include clay-css(map-deep-get($map, tfoot, table-cell));
+			@if ($_caption) {
+				caption {
+					@include clay-css($_caption);
 				}
 			}
 
-			caption {
-				@include clay-css(map-get($map, caption));
-			}
+			$_table-divider: map-get($map, table-divider);
 
-			.table-divider {
-				th,
-				td {
-					@include clay-css(
-						map-deep-get($map, table-divider, table-cell)
-					);
+			@if ($_table-divider) {
+				.table-divider {
+					$_table-cell: map-get($_table-divider, table-cell);
+
+					@if ($_table-cell) {
+						th,
+						td {
+							@include clay-css($_table-cell);
+						}
+					}
 				}
 			}
 
-			.table-active {
-				@include clay-css(map-get($map, table-active));
+			$_table-active: map-get($map, table-active);
 
-				&:hover {
-					@include clay-css(map-deep-get($map, table-active, hover));
+			@if ($_table-active) {
+				.table-active {
+					@include clay-css($_table-active);
 
-					th,
-					td {
-						@include clay-css(
-							map-deep-get($map, table-active, hover, table-cell)
-						);
-					}
+					$_hover: map-get($_table-active, hover);
 
-					.quick-action-menu {
-						@include clay-css(
-							map-deep-get(
-								$map,
-								table-active,
-								hover,
+					@if ($_hover) {
+						&:hover {
+							@include clay-css($_hover);
+
+							$_table-cell: map-get($_hover, table-cell);
+
+							@if ($_table-cell) {
+								th,
+								td {
+									@include clay-css($_table-cell);
+								}
+							}
+
+							$_quick-action-menu: map-get(
+								$_hover,
 								quick-action-menu
-							)
-						);
+							);
+
+							@if ($_quick-action-menu) {
+								.quick-action-menu {
+									@include clay-css($_quick-action-menu);
+								}
+							}
+						}
 					}
-				}
 
-				th,
-				td {
-					@include clay-css(
-						map-deep-get($map, table-active, table-cell)
-					);
-				}
+					$_table-cell: map-get($_table-active, table-cell);
 
-				.quick-action-menu {
-					@include clay-css(
-						map-deep-get($map, table-active, quick-action-menu)
+					@if ($_table-cell) {
+						th,
+						td {
+							@include clay-css($_table-cell);
+						}
+					}
+
+					$_quick-action-menu: map-get(
+						$_table-active,
+						quick-action-menu
 					);
+
+					@if ($_quick-action-menu) {
+						.quick-action-menu {
+							@include clay-css($_quick-action-menu);
+						}
+					}
 				}
 			}
 
-			.table-disabled {
-				@include clay-css(map-get($map, table-disabled));
+			$_table-disabled: map-get($map, table-disabled);
 
-				&:hover {
-					@include clay-css(
-						map-deep-get($map, table-disabled, hover)
-					);
+			@if ($_table-disabled) {
+				.table-disabled {
+					@include clay-css($_table-disabled);
+
+					$_hover: map-get($_table-disabled, hover);
+
+					@if ($_hover) {
+						&:hover {
+							@include clay-css($_hover);
+
+							$_table-cell: map-get($_hover, table-cell);
 
-					th,
-					td {
-						@include clay-css(
-							map-deep-get(
-								$map,
-								table-disabled,
-								hover,
-								table-cell
-							)
-						);
+							@if ($_table-cell) {
+								th,
+								td {
+									@include clay-css($_table-cell);
+								}
+							}
+						}
 					}
-				}
 
-				th,
-				td {
-					@include clay-css(
-						map-deep-get($map, table-disabled, table-cell)
-					);
+					$_table-cell: map-get($_table-disabled, table-cell);
+
+					@if ($_table-cell) {
+						th,
+						td {
+							@include clay-css($_table-cell);
 
-					a[href] {
-						@include clay-link(
-							map-deep-get($map, table-disabled, table-cell, href)
-						);
+							$_href: map-get($_table-cell, href);
+
+							@if ($_href) {
+								a[href] {
+									@include clay-link($_href);
+								}
+							}
+						}
 					}
-				}
 
-				.table-title {
-					@include clay-text-typography(
-						map-deep-get($map, table-disabled, table-title)
-					);
-				}
+					$_table-title: map-get($_table-disabled, table-title);
 
-				.table-list-title {
-					@include clay-text-typography(
-						map-deep-get($map, table-disabled, table-list-title)
+					@if ($_table-title) {
+						.table-title {
+							@include clay-text-typography($_table-title);
+						}
+					}
+
+					$_table-list-title: map-get(
+						$_table-disabled,
+						table-list-title
 					);
+
+					@if ($_table-list-title) {
+						.table-list-title {
+							@include clay-text-typography($_table-list-title);
+						}
+					}
 				}
 			}
 
-			.autofit-col {
-				@include clay-css(map-get($map, autofit-col));
+			$_autofit-col: map-get($map, autofit-col);
 
-				&:first-child {
-					@include clay-css(
-						map-deep-get($map, autofit-col, first-child)
-					);
-				}
+			@if ($_autofit-col) {
+				.autofit-col {
+					@include clay-css($_autofit-col);
 
-				&:last-child {
-					@include clay-css(
-						map-deep-get($map, autofit-col, last-child)
-					);
+					$_first-child: map-get($_autofit-col, first-child);
+
+					@if ($_first-child) {
+						&:first-child {
+							@include clay-css($_first-child);
+						}
+					}
+
+					$_last-child: map-get($_autofit-col, last-child);
+
+					@if ($_last-child) {
+						&:last-child {
+							@include clay-css($_last-child);
+						}
+					}
 				}
 			}
 
-			.autofit-col-checkbox {
-				@include clay-css(map-get($map, autofit-col-checkbox));
+			$_autofit-col-checkbox: map-get($map, autofit-col-checkbox);
+
+			@if ($_autofit-col-checkbox) {
+				.autofit-col-checkbox {
+					@include clay-css($_autofit-col-checkbox);
+				}
 			}
 
-			.autofit-col-icon {
-				@include clay-css(map-get($map, autofit-col-icon));
+			$_autofit-col-icon: map-get($map, autofit-col-icon);
+
+			@if ($_autofit-col-icon) {
+				.autofit-col-icon {
+					@include clay-css($_autofit-col-icon);
+				}
 			}
 
-			.autofit-col-toggle {
-				@include clay-css(map-get($map, autofit-col-toggle));
+			$_autofit-col-toggle: map-get($map, autofit-col-toggle);
+
+			@if ($_autofit-col-toggle) {
+				.autofit-col-toggle {
+					@include clay-css($_autofit-col-toggle);
+				}
 			}
 
-			.component-action {
-				@include clay-link(map-get($map, component-action));
+			$_component-action: map-get($map, component-action);
+
+			@if ($_component-action) {
+				.component-action {
+					@include clay-link($_component-action);
+				}
 			}
 
-			.component-drag {
-				@include clay-link(map-get($map, component-drag));
+			$_component-drag: map-get($map, component-drag);
+
+			@if ($_component-drag) {
+				.component-drag {
+					@include clay-link($_component-drag);
+				}
 			}
 
-			.component-toggle {
-				@include clay-link(map-get($map, component-toggle));
+			$_component-toggle: map-get($map, component-toggle);
+
+			@if ($_component-toggle) {
+				.component-toggle {
+					@include clay-link($_component-toggle);
+				}
 			}
 
-			.custom-control,
-			.form-check {
-				@include clay-custom-control-variant(
-					map-get($map, custom-control)
-				);
+			$_custom-control: map-get($map, custom-control);
+
+			@if ($_custom-control) {
+				.custom-control,
+				.form-check {
+					@include clay-custom-control-variant($_custom-control);
+				}
 			}
 
-			.quick-action-menu {
-				@include clay-css(map-get($map, quick-action-menu));
+			$_quick-action-menu: map-get($map, quick-action-menu);
+
+			@if ($_quick-action-menu) {
+				.quick-action-menu {
+					@include clay-css($_quick-action-menu);
+				}
 			}
 		}
 	}
@@ -468,46 +663,62 @@
 
 @mixin clay-table-drag-variant($map) {
 	@if (type-of($map) == 'map') {
-		$cell: setter(map-get($map, cell), ());
-
-		$c-drag: setter(map-get($map, c-drag), ());
-
-		$c-dragging-before: setter(map-get($map, c-dragging-before), ());
-
-		$c-dragging-after: setter(map-get($map, c-dragging-after), ());
+		@if (length($map) != 0) {
+			@include clay-css($map);
+		}
 
-		$c-droppable-before: setter(map-get($map, c-droppable-before), ());
+		$_cell: map-get($map, cell);
 
-		$c-droppable-after: setter(map-get($map, c-droppable-after), ());
+		@if ($_cell) {
+			th,
+			td {
+				@include clay-css($_cell);
+			}
+		}
 
-		@include clay-css($map);
+		$_c-drag: map-get($map, c-drag);
 
-		th,
-		td {
-			@include clay-css($cell);
+		@if ($_c-drag) {
+			.c-drag {
+				@include clay-css($_c-drag);
+			}
 		}
 
-		.c-drag {
-			@include clay-css($c-drag);
-		}
+		$_c-dragging-after: map-get($map, c-dragging-after);
+		$_c-dragging-before: map-get($map, c-dragging-before);
 
-		.c-dragging {
-			&::before {
-				@include clay-css($c-dragging-before);
-			}
+		@if ($_c-dragging-after or $_c-dragging-before) {
+			.c-dragging {
+				@if ($_c-dragging-before) {
+					&::before {
+						@include clay-css($_c-dragging-before);
+					}
+				}
 
-			&::after {
-				@include clay-css($c-dragging-after);
+				@if ($_c-dragging-after) {
+					&::after {
+						@include clay-css($_c-dragging-after);
+					}
+				}
 			}
 		}
 
-		.c-droppable {
-			&::before {
-				@include clay-css($c-droppable-before);
-			}
+		$_c-droppable-after: map-get($map, c-droppable-after);
+		$_c-droppable-before: map-get($map, c-droppable-before);
 
-			&::after {
-				@include clay-css($c-droppable-after);
+		@if ($_c-droppable-after or $_c-droppable-before) {
+			.c-droppable {
+				@if ($_c-droppable-before) {
+					&::before {
+						@include clay-css($_c-droppable-before);
+					}
+				}
+
+				@if ($_c-droppable-after) {
+					&::after {
+						@include clay-css($_c-droppable-after);
+					}
+				}
 			}
 		}
 	}
@@ -523,25 +734,33 @@
 
 @mixin clay-table-clone-variant($map) {
 	@if (type-of($map) == 'map') {
-		$before: setter(map-get($map, before), ());
+		@if (length($map) != 0) {
+			@include clay-css($map);
+		}
 
-		$after: setter(map-get($map, after), ());
+		$_before: map-get($map, before);
 
-		$cell: setter(map-get($map, cell), ());
+		@if ($_before) {
+			&::before {
+				@include clay-css($_before);
+			}
+		}
 
-		@include clay-css($map);
+		$_after: map-get($map, after);
 
-		&::before {
-			@include clay-css($before);
+		@if ($_after) {
+			&::after {
+				@include clay-css($_after);
+			}
 		}
 
-		&::after {
-			@include clay-css($after);
-		}
+		$_cell: map-get($map, cell);
 
-		thead th,
-		tbody td {
-			@include clay-css($cell);
+		@if ($_cell) {
+			thead th,
+			tbody td {
+				@include clay-css($_cell);
+			}
 		}
 	}
 }