move styles and js to the root directory

styles/components/_alerts.scss

@@ -0,0 +1,76 @@
+/*
+ * Alerts
+ * @see https://designsystem.digital.gov/components/alerts/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/components/_alerts.scss
+ */
+
+@mixin alert {
+  padding: $gap * 2;
+  border-left-width: $gap / 2;
+  border-left-style: solid;
+  @include panel-margin;
+}
+
+@mixin alert-level($level) {
+  $background-color: $color-aqua-lightest;
+  $border-color: $color-blue;
+
+  @if $level == 'success' {
+    $background-color: $color-green-lightest;
+    $border-color: $color-green;
+
+  } @else if $level == 'warning' {
+    $background-color: $color-gold-lightest;
+    $border-color: $color-gold;
+
+  } @else if $level == 'error' {
+    $background-color: $color-red-lightest;
+    $border-color: $color-red;
+  }
+
+  background-color: $background-color;
+  border-color: $border-color;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+
+  .alert__icon {
+    @include icon-color($border-color);
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-right: $gap * 2;
+    margin-left: 0;
+  }
+
+  .alert__title {
+    @include h3;
+    margin-top: 0;
+  }
+
+  .alert__content {
+    .alert__message {
+      &:last-child {
+        > *:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.alert {
+  @include alert;
+  @include alert-level('info');
+
+  &.alert--success {
+    @include alert-level('success');
+  }
+
+  &.alert--warning {
+    @include alert-level('warning');
+  }
+
+  &.alert--error {
+    @include alert-level('error');
+  }
+}

styles/components/_empty_state.scss

@@ -0,0 +1,27 @@
+.empty-state {
+  text-align: center;
+  padding: 6rem ($gap * 2) 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include media($medium-screen) {
+    padding: 8rem ($gap * 4) 0;
+  }
+
+  .icon {
+     @include icon-size(50);
+     @include icon-color($color-gray-light);
+  }
+
+  p {
+    @include h2;
+    line-height: 1.2;
+    max-width: 15em;
+    color: $color-gray;
+
+    @include media($large-screen) {
+      @include h1;
+    }
+  }
+}

styles/components/_footer.scss

@@ -0,0 +1,6 @@
+.app-footer {
+  background-color: $color-gray-lightest;
+  border-top: 1px solid $color-gray-lighter;
+  padding-left: $gap*4;
+  padding-bottom: $gap*2;
+}

styles/components/_global_layout.scss

@@ -0,0 +1,36 @@
+body {
+  background-color: $color-gray-lightest;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  min-height: 100vh;
+
+  > footer {
+    margin-top: auto;
+  }
+
+  &.modalOpen {
+    overflow-y: hidden;
+  }
+}
+
+.global-layout {
+  display: flex;
+  flex-wrap: nowrap;
+  flex-grow: 1;
+
+  .global-navigation {
+    margin-top: -1px;
+  }
+
+  .global-panel-container {
+    margin: $gap;
+    max-width: $site-max-width;
+    overflow-x: hidden;
+    flex-grow: 1;
+
+    @include media($medium-screen) {
+      margin: $gap * 2;
+    }
+  }
+}

styles/components/_global_navigation.scss

@@ -0,0 +1,30 @@
+.global-navigation {
+  background-color: $color-white;
+
+  .sidenav__link {
+    padding-right: $gap;
+
+    @include media($large-screen) {
+      padding-right: $gap * 2;
+    }
+  }
+
+  .sidenav__link-label {
+    @include hide;
+
+    @include media($large-screen) {
+      @include unhide;
+      padding-left: $gap;
+    }
+  }
+
+  &.global-navigation__context--workspace {
+    .sidenav__link {
+      padding-right: $gap;
+    }
+
+    .sidenav__link-label {
+      @include hide;
+    }
+  }
+}

styles/components/_modal.scss

@@ -0,0 +1,47 @@
+.modal {
+  position: fixed;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: $color-overlay;
+
+  .modal__dialog {
+    padding: $gap;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+
+    @include media($medium-screen) {
+      padding: $gap * 2;
+    }
+
+    @include media($large-screen) {
+      padding: $gap * 4;
+    }
+
+    .modal__body {
+      background-color: $color-white;
+      padding: $gap * 2;
+      flex-grow: 1;
+      overflow-y: auto;
+      max-width: 80rem;
+
+      @include media($medium-screen) {
+        padding: $gap * 4;
+        flex-grow: 0;
+      }
+
+      h1, h2 {
+        @include h3;
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

styles/components/_progress_menu.scss

@@ -0,0 +1,103 @@
+.progress-menu {
+  display: block;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &--three {
+    .progress-menu__item {
+      width: 32%;
+    }
+  }
+
+  &--four {
+    .progress-menu__item {
+      width: 24%;
+    }
+  }
+
+  &--five {
+    .progress-menu__item {
+      width: 19%;
+    }
+  }
+
+  &__item {
+    display: inline-block;
+    font-weight: $font-bold;
+    position: relative;
+    vertical-align: top;
+
+    a {
+      display: block;
+      position: relative;
+      padding: ($gap * 4) ($gap * 2);
+      margin: 0 ($gap * 2);
+      text-decoration: none;
+      text-align: center;
+      z-index: 2;
+      color: $color-black;
+    }
+
+    a.active {
+      color: $color-blue;
+    }
+
+
+
+    &:first-child:after {
+      display: none;
+    }
+
+    &:after {
+      display: inline-block;
+      height: 1px;
+      content: " ";
+      color: $color-gray-lightest;
+      text-shadow: none;
+      background-color: $color-gray-light;
+      position: absolute;
+      top: 1.1rem;
+      width: 100%;
+      right: 50%;
+      border-right: 2.2rem solid transparent;
+      border-left: 2.2rem solid transparent;
+      background-clip: padding-box;
+      z-index: 1;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+      text-align: center;
+      width: 2rem;
+      height: 2rem;
+      border: 1px solid $color-gray;
+      border-radius: 100%;
+      position: absolute;
+      left: 50%;
+      margin-left: -1rem;
+      z-index: 1;
+    }
+
+    &--active:before {
+      border: 2px solid $color-blue;
+    }
+
+    &--complete:before {
+      content: url('#{$asset-path}/icons/checkmark.svg');
+      background-color: $color-blue;
+      border: 2px solid $color-blue;
+      font-size: $h6-font-size;
+      padding: 1px 2px;
+    }
+
+    &--incomplete:before {
+      border: 2px solid $color-gray-light;
+    }
+
+  }
+}

styles/components/_search_bar.scss

@@ -0,0 +1,72 @@
+.search-bar {
+  @include grid-row;
+  @include panel-base;
+  @include panel-theme-default;
+  @include panel-margin;
+  padding: $gap;
+  flex-wrap: wrap;
+
+  .usa-input {
+    margin: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    height: $search-input-height;
+    position: relative;
+    margin-top: $gap;
+
+    @include media($large-screen) {
+      flex-shrink: 1;
+      flex-basis: auto;
+      margin-top: 0;
+      margin-left: $gap;
+    }
+
+    label {
+      @include hide;
+    }
+
+    &:first-child {
+      margin-left: 0;
+      margin-top: 0;
+    }
+  }
+
+  .search-input {
+    @include media($medium-screen) {
+      flex-basis: 50%;
+    }
+
+    @media (min-width:800px) and (max-width:900px) {
+      flex-basis: auto;
+    }
+
+    input[type='search'] {
+      width: auto;
+      height: $search-input-height;
+      width: calc(100% - #{$search-button-width});
+      max-width: none;
+      font-size: 1.6rem;
+    }
+
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      height: $search-input-height;
+      width: $search-button-width;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      text-align: center;
+
+      &:after {
+        content: url('#{$asset-path}/icons/search.svg');
+        display: inline-block;
+        width: 1.6rem;
+        height: 1.6rem;
+      }
+    }
+  }
+}

styles/components/_site_action.scss

@@ -0,0 +1,15 @@
+.site-action {
+  border-bottom: 1px solid $color-gray-lightest;
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  margin-top: 0.25rem;
+
+  a {
+    font-size: 1.3rem;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: $color-primary !important;
+  }
+
+}

styles/components/_topbar.scss

@@ -0,0 +1,71 @@
+.topbar {
+  background-color: $color-white;
+  border-bottom: 1px solid $color-black;
+
+  .topbar__navigation {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+
+    .topbar__link {
+      color: $color-black;
+      display: inline-flex;
+      align-items: center;
+      height: $topbar-height;
+      padding: 0 ($gap * 2);
+      text-decoration: none;
+
+      .topbar__link-label {
+        @include h5;
+      }
+
+      .topbar__link-icon {
+        margin-left: $gap;
+      }
+
+      &.topbar__link--shield {
+        width: $icon-bar-width;
+        justify-content: center;
+        padding: 0;
+
+        .topbar__link-icon {
+          margin: 0;
+        }
+      }
+
+      &:hover {
+        background-color: $color-primary-darker;
+        color: $color-white;
+
+        .topbar__link-icon {
+          @include icon-style-inverted;
+        }
+      }
+    }
+
+    .topbar__context {
+      display: flex;
+      flex-grow: 1;
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: space-between;
+
+      &.topbar__context--workspace {
+        background-color: $color-primary;
+
+        .topbar__link {
+          color: $color-white;
+
+          .topbar__link-icon {
+            @include icon-style-inverted;
+          }
+
+          &:hover {
+            background-color: $color-primary-darker;
+          }
+        }
+      }
+    }
+  }
+}

styles/components/_workspace_layout.scss

@@ -0,0 +1,26 @@
+.workspace-panel-container {
+  @include media($large-screen) {
+    @include grid-row;
+  }
+}
+
+.workspace-navigation {
+  @include panel-margin;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      flex-grow: 1;
+    }
+  }
+
+  @include media($large-screen) {
+    width: 20rem;
+    margin-right: $gap * 2;
+
+    ul {
+      display: block;
+    }
+  }
+}