From dda740fc2f14f50767a167fd759e8e0f956a47b5 Mon Sep 17 00:00:00 2001
From: Andrew Croce <andrew+dds@promptworks.com>
Date: Mon, 9 Jul 2018 14:34:26 -0400
Subject: [PATCH] topbar styles

---
 scss/sections/_navigation.scss | 20 ----------
 scss/sections/_topbar.scss     | 71 ++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 20 deletions(-)
 delete mode 100644 scss/sections/_navigation.scss
 create mode 100644 scss/sections/_topbar.scss

diff --git a/scss/sections/_navigation.scss b/scss/sections/_navigation.scss
deleted file mode 100644
index 3de38a0f..00000000
--- a/scss/sections/_navigation.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.usa-header {
-  background-color: $color-white;
-}
-
-.usa-navbar {
-  height: 5rem;
-  width: 5%;
-}
-
-.usa-nav {
-  padding-top: 1rem;
-  padding-left: 0;
-}
-
-.usa-nav-primary {
-
-  li:last-child {
-    padding-left: 3rem;
-  }
-}
diff --git a/scss/sections/_topbar.scss b/scss/sections/_topbar.scss
new file mode 100644
index 00000000..907d0628
--- /dev/null
+++ b/scss/sections/_topbar.scss
@@ -0,0 +1,71 @@
+.topbar {
+  background-color: $color-white;
+  height: $topbar-height;
+  border-bottom: 1px solid $color-black;
+
+  .topbar__navigation {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: flex-end;
+
+    > .topbar__link {
+      @include h5;
+      color: $color-primary;
+      display: inline-block;
+      height: $topbar-height;
+      line-height: $topbar-height;
+      padding: 0 ($gap * 2);
+      text-decoration: none;
+
+      > span {
+        display: inline-block;
+        height: $topbar-height;
+        line-height: $topbar-height;
+      }
+
+      &.topbar__link--primary {
+        margin-right: auto;
+        > span {
+          @include nav-border;
+        }
+
+        &:hover {
+          color: $color-white;
+          background-color: $color-primary-darkest;
+        }
+      }
+
+      &.topbar__link--secondary {
+        font-weight: normal;
+        > span {
+          @include nav-border;
+          border-bottom-width: 0;
+        }
+
+        &:hover {
+          > span {
+            @include nav-border;
+          }
+        }
+      }
+    }
+  }
+}
+
+// .usa-navbar {
+//   height: 5rem;
+//   width: 5%;
+// }
+
+// .usa-nav {
+//   padding-top: 1rem;
+//   padding-left: 0;
+// }
+
+// .usa-nav-primary {
+
+//   li:last-child {
+//     padding-left: 3rem;
+//   }
+// }