Merge pull request #761 from dod-ccpo/environment-lists

Environment lists

styles/components/_accordion_table.scss

@@ -1,65 +1,111 @@
+.float-right {
+  float: right;
+}
+
 .accordion-table {
+  ul {
+    padding-left: 0;
+  }
+
+  &.accordion-table-list {
+    display: table;
+    width: 100%;
+  }
+
+  .accordion-table__head {
+    padding: $gap $gap*2;
+    font-weight: 700;
+    color: $color-gray;
+    text-transform: uppercase;
+    background-color: $color-gray-lightest;
+    border-bottom: 1px solid $color-gray-lightest;
+    border-top: none;
+  }
+
+  thead th {
+    text-transform: uppercase;
+    border-bottom: 1px solid $color-gray-lightest;
+    border-top: none;
+  }
+
+  th, td {
+    white-space: nowrap;
+
+    button {
+      margin: 0;
+    }
+  }
+
+  .accordion-table__item-content {
+    padding-top: $gap*3;
+    padding-right: $gap;
+    padding-bottom: $gap*3;
+    padding-left: $gap*3;
+  }
+
+  .accordion-table__items {
+    margin: 0;
+
+    li {
+
+      list-style-type: none;
 
-  table {
-    thead th {
-      text-transform: uppercase;
       border-bottom: 1px solid $color-gray-lightest;
-      border-top: none;
-    }
+      margin: 0;
 
-    th, td {
-      white-space: nowrap;
+      ul {
+        margin-top: 0;
+        margin-bottom: 0;
+        background-color: $color-gray-lightest;
 
-      button {
-        margin: 0;
+        li {
+          border-bottom: 1px solid $color-gray-lighter;
+        }
       }
     }
 
-    .accordion-table__items {
-      .accordion-table__item__toggler {
-        @include icon-link-color($color-blue, $color-gray-lightest);
-        float: right;
-        margin-left: -$gap;
-        color: $color-blue;
+    .accordion-table__item__toggler {
+      @include icon-link-color($color-blue, $color-gray-lightest);
+      float: right;
+      color: $color-blue;
+      padding: $gap;
+      margin: -$gap 0;
 
-        .icon {
-          @include icon-size(12);
-          margin-right: $gap;
-        }
-
-        .open-indicator {
-          position: absolute;
-          bottom: 0;
-          left: 5 * $gap;
-          width: 0;
-          height: 0;
-          border-left: 10px solid transparent;
-          border-right: 10px solid transparent;
-
-          border-bottom: 10px solid $color-blue-light;
-        }
+      .icon {
+        @include icon-size(12);
+        margin-right: $gap;
       }
 
-      th, td, tr {
-        border-bottom: 1px dashed $color-gray-lightest;
+      .open-indicator {
+        position: absolute;
+        bottom: 0;
+        left: 5 * $gap;
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+
+        border-bottom: 10px solid $color-blue-light;
       }
+    }
 
-      th[scope=rowgroup] {
-        position: relative;
-      }
+    th, td, tr {
+      border-bottom: 1px dashed $color-gray-lightest;
+    }
 
-      .accordion-table__item__expanded {
-        margin-left: 2 * $gap;
+    th[scope=rowgroup] {
+      position: relative;
+    }
 
-        th, td {
-          .icon-link {
-            font-weight: $font-normal;
-            font-size: $base-font-size;
-          }
-
-          border-bottom: 1px dashed $color-white;
-          background-color: $color-gray-lightest;
+    .accordion-table__item__expanded {
+      th, td {
+        .icon-link {
+          font-weight: $font-normal;
+          font-size: $base-font-size;
         }
+
+        border-bottom: 1px dashed $color-white;
+        background-color: $color-gray-lightest;
       }
     }
   }

styles/components/_portfolio_layout.scss

@@ -326,9 +326,6 @@
     }
 
     .application-list-item {
-      ul {
-        padding-left: 0;
-      }
       .block-list__footer {
         border-bottom: none;
       }

styles/elements/_tables.scss

@@ -4,7 +4,7 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
  */
 
- table {
+table {
   @include panel-margin;
   min-width: 100%;