fix(ui): Table - correct outline variation

relative-ci · Mar 3, 2022 · 82804d1 · 82804d1
1 parent 9e7af4b
commit 82804d1
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/packages/ui/src/ui/table/table.module.css b/packages/ui/src/ui/table/table.module.css
@@ -1,7 +1,7 @@
 .root {
   border-width: 0;
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
   empty-cells: show;
   background: var(--color-background);
 }
@@ -27,6 +27,10 @@
   font-weight: normal;
 }
 
+.root tbody tr:first-child .cell {
+  border-top: 0;
+}
+
 .root tbody .cell a {
   color: inherit;
   text-decoration: none;
@@ -58,12 +62,27 @@
 
 /* outline variation */
 .outline {
+  --table-radius: var(--radius-medium);
   border: 1px solid var(--color-outline);
-  border-width: 0 1px;
+  border-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child .cell:first-child,
+.outline tbody:first-child tr:first-child .cell:first-child {
+  border-top-left-radius: var(--table-radius);
+}
+
+.outline thead tr:first-child .cell:last-child,
+.outline tbody:first-child tr:first-child .cell:last-child {
+  border-top-right-radius: var(--table-radius);
+}
+
+.outline tbody:last-child tr:last-child .cell:first-child {
+  border-bottom-left-radius: var(--table-radius);
 }
 
-.outline thead tr:first-child .cell {
-  border-top-width: 1px;
+.outline tbody:last-child tr:last-child .cell:last-child {
+  border-bottom-right-radius: var(--table-radius);
 }
 
 .outline.empty {