From b49e5f3075e391b7c95f446172e18d8dba6403f3 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 17 Sep 2017 18:25:07 -0600
Subject: [PATCH] add better tab styles

add animation for active tab
---
 ui/scss/component/_header.scss | 37 +++++++++++++++++++++++++++-------
 ui/scss/component/_tabs.scss   |  0
 2 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 ui/scss/component/_tabs.scss

diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 9428298e2..43fb118d7 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -57,20 +57,27 @@
   }
 }
 
+/* Tabs */
+
 nav.sub-header
 {
   text-transform: uppercase;
-  padding: 0 0 $spacing-vertical;
   max-width: $width-page-constrained;
-  margin-left: auto;
-  margin-right: auto;
+  margin-bottom: 40px;
+  border-bottom: var(--divider);
   > a
   {
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: 600;
+    text-transform: uppercase;
     display: inline-block;
-    margin: 0 15px;
-    padding: 0 5px;
-    line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
+    vertical-align: baseline;
+    margin: 0 8px;
+    padding: 0 8px;
     color: var(--tab-color);
+    position: relative;
 
     &:first-child
     {
@@ -82,8 +89,19 @@ nav.sub-header
     }
     &.sub-header-selected
     {
-      border-bottom: var(--tab-border);
       color: var(--tab-active-color);
+      &:before {
+        width: 100%;
+        height: var(--tab-border-size);
+        background: var(--tab-active-color);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        content: '';
+        animation-name: activeTab;
+        animation-duration: 0.3s;
+        animation-timing-function: cubic-bezier(.55,0,.1,1);
+      }
     }
     &:hover
     {
@@ -91,3 +109,8 @@ nav.sub-header
     }
   }
 }
+
+@keyframes activeTab {
+    from {width: 0;}
+    to {width: 100%;}
+}
diff --git a/ui/scss/component/_tabs.scss b/ui/scss/component/_tabs.scss
new file mode 100644
index 000000000..e69de29bb