From 15216d0cadea5544edeaa82c96a5922d4d075c5b Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 17 Sep 2017 18:27:50 -0600
Subject: [PATCH] split tabs style from header

---
 ui/scss/all.scss               |  1 +
 ui/scss/component/_header.scss | 58 ----------------------------------
 ui/scss/component/_tabs.scss   | 57 +++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 69656fa41..eb2cc662c 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -21,5 +21,6 @@
 @import "component/_video.scss";
 @import "component/_pagination.scss";
 @import "component/_markdown-editor.scss";
+@import "component/_tabs.scss";
 @import "page/_developer.scss";
 @import "page/_show.scss";
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 43fb118d7..7d5e0e0af 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -56,61 +56,3 @@
     border-color: var(--color-primary);
   }
 }
-
-/* Tabs */
-
-nav.sub-header
-{
-  text-transform: uppercase;
-  max-width: $width-page-constrained;
-  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;
-    vertical-align: baseline;
-    margin: 0 8px;
-    padding: 0 8px;
-    color: var(--tab-color);
-    position: relative;
-
-    &:first-child
-    {
-      margin-left: 0;
-    }
-    &:last-child
-    {
-      margin-right: 0;
-    }
-    &.sub-header-selected
-    {
-      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
-    {
-      color: var(--tab-active-color);
-    }
-  }
-}
-
-@keyframes activeTab {
-    from {width: 0;}
-    to {width: 100%;}
-}
diff --git a/ui/scss/component/_tabs.scss b/ui/scss/component/_tabs.scss
index e69de29bb..f2059dfef 100644
--- a/ui/scss/component/_tabs.scss
+++ b/ui/scss/component/_tabs.scss
@@ -0,0 +1,57 @@
+/* Tabs */
+
+nav.sub-header
+{
+  text-transform: uppercase;
+  max-width: $width-page-constrained;
+  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;
+    vertical-align: baseline;
+    margin: 0 8px;
+    padding: 0 8px;
+    color: var(--tab-color);
+    position: relative;
+
+    &:first-child
+    {
+      margin-left: 0;
+    }
+    &:last-child
+    {
+      margin-right: 0;
+    }
+    &.sub-header-selected
+    {
+      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
+    {
+      color: var(--tab-active-color);
+    }
+  }
+}
+
+@keyframes activeTab {
+    from {width: 0;}
+    to {width: 100%;}
+}