fix(@clayui.com): add a sass function to fix table border-radius issue

liferay · Mar 10, 2022 · 8fe4b05 · 8fe4b05
1 parent 60eaf7a
commit 8fe4b05
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -37,6 +37,9 @@ caption {
 	thead {
 		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
 
+		border-top-left-radius: clay-enable-rounded(table-border-radius());
+		border-top-right-radius: clay-enable-rounded(table-border-radius());
+
 		@include clay-css($c-table-thead);
 
 		td,
@@ -96,6 +99,9 @@ caption {
 	tbody {
 		// Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
 
+		border-bottom-left-radius: clay-enable-rounded(table-border-radius());
+		border-bottom-right-radius: clay-enable-rounded(table-border-radius());
+
 		@include clay-css($c-table-tbody);
 
 		td,
@@ -424,15 +430,15 @@ caption {
 			td:first-child,
 			.table-cell-start {
 				border-top-left-radius: clay-enable-rounded(
-					$table-list-border-radius
+					table-border-radius()
 				);
 			}
 
 			th:last-child,
 			td:last-child,
 			.table-cell-start {
 				border-top-right-radius: clay-enable-rounded(
-					$table-list-border-radius
+					table-border-radius()
 				);
 			}
 		}
@@ -456,15 +462,15 @@ caption {
 				td:first-child,
 				.table-cell-start {
 					border-bottom-left-radius: clay-enable-rounded(
-						$table-list-border-radius
+						table-border-radius()
 					);
 				}
 
 				th:last-child,
 				td:last-child,
 				.table-cell-end {
 					border-bottom-right-radius: clay-enable-rounded(
-						$table-list-border-radius
+						table-border-radius()
 					);
 				}
 			}

diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
@@ -246,6 +246,12 @@ $table-list-border-y-width: 0.0625rem !default;
 
 $table-list-border-width: $table-list-border-y-width $table-list-border-x-width !default;
 
+@function table-border-radius() {
+	@return calc(
+		#{$table-list-border-radius} - min(#{$table-list-border-x-width}, #{$table-list-border-y-width})
+	);
+}
+
 $table-list-border-radius: $border-radius !default;
 $table-list-color: null !default;
 $table-list-font-size: null !default;