move styles and js to the root directory

styles/elements/_action_group.scss

@@ -0,0 +1,19 @@
+.action-group {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  margin-top: $gap * 4;
+
+  .usa-button,
+  a {
+    margin: 0 0 0 ($gap * 2);
+
+    @include media($medium-screen) {
+      margin: 0 0 0 ($gap * 4);
+    }
+  }
+
+  &:last-child {
+    margin-bottom: $gap * 3;
+  }
+}

styles/elements/_block_lists.scss

@@ -0,0 +1,90 @@
+@mixin block-list {
+  @include panel-margin;
+
+  > ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@mixin block-list-header {
+  @include panel-base;
+  @include panel-theme-default;
+  padding: $gap * 2;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+@mixin block-list__title {
+  @include h4;
+  margin: 0;
+}
+
+@mixin block-list__footer {
+  @include panel-base;
+  @include panel-theme-default;
+  padding: $gap * 2;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+
+  .icon-link {
+    &:first-child {
+      margin-right: -$gap;
+    }
+  }
+}
+
+@mixin block-list-item {
+  @include panel-base;
+  margin: 0;
+  padding: $gap * 2;
+  border-top: 0;
+  border-bottom: 1px dashed $color-gray-light;
+
+  @at-root li#{&} {
+    &:last-child {
+      border-bottom-style: solid;
+    }
+  }
+}
+
+
+.block-list {
+  @include block-list;
+
+  .icon-link {
+    margin: -$gap 0;
+  }
+
+  .icon-link,
+  .label {
+    &:first-child {
+      margin-left: -$gap;
+    }
+
+    &:last-child {
+      margin-right: -$gap;
+    }
+
+  }
+}
+
+.block-list__header {
+  @include block-list-header;
+}
+
+.block-list__title {
+  @include block-list__title;
+}
+
+.block-list__item {
+  @include block-list-item;
+}
+
+.block-list__footer {
+  @include block-list__footer;
+  border-top: 0;
+}

styles/elements/_buttons.scss

@@ -0,0 +1,5 @@
+/*
+ * Buttons
+ * @see https://designsystem.digital.gov/components/buttons/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_buttons.scss
+ */

styles/elements/_diff.scss

@@ -0,0 +1,36 @@
+[class*='diff--'] {
+  border-left-style: solid;
+  border-left-width: ($gap / 2);
+  padding-left: $gap / 2;
+  margin: ($gap / 2) 0;
+
+  &::before {
+    font-weight: bold;
+    padding-right: $gap;
+    display: inline-block;
+    width: 1.8rem;
+    text-align: center;
+  }
+}
+
+.diff--removed {
+  background-color: $color-red-lightest;
+  border-left-color: $color-red-dark;
+  text-decoration: line-through;
+  text-decoration-color: $color-overlay;
+
+  &::before {
+    content: '-';
+    color: $color-red-dark;
+  }
+}
+
+.diff--added {
+  background-color: $color-aqua-lightest;
+  border-left-color: $color-aqua-dark;
+
+  &::before {
+    content: '+';
+    color: $color-aqua-dark;
+  }
+}

styles/elements/_icon_link.scss

@@ -0,0 +1,66 @@
+@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
+  color: $color;
+
+  &:hover {
+    background-color: $hover-color;
+    color: $color;
+  }
+
+  .icon {
+    @include icon-color($color);
+  }
+}
+
+@mixin icon-link {
+  @include icon-link-color($color-primary);
+  @include h5;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: $gap;
+  text-decoration: none;
+  background: none;
+  transition: background-color $hover-transition-time;
+  border-radius: $gap / 2;
+
+  .icon {
+    @include icon-color($color-primary);
+    @include icon-size(12);
+    margin-right: $gap;
+  }
+}
+
+@mixin icon-link-large {
+  @include h4;
+  font-weight: normal;
+
+  .icon {
+    @include icon-size(16);
+    margin-right: $gap * 2;
+  }
+}
+
+@mixin icon-link-vertical {
+  flex-direction: column;
+
+  .icon {
+    margin: 0 $gap $gap;
+  }
+}
+
+.icon-link {
+  @include icon-link;
+  @include icon-link-color($color-primary);
+
+  &.icon-link--vertical {
+    @include icon-link-vertical;
+  }
+
+  &.icon-link--large {
+    @include icon-link-large;
+  }
+
+  &.icon-link--danger {
+    @include icon-link-color($color-red, $color-red-lightest);
+  }
+}

