Merge pull request #566 from GSA/IAEMOD-3525

Fix NGX-USWDS table appearance when sam-styles applied

Author: cwolf10

src/stylesheets/components/_table.scss

@@ -161,96 +161,103 @@ $sds-table-border: "1px";
       }
     }
   }
-  tr{
-    height: 3rem;
-  }
-  &--compact{
-    tr{
-      height: 100%;
+  @include at-media("tablet") {
+    tr {
+      height: 3rem;
     }
-  }
 
-  &:not(.usa-table--borderless):not(.sds-tree-table) {
-    thead{
-      th,td {
-        /**
-        Overrides remaining borders to ensure correct color and width.
-        Must include :not(.mat-header-cell) in order to prevent a 2 px border from forming when sds-table extends usa-table
-        */
-        &:first-child:not(.mat-header-cell){
-          @include u-border-left('base-light', $sds-table-border); 
-        }
-        &:last-child:not(.mat-header-cell){
-          @include u-border-right('base-light', $sds-table-border); 
-        }
-        &:not(.mat-header-cell){
-          @include u-border-top('base-light', $sds-table-border);
-        }
+    &--compact {
+      tr {
+        height: 100%;
       }
     }
-    tbody{
-      tr{
-        &:last-child{
-          td:not(.mat-cell) {
-            @include u-border-bottom('base-light', $sds-table-border);
+  }
+
+  &:not(.usa-table--borderless):not(.sds-tree-table) {
+    @include at-media("tablet") {
+      thead{
+        th,td {
+          /**
+          Overrides remaining borders to ensure correct color and width.
+          Must include :not(.mat-header-cell) in order to prevent a 2 px border from forming when sds-table extends usa-table
+          */
+          &:first-child:not(.mat-header-cell){
+            @include u-border-left('base-light', $sds-table-border); 
           }
-        }
-        th,td{
-          &:first-child:not(.mat-cell){
-            @include u-border-left('base-light', $sds-table-border);
+          &:last-child:not(.mat-header-cell){
+            @include u-border-right('base-light', $sds-table-border); 
           }
-          &:last-child:not(.mat-cell){
-            @include u-border-right('base-light', $sds-table-border);
+          &:not(.mat-header-cell){
+            @include u-border-top('base-light', $sds-table-border);
           }
         }
       }
-    }
-  }
-  
-  thead {
-    th, td {
-      /**
-        Removes internal borders so that only borders on the outside edges of header remain
-      */
-      &:not(:first-child){
-        border-left: 0px;
-      }
-      &:not(:last-child){
-        border-right: 0px;
-      }
-      &:not(.mat-header-cell){
-        @include u-border-bottom('base-light', $sds-table-border);
+      tbody{
+        tr{
+          &:last-child{
+            td:not(.mat-cell) {
+              @include u-border-bottom('base-light', $sds-table-border);
+            }
+          }
+          th,td{
+            &:first-child:not(.mat-cell){
+              @include u-border-left('base-light', $sds-table-border);
+            }
+            &:last-child:not(.mat-cell){
+              @include u-border-right('base-light', $sds-table-border);
+            }
+          }
+        }
       }
-      padding-bottom: 0.5rem;
-      padding-top: 0.5rem;
-      padding-left: 1.5rem;
-      padding-right: 1rem;
-      background-color: color($theme-table-header-background-color);
-      
     }
   }
-  tbody {
-    tr{
+  @include at-media("tablet") {
+    thead {
       th, td {
+        /**
+          Removes internal borders so that only borders on the outside edges of header remain
+        */
+        &:not(:first-child){
+          border-left: 0px;
+        }
+        &:not(:last-child){
+          border-right: 0px;
+        }
+        &:not(.mat-header-cell){
+          @include u-border-bottom('base-light', $sds-table-border);
+        }
         padding-bottom: 0.5rem;
         padding-top: 0.5rem;
         padding-left: 1.5rem;
         padding-right: 1rem;
-
-        /**
-        Removing internal horizontal borders from rows that divide the body into rows
-        */
-        border-bottom: 0px;
-        border-top: 0px;
-
-        /**
-        Removing internal vertical borders from cells that divide the rows into columns
-        */
-        border-left: 0px;
-        border-right: 0px;
+        background-color: color($theme-table-header-background-color);
+        
+      }
+    }
+    tbody {
+      tr{
+        th, td {
+          padding-bottom: 0.5rem;
+          padding-top: 0.5rem;
+          padding-left: 1.5rem;
+          padding-right: 1rem;
+  
+          /**
+          Removing internal horizontal borders from rows that divide the body into rows
+          */
+          border-bottom: 0px;
+          border-top: 0px;
+  
+          /**
+          Removing internal vertical borders from cells that divide the rows into columns
+          */
+          border-left: 0px;
+          border-right: 0px;
+        }
       }
     }
   }
+  
   &--striped {
     tbody {
       tr:nth-child(even) {
@@ -273,4 +280,23 @@ $sds-table-border: "1px";
       background-color: color($theme-table-header-background-color);
     }
   }
+  &--stacked,
+  &--stacked-header {
+    @include at-media-max("mobile-lg") {
+      td:not(:first-child) {
+        border-top-width: 0px;
+      }
+    }
+  }
+  &--stacked-header {
+    @include at-media-max("mobile-lg") {
+      tr{
+        td{
+          &:first-child{
+            padding-left: 0.75rem;
+          }
+        }
+      }
+    }
+  }
 }