Merge pull request #498 from GSA/tree-table

Add css for tree-table

Author: Bibek-Regmi

src/stylesheets/components/_index.scss

@@ -31,6 +31,7 @@
 @import 'toolbar';
 @import 'toasts';
 @import 'toolbar';
+@import 'treetable';
 @import 'searchlayout';
 @import 'icon';
 @import 'load';

src/stylesheets/components/treetable.scss

@@ -0,0 +1,156 @@
+.sds-tree-table--scrollable {
+  overflow: scroll;
+
+  .sds-tree-table {
+    width: 59.25rem;
+  }
+}
+
+table.sds-tree-table {
+  border-collapse:separate; 
+  border-spacing: 0 5px;
+
+  thead {
+    th {
+      border: none;
+      @include u-padding(2);
+      @include u-bg('accent-cool-lighter');
+    }
+    
+    @include u-border('accent-cool-light');  
+  }
+  
+  tbody {
+  
+    td {
+      border-style: none;
+      position: relative;
+      .horizontal-border {
+        border-top: 3px dashed;
+        height: 1px;
+        position: absolute;
+        width: 100%;
+        top: 50%;
+        color: color('ink');
+      }
+  
+      .vertical-border {
+        border-left: 3px dashed;
+        width: 1px;
+        height: 100%;
+        position: absolute;
+        bottom: 40px;
+        color: color('ink');
+      }
+    }
+    
+    tr:not(.text-center) {
+  
+      td:first-child {
+        position: relative;
+        .usa-button {
+          cursor: pointer;
+          top: 0.25rem;
+          color: color('accent-cool');
+          svg {
+            background-color: color('ink');
+            border-radius: 50%;
+          }
+        }
+
+        .usa-button:hover {
+          filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.1));
+        }
+      }
+  
+      td:nth-child(2) {
+        border-left: 1px solid color('base-light');
+      }
+    
+      td:not(:first-child) {
+        border-top: 1px solid color('base-light');
+        border-bottom: 1px solid color('base-light');
+      }
+    
+      td:last-child {
+        border-right: 1px solid color('base-light');
+      }
+    }
+  
+    tr[aria-expanded] {
+      td {
+        background-color: color('base-lightest');
+      }
+  
+      td:first-child {
+        background-color: unset;
+      }
+    }
+  
+
+    tr[aria-level="1"] {
+      .vertical-border {
+        margin-left: 1rem;
+        margin-top: 1rem;
+      }
+
+      .horizontal-border {
+        margin-left: 2rem;
+      }
+    }
+  }
+  
+  
+  .sds-tree-table__row--selected:not(.text-center) {
+    td:nth-child(2) {
+      @include u-border-left('secondary');
+    }
+  
+    td:not(:first-child) {
+      @include u-border-top('secondary');
+      @include u-border-bottom('secondary');
+    }
+  
+    td:last-child {
+      @include u-border-right('secondary');
+    }
+  }
+
+  .sds-tree-table__row--highlight-border > td {
+    .vertical-border-top {
+      border-color: color('secondary');
+    }
+
+    .vertical-border {
+      border-color: color('secondary');
+    }
+
+    .horizontal-border {
+      border-color: color('secondary');
+    }
+  }
+
+
+ // CSS for up to 10 nested children
+  @for $i from 1 through 10 {
+    tr[aria-level="#{$i}"] {
+      td:nth-child(2), .usa-button {
+        position: relative;
+        left: #{($i * 1.5) - 1.5}rem;
+      }
+
+      td:nth-child(2) {
+        padding-right: #{($i * 1.5) - 1.5}rem;
+      }
+
+      .vertical-border, .horizontal-border {
+        margin-left: #{($i * 1.5) - 2}rem;
+      }
+    }
+
+    tr[aria-level="#{$i}"][aria-expanded="true"] .vertical-border {
+      margin-left: #{($i * 1.5) - 0.5}rem;
+    }
+
+  }
+}