Merge pull request #576 from lbryio/v16-tabs

Improve tabs ( UI / UX )

ui/dist/themes/dark.css

@@ -27,8 +27,8 @@
     --search-border: 1px solid rgba(0,0,0, 0.25);
 
     /* Tab */
-    --tab-color: #757575;
-    --tab-active-color: #CCC;
+    --tab-color: rgba(255,255,255, 0.5) ;
+    --tab-active-color: rgba(255,255,255, 0.75);
 
     /* Header */
     --header-color: #CCC;
@@ -43,4 +43,7 @@
     /* Modla */
     --modal-overlay-bg: var(--color-dark-overlay);
     --modal-border: 1px solid rgba(0, 0, 0, 0.25);
+
+    /* Divider */
+    --divider: 1px solid rgba(255,255,255, 0.12);
 }

ui/scss/_vars.scss

@@ -90,8 +90,8 @@ $text-color: #000;
 
   /* Tabs */
   --tab-bg: transparent;
-  --tab-color: #666;
-  --tab-active-color: var(--header-active-color);
+  --tab-color: rgba(0, 0, 0, 0.5);
+  --tab-active-color: var(--color-primary);
   --tab-border-size: 2px;
   --tab-border: var(--tab-border-size) solid var(--tab-active-color);
 
@@ -125,4 +125,7 @@ $text-color: #000;
   --tooltip-bg: var(--color-bg);
   --tooltip-color: var(--text-color);
   --tooltip-border: 1px solid #aaa;
+
+  /* Divider */
+  --divider: 1px solid rgba(0, 0, 0, 0.12);
 }

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";

ui/scss/component/_header.scss

@@ -56,38 +56,3 @@
     border-color: var(--color-primary);
   }
 }
-
-nav.sub-header
-{
-  text-transform: uppercase;
-  padding: 0 0 $spacing-vertical;
-  max-width: $width-page-constrained;
-  margin-left: auto;
-  margin-right: auto;
-  > a
-  {
-    display: inline-block;
-    margin: 0 15px;
-    padding: 0 5px;
-    line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
-    color: var(--tab-color);
-
-    &:first-child
-    {
-      margin-left: 0;
-    }
-    &:last-child
-    {
-      margin-right: 0;
-    }
-    &.sub-header-selected
-    {
-      border-bottom: var(--tab-border);
-      color: var(--tab-active-color);
-    }
-    &:hover
-    {
-      color: var(--tab-active-color);
-    }
-  }
-}

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%;}
+}