Merge pull request #83 from niaid/NDS-143

NDS-143: Tables have outside border and formatting is correct even for tables with incorrect syntax
niaid · Mar 1, 2023 · a92bbfd · a92bbfd
2 parents 1f0a472 + b8f1f67
commit a92bbfd
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 42 deletions.
diff --git a/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss b/src/_patterns/00-nds/01-atoms/tables/table-default/table-default.scss
@@ -1,32 +1,48 @@
 table {
-    width: 100%;
-    margin: $s-1 0;
-    border: $border-block;
-    border-collapse: collapse;
-    border-radius: 0;
-    border-spacing: 0px;
     background: $white;
+    border-collapse: separate;
+    border-spacing: 0;
+    border: $border-block;
+    margin: $s-1 0;
     overflow: hidden;
+    width: 100%;
+
+    // Apply a border to the right of all but the last column
+    th:not(:last-child),
+    td:not(:last-child) {
+        border-right: $border-block;
+    }
+
+    // Apply a border to the bottom of all but the last row
+    >thead>tr:not(:last-child)>th,
+    >thead>tr:not(:last-child)>td,
+    >tbody>tr:not(:last-child)>th,
+    >tbody>tr:not(:last-child)>td,
+    >tfoot>tr:not(:last-child)>th,
+    >tfoot>tr:not(:last-child)>td,
+    >tr:not(:last-child)>td,
+    >tr:not(:last-child)>th,
+    >thead:not(:last-child),
+    >tbody:not(:last-child),
+    >tfoot:not(:last-child) {
+        border-bottom: $border-block;
+    }
     caption {
-        @include font-size($font-size-heading-3);
-        color: $type-heading;
-        font-style: $font-style-heading-3;
-        font-weight: $font-weight-medium;
-        line-height: $line-height-heading;
-        margin-bottom: $s-1;
+        caption-side: bottom;
+        font-size: $s-1 - $s-2px;
+        line-height: $line-height-medium;
+        margin-top: $s-0-50;
+        font-style: italic;
         text-align: left;
     }
     thead {
         background-color: $color-theme-1-1-1;
-        border-collapse: separate;
-        border-color: inherit;
-        border-radius: 0 0 0 0;
         color: $white;
         display: table-header-group;
         font-weight: $font-weight-semibold;
         vertical-align: middle;
         th, td {
-            border: 0;
+            border: $s-1px solid $color-theme-1-1-1 !important;
             color: $white;
             font-weight: $font-weight-bold;
             a {
@@ -78,7 +94,7 @@ table {
         }
     }
     th, td {
-        border: $border-block;
+        // border: $border-block;
         color: $type-body;
         line-height: normal;
         padding: $s-1;
@@ -89,26 +105,14 @@ table {
         }
     }
     tr {
-        border-color: inherit;
         display: table-row;
         vertical-align: inherit;
-        &:last-child {
-            td {
-                border-bottom: 0;
-            }
-        }
     }
     tbody {
         th {
             font-weight: $font-weight-bold;
         }
     }
-    thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
-        border-radius: 0 0 0 0;
-    }
-    thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
-        border-radius: 0 0 0 0;
-    }
     &.collapsed {
         tbody {
             tr {
@@ -139,7 +143,6 @@ table {
                             transform: translateY(-50%);
                             height: $before-size;
                             width: $before-size;
-                            border-radius: 100%;
                             background: $type-heading;
                             color: $white;
                             @extend %fa-icon;

diff --git a/...atterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss b/...atterns/00-nds/02-molecules/components/component-process-list/component-process-list.scss
@@ -26,7 +26,7 @@
 }
 
 .component--process-list__item {
-    border-left: $s-0-50 solid $border-light-blue;
+    border-left: $s-0-50 solid transparentize($color-theme-1-1-1, 0.8);
     padding-bottom: $s-1-75;
     padding-left: $s-2;
 
@@ -50,7 +50,7 @@
         @include flex;
         background-color: #fff;
         border-radius: 50%;
-        border: $s-0-50 - $s-3px solid $niaid-blue;
+        border: $s-0-50 - $s-3px solid $color-theme-1-1-1;
         box-shadow: 0 0 0 $s-0-75 - $s-4px $grey-light;
         content: '';
         font-size: $s-1;

diff --git a/src/css/global/_variables.scss b/src/css/global/_variables.scss
@@ -61,7 +61,6 @@ $status-warning-light: #FFF9F2;
 
 /**** COLORS > MISC ****/
 $border-light: $grey-200;
-$border-light-blue: #c5d3e7;
 
 /**** COLORS > INPUT ****/
 $input-border: $grey-700;

diff --git a/src/css/global/theme-styles/_corners.scss b/src/css/global/theme-styles/_corners.scss
@@ -108,15 +108,6 @@
     }
     table {
         border-radius: $corner-radius;
-        thead {
-            border-radius: $corner-radius $corner-radius 0 0;
-        }
-        thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
-            border-radius: $corner-radius 0 0 0;
-        }
-        thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
-            border-radius: 0 0 0 $corner-radius;
-        }
     }
     .text-nds {
         &.text--badge,