styles/elements/_icons.scss

@@ -0,0 +1,52 @@
+@mixin icon {
+  display: inline-flex;
+
+  > svg {
+    width: 100%;
+    height: 100%;
+    * {
+      transition: fill $hover-transition-time;
+    }
+  }
+}
+
+@mixin icon-size($size) {
+  $icon-size: $size * .1rem;
+  width: $icon-size;
+  height: auto;
+  margin: $icon-size / 4;
+}
+
+@mixin icon-color($color) {
+  > svg * {
+    fill: $color;
+  }
+}
+
+@mixin icon-style-default {
+  @include icon-color($color-black);
+}
+
+@mixin icon-style-active {
+  @include icon-color($color-primary);
+}
+
+@mixin icon-style-inverted {
+  > svg * {
+    fill: $color-white;
+  }
+}
+
+.icon {
+  @include icon;
+  @include icon-size(16);
+  @include icon-style-default;
+
+  &.icon--tiny {
+    @include icon-size(10);
+  }
+
+  &.icon--large {
+    @include icon-size(24);
+  }
+}

styles/elements/_inputs.scss

@@ -0,0 +1,241 @@
+/*
+ * Inputs
+ * @see https://designsystem.digital.gov/components/form-controls/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss
+ */
+
+@mixin input-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  display: block;
+}
+
+@mixin input-state($state) {
+  $border-width: 1px;
+  $state-color: $color-gray;
+
+  @if $state == 'error' {
+    $border-width: 2px;
+    $state-color: $color-red;
+
+  } @else if $state == 'warning' {
+    $border-width: 2px;
+    $state-color: $color-gold;
+
+  } @else if $state == 'success' {
+    $border-width: 2px;
+    $state-color: $color-green;
+  }
+
+  .icon {
+    @include icon-color($state-color);
+  }
+
+  .usa-input__message {
+    color: $state-color;
+  }
+
+  input,
+  textarea,
+  select {
+    border-color: $state-color;
+    border-width: $border-width;
+  }
+
+  fieldset {
+    input[type='radio'] {
+      + label::before {
+        box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-red;
+      }
+    }
+
+    input[type='checkbox'] {
+      + label::before {
+        box-shadow: 0 0 0 2px $color-red;
+      }
+    }
+  }
+}
+
+.usa-input {
+  margin:  ($gap * 4) ($gap * 2) ($gap * 4) 0;
+
+  @include media($medium-screen) {
+    margin: ($gap * 4) 0;
+  }
+
+  label {
+    padding: 0 0 $gap 0;
+    margin: 0;
+    @include h4;
+    @include line-max;
+    position: relative;
+
+    .usa-input__help {
+      display: block;
+      @include h5;
+      font-weight: normal;
+      padding-top: $gap / 2;
+      @include line-max;
+    }
+
+    .icon {
+      position: absolute;
+      left: 100%;
+      top: 100%;
+      margin-top: 1.4rem;
+      margin-left: $gap;
+    }
+  }
+
+  input,
+  textarea,
+  select {
+    @include line-max;
+    margin: 0;
+  }
+
+  .usa-input__choices { // checkbox & radio sets
+    legend {
+      padding: 0 0 $gap 0;
+      @include h4;
+
+      .icon {
+        vertical-align: middle;
+      }
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      > li {
+        margin: 0;
+
+        [type='radio'] + label,
+        [type='checkbox'] + label {
+          margin: 0;
+        }
+      }
+    }
+
+    label {
+      font-weight: normal;
+      margin: 0;
+    }
+
+    .usa-input__message {
+      display: block;
+    }
+
+    &.usa-input__choices--inline {
+      label {
+        display: inline-block;
+        padding-right: $gap * 3;
+      }
+    }
+  }
+
+  .usa-input__message {
+    @include h5;
+    display: inline-block;
+    padding-top: $gap;
+  }
+
+  &.usa-input--error {
+    @include input-state('error');
+  }
+
+  &.usa-input--warning {
+    @include input-state('warning');
+  }
+
+  &.usa-input--success {
+    @include input-state('success');
+  }
+}
+
+select {
+  border-radius: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.usa-date-input label {
+  margin-top: 0;
+}
+
+.input-label {
+  margin-top: 1rem;
+}
+
+.usa-fieldset-inputs {
+  margin-top: 2.25rem;
+
+  label:first-child {
+    padding-bottom: 0.5rem;
+  }
+}
+
+.usa-search {
+  padding-top: 2px;
+  margin-right: 2rem;
+
+  input[type=search] {
+    height: 4.4rem;
+    font-size: 1.7rem;
+    color: $color-black;
+  }
+
+  button {
+    min-height: 4.4rem;
+  }
+
+}
+
+
+// Form Grid
+.form-row {
+  margin: ($gap * 4) 0;
+
+  .form-col {
+    flex-grow: 1;
+
+    &:first-child .usa-input {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    &:last-child .usa-input {
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include media($medium-screen) {
+    @include grid-row;
+    align-items: flex-start;
+
+    .form-col {
+      .usa-input {
+        margin-left: ($gap * 4);
+        margin-right: ($gap * 4);
+      }
+
+      &:first-child {
+        .usa-input {
+          margin-left: 0;
+        }
+      }
+
+      &:last-child {
+        .usa-input {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}

styles/elements/_labels.scss

@@ -0,0 +1,34 @@
+/*
+ * Labels
+ * @see https://designsystem.digital.gov/components/labels/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
+ */
+
+.label {
+  @include h5;
+  display: inline-block;
+  height: 2.4rem;
+  line-height: 2.4rem;
+  color: $color-white;
+  background-color: $color-gray;
+  vertical-align: middle;
+  margin: 0 $gap;
+  padding: 0 $gap;
+  border-radius: $gap / 2;
+
+  &.label--info {
+    background-color: $color-primary;
+  }
+
+  &.label--warning {
+    background-color: $color-gold;
+  }
+
+  &.label--error {
+    background-color: $color-red;
+  }
+
+  &.label--success {
+    background-color: $color-green;
+  }
+}

styles/elements/_panels.scss

@@ -0,0 +1,67 @@
+/*
+ * Panels
+ * A generic block container
+ */
+
+ @mixin panel-base {
+  background-color: $color-white;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  border-left: 0;
+  border-right: 0;
+}
+
+@mixin panel-theme-default {
+  border-top-color: $color-black;
+  border-bottom-color: $color-gray-light;
+}
+
+@mixin panel-margin {
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-bottom: $site-margins-mobile * 2;
+
+  @include media($medium-screen) {
+    margin-bottom: $site-margins * 2;
+  }
+}
+
+@mixin panel-actions {
+  padding: $gap;
+}
+
+.panel {
+  @include panel-base;
+  @include panel-theme-default;
+  @include panel-margin;
+
+  .panel__content {
+    margin: ($gap * 2) 0;
+    padding: 0 ($gap * 2);
+
+    @include media($medium-screen) {
+      margin: ($gap * 4) 0;
+      padding: 0 ($gap * 4);
+    }
+  }
+
+  .panel__heading {
+    margin: $gap * 2;
+
+    @include media($medium-screen) {
+      margin: $gap * 4;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+    }
+  }
+}
+
+.panel__actions {
+  @include panel-actions;
+}
+

styles/elements/_sidenav.scss

@@ -0,0 +1,87 @@
+.sidenav {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+     li {
+      margin: 0;
+      display: block;
+    }
+  }
+
+  .sidenav__link {
+    display: block;
+    border-top: 1px solid $color-black;
+    padding: $gap ($gap * 2);
+    color: $color-black;
+    text-decoration: none;
+    white-space: nowrap;
+
+    .sidenav__link-icon {
+      margin-left: - ($gap * .5);
+    }
+
+    &.sidenav__link--disabled {
+      color: $color-shadow;
+      pointer-events: none;
+    }
+
+    &.sidenav__link--active {
+      @include h4;
+      background-color: $color-white;
+      color: $color-primary;
+      box-shadow: inset ($gap / 2) 0 0 0 $color-primary;
+
+      .sidenav__link-icon {
+        @include icon-style-active;
+      }
+
+      + ul {
+        background-color: $color-white;
+
+        .sidenav__link {
+          &--active {
+            @include h5;
+            color: $color-primary;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+
+    + ul {
+      padding-bottom: $gap / 2;
+
+      li {
+        .sidenav__link {
+          @include h5;
+          padding: $gap * .75;
+          padding-left: 4.5rem;
+          border: 0;
+          font-weight: normal;
+
+          .sidenav__link-icon {
+            @include icon-size(12);
+            flex-shrink: 0;
+            margin-right: 1.5rem;
+            margin-left: -3rem
+          }
+
+          .sidenav__link-label {
+            padding-left: 0;
+          }
+        }
+      }
+    }
+
+    &:hover {
+      color: $color-primary;
+
+      .sidenav__link-icon {
+        @include icon-style-active;
+      }
+
+    }
+  }
+}

styles/elements/_tables.scss

@@ -0,0 +1,92 @@
+/*
+ * Tables
+ * @see https://designsystem.digital.gov/components/tables/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
+ */
+
+ table {
+  @include panel-margin;
+  min-width: 100%;
+
+  tbody {
+    tr {
+      th,
+      td {
+        @include block-list-item;
+        display: table-cell;
+        white-space: nowrap;
+        border-bottom-style: dashed;
+        border-top: none;
+
+        &:last-child {
+          border-bottom-style: dashed;
+        }
+      }
+
+      &:last-child {
+        td,
+        th {
+          border-bottom-style: solid;
+        }
+      }
+
+      .table-cell--align-right {
+        text-align: right;
+      }
+
+      .table-cell--shrink {
+        width: 1%;
+      }
+
+      .table-cell--expand {
+        width: 100%;
+      }
+
+      .table-cell--hide-small {
+        display: none;
+
+        @include media($medium-screen) {
+          display: table-cell;
+        }
+      }
+    }
+  }
+
+  thead {
+    tr {
+      th {
+        @include block-list-header;
+        display: table-cell;
+      }
+    }
+  }
+
+  @at-root .panel #{&} {
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.responsive-table-wrapper {
+  overflow-x: auto;
+  @include panel-margin;
+
+  table {
+    margin-bottom: 0;
+  }
+
+  @at-root .panel #{&} {
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

styles/elements/_typography.scss

@@ -0,0 +1,59 @@
+/*
+ * Typography
+ * @see https://designsystem.digital.gov/components/typography/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
+ */
+
+ * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+p {
+  margin: 0 0 ($gap * 2) 0;
+  @include line-max;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: $font-sans;
+  margin: ($gap * 2) 0;
+
+  + .subtitle * {
+    margin-top: 0;
+  }
+
+}
+
+.h1 { @include h1; }
+.h2 { @include h2; }
+.h3 { @include h3; }
+.h4 { @include h4; }
+.h5 { @include h5; }
+.h6 { @include h6; }
+
+a,
+a:hover {
+  transition:
+  background 0.2s,
+  border 0.2s,
+  box-shadow 0.2s,
+  color 0.2s;
+}
+
+a:visited {
+  color: $color-blue;
+}
+
+dl {
+  dt {
+    display: inline;
+    font-weight: bold;
+  }
+  dd {
+    -webkit-margin-start: 0;
+  }
+
+  > div {
+    margin-bottom: $gap * 2;
+  }
+}