feat(@clayui/css): add table-head-bordered

liferay · Nov 22, 2023 · 9d721a4 · 9d721a4
1 parent 6888b59
commit 9d721a4
Show file tree

Hide file tree

Showing 5 changed files with 52 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
@@ -49,6 +49,10 @@ caption {
 	@include clay-table-variant($cadmin-c-table-bordered);
 }
 
+.table-head-bordered {
+	@include clay-table-variant($cadmin-c-table-head-bordered);
+}
+
 .table-borderless {
 	th,
 	td,

diff --git a/packages/clay-css/src/scss/cadmin/variables/_tables.scss b/packages/clay-css/src/scss/cadmin/variables/_tables.scss
@@ -560,6 +560,23 @@ $cadmin-table-dark-hover-color: $cadmin-table-dark-color !default;
 
 $cadmin-table-dark-accent-bg: rgba($cadmin-white, 0.05) !default;
 
+// .table-head-bordered
+
+$cadmin-c-table-head-bordered: () !default;
+$cadmin-c-table-head-bordered: map-deep-merge(
+	(
+		thead: (
+			table-cell: (
+				border-left: $cadmin-table-border-width solid $cadmin-table-border-color,
+				start: (
+					border-left-width: 0,
+				),
+			),
+		),
+	),
+	$cadmin-c-table-head-bordered
+);
+
 // .table-bordered
 
 $cadmin-table-bordered-border-width: $cadmin-table-border-width !default;

diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
@@ -49,6 +49,10 @@ caption {
 	@include clay-table-variant($c-table-bordered);
 }
 
+.table-head-bordered {
+	@include clay-table-variant($c-table-head-bordered);
+}
+
 .table-borderless {
 	th,
 	td,

diff --git a/packages/clay-css/src/scss/mixins/_tables.scss b/packages/clay-css/src/scss/mixins/_tables.scss
@@ -72,6 +72,16 @@
 						@include clay-link(map-deep-get($map, thead, th, href));
 					}
 				}
+
+				th:first-child,
+				td:first-child {
+					@include clay-css(map-get($map, thead, table-cell, start));
+				}
+
+				th:last-child,
+				td:last-child {
+					@include clay-css(map-get($map, thead, table-cell, end));
+				}
 			}
 
 			th,

diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
@@ -450,6 +450,23 @@ $c-td-table-focus: map-deep-merge(
 	$c-td-table-focus
 );
 
+// .table-head-bordered
+
+$c-table-head-bordered: () !default;
+$c-table-head-bordered: map-deep-merge(
+	(
+		thead: (
+			table-cell: (
+				border-left: $table-border-width solid $table-border-color,
+				start: (
+					border-left-width: 0,
+				),
+			),
+		),
+	),
+	$c-table-head-bordered
+);
+
 // .table-bordered
 
 $table-bordered-border-width: $table-border-width !default;