From 91c44bc466b35ee294977f48eb1f8f7c0cfbcc38 Mon Sep 17 00:00:00 2001
From: zombieFox <crudetoaster@gmail.com>
Date: Thu, 2 Sep 2021 22:36:59 +0100
Subject: [PATCH] improve tab nav buttons and indicator

---
 src/component/tab/index.css | 52 +++++++++++++++++++++++--------------
 src/component/tab/index.js  |  8 +++---
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/component/tab/index.css b/src/component/tab/index.css
index b277b320..eddcbcc0 100644
--- a/src/component/tab/index.css
+++ b/src/component/tab/index.css
@@ -1,7 +1,10 @@
 :root {
-  --tab-space: calc((var(--form-space) / 4) * 1em);
+  --tab-size: 8;
+  --tab-space: calc((var(--tab-size) / 4) * 1em);
+  --tab-indicator-top: 0;
   --tab-indicator-left: 0;
   --tab-indicator-width: 0;
+  --tab-indicator-height: 0;
 }
 
 .tab {
@@ -10,39 +13,30 @@
   grid-template-areas:
     "nav"
     "content";
-  gap: var(--tab-space);
+  gap: calc((var(--tab-size) / 4) * 1em);
   position: relative;
   width: 100%;
 }
 
 .tab-nav {
   background-color: hsl(var(--theme-primary-020));
-  border-radius: calc(var(--theme-radius) * 0.01em);
+  border-radius: calc((var(--theme-radius) * 0.01em) + ((var(--tab-size) / 4) * 0.125em));
+  padding: calc((var(--tab-size) / 4) * 0.125em);
   grid-area: nav;
   display: flex;
   position: relative;
   transition: background-color var(--layout-transition-extra-fast);
 }
 
-.tab-nav>* {
-  flex: 1 1 50%;
+.tab-nav-group {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  gap: calc((var(--tab-size) / 4) * 0.125em);
 }
 
-.tab-nav-indicator {
-  background-color: rgb(var(--theme-accent));
-  border-radius: calc(var(--theme-radius) * 0.01em);
-  position: absolute;
-  top: 0;
-  left: calc(var(--tab-indicator-left) * 1px);
-  width: calc(var(--tab-indicator-width) * 1px);
-  height: 100%;
-  z-index: 1;
-  animation: circle-out var(--layout-transition-extra-fast) 1;
-}
-
-.tab-nav-indicator-active .tab-nav-indicator {
-  animation: none;
-  transition: left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast);
+.tab-nav-button {
+  flex-grow: 1;
 }
 
 .tab-nav-button {
@@ -56,6 +50,24 @@
   transition: background-color var(--layout-duration-01), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
 }
 
+.tab-nav-indicator {
+  background-color: rgb(var(--theme-accent));
+  border-radius: calc(var(--theme-radius) * 0.01em);
+  position: absolute;
+  top: calc(var(--tab-indicator-top) * 1px);
+  left: calc(var(--tab-indicator-left) * 1px);
+  width: calc(var(--tab-indicator-width) * 1px);
+  height: calc(var(--tab-indicator-height) * 1px);
+  pointer-events: none;
+  z-index: 1;
+  animation: circle-out var(--layout-transition-extra-fast) 1;
+}
+
+.tab-nav-indicator-active .tab-nav-indicator {
+  animation: none;
+  transition: left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast);
+}
+
 .tab-content {
   grid-area: content;
 }
diff --git a/src/component/tab/index.js b/src/component/tab/index.js
index 8557ecee..7917f396 100644
--- a/src/component/tab/index.js
+++ b/src/component/tab/index.js
@@ -14,7 +14,7 @@ export const Tab = function({
   this.element = {
     tab: node('div|class:tab'),
     nav: node('div|class:tab-nav'),
-    group: node('div|class:tab-nav-group form-group form-group-horizontal form-group-block'),
+    group: node('div|class:tab-nav-group'),
     indicator: node('div|class:tab-nav-indicator'),
     content: node('div|class:tab-content')
   };
@@ -74,8 +74,10 @@ export const Tab = function({
 
           const itemBox = item.toggle.button.getBoundingClientRect();
 
-          this.element.tab.style.setProperty('--tab-indicator-left', itemBox.left - navBox.left);
-          this.element.tab.style.setProperty('--tab-indicator-width', itemBox.width);
+          this.element.tab.style.setProperty('--tab-indicator-top', Math.round(itemBox.top - navBox.top));
+          this.element.tab.style.setProperty('--tab-indicator-left', Math.round(itemBox.left - navBox.left));
+          this.element.tab.style.setProperty('--tab-indicator-width', Math.round(itemBox.width));
+          this.element.tab.style.setProperty('--tab-indicator-height', Math.round(itemBox.height));
 
 
         };