Merge pull request #5869 from pat270/LPD-36088

fix(@clayui/css): LPD-36088 Table Striped hover states should work
liferay · Sep 13, 2024 · 2e68fad · 2e68fad
2 parents 3a1d8f5 + 18a5c48
commit 2e68fad
Show file tree

Hide file tree

Showing 2 changed files with 156 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_tables.scss b/packages/clay-css/src/scss/cadmin/components/_tables.scss
@@ -86,6 +86,24 @@ caption {
 			}
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$cadmin-table-striped-order}):hover {
+			&:not(.table-active):not(.table-disabled):not(.table-divider) {
+				&,
+				td,
+				th {
+					background-color: map-deep-get(
+						$cadmin-c-table-hover,
+						tbody,
+						tr,
+						hover,
+						background-color
+					);
+				}
+			}
+		}
+	}
 }
 
 // Table Hover
@@ -190,6 +208,18 @@ td.table-focus {
 				}
 			}
 		}
+
+		&.table-hover {
+			tbody tr:nth-of-type(#{$cadmin-table-striped-order}):hover {
+				&:not(.table-active):not(.table-disabled):not(.table-divider) {
+					&,
+					td,
+					th {
+						background-color: $cadmin-table-dark-hover-bg;
+					}
+				}
+			}
+		}
 	}
 
 	&.table-hover {
@@ -276,6 +306,24 @@ td.table-focus {
 			}
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$cadmin-table-striped-order}):hover {
+			&:not(.table-active):not(.table-disabled):not(.table-divider) {
+				&,
+				th,
+				td {
+					background-color: map-deep-get(
+						$cadmin-c-table-list-table-hover,
+						tbody,
+						tr,
+						hover,
+						background-color
+					);
+				}
+			}
+		}
+	}
 }
 
 // Table List Hover
@@ -519,6 +567,21 @@ td.table-focus {
 			background-color: $cadmin-table-quick-action-menu-accent-active-bg;
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$cadmin-table-striped-order}):hover {
+			.quick-action-menu {
+				background-color: map-deep-get(
+					$cadmin-c-table-hover,
+					tbody,
+					tr,
+					hover,
+					quick-action-menu,
+					background-color
+				);
+			}
+		}
+	}
 }
 
 .table-list.table-striped {
@@ -533,6 +596,21 @@ td.table-focus {
 			background-color: $cadmin-table-list-quick-action-menu-accent-active-bg;
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$cadmin-table-striped-order}):hover {
+			.quick-action-menu {
+				background-color: map-deep-get(
+					$cadmin-c-table-list-table-hover,
+					tbody,
+					tr,
+					hover,
+					quick-action-menu,
+					background-color
+				);
+			}
+		}
+	}
 }
 
 // Table Column Utilities

diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -86,6 +86,24 @@ caption {
 			}
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$table-striped-order}):hover {
+			&:not(.table-active):not(.table-disabled):not(.table-divider) {
+				&,
+				td,
+				th {
+					background-color: map-deep-get(
+						$c-table-hover,
+						tbody,
+						tr,
+						hover,
+						background-color
+					);
+				}
+			}
+		}
+	}
 }
 
 // Table Hover
@@ -240,6 +258,18 @@ td.table-focus {
 				}
 			}
 		}
+
+		&.table-hover {
+			tbody tr:nth-of-type(#{$table-striped-order}):hover {
+				&:not(.table-active):not(.table-disabled):not(.table-divider) {
+					&,
+					td,
+					th {
+						background-color: $table-dark-hover-bg;
+					}
+				}
+			}
+		}
 	}
 
 	&.table-hover {
@@ -319,6 +349,24 @@ td.table-focus {
 			}
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$table-striped-order}):hover {
+			&:not(.table-active):not(.table-disabled):not(.table-divider) {
+				&,
+				th,
+				td {
+					background-color: map-deep-get(
+						$c-table-list-table-hover,
+						tbody,
+						tr,
+						hover,
+						background-color
+					);
+				}
+			}
+		}
+	}
 }
 
 // Table List Hover
@@ -564,6 +612,21 @@ td.table-focus {
 			background-color: $table-quick-action-menu-accent-active-bg;
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$table-striped-order}):hover {
+			.quick-action-menu {
+				background-color: map-deep-get(
+					$c-table-hover,
+					tbody,
+					tr,
+					hover,
+					quick-action-menu,
+					background-color
+				);
+			}
+		}
+	}
 }
 
 .table-list.table-striped {
@@ -578,6 +641,21 @@ td.table-focus {
 			background-color: $table-list-quick-action-menu-accent-active-bg;
 		}
 	}
+
+	&.table-hover {
+		tbody tr:nth-of-type(#{$table-striped-order}):hover {
+			.quick-action-menu {
+				background-color: map-deep-get(
+					$c-table-list-table-hover,
+					tbody,
+					tr,
+					hover,
+					quick-action-menu,
+					background-color
+				);
+			}
+		}
+	}
 }
 
 // Table Column Utilities