Rooba
/
nightTab
mirror of https://github.com/zombieFox/nightTab.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve tab nav buttons and indicator

This commit is contained in:
zombieFox 2021-09-02 22:36:59 +01:00
parent 9940266689
commit 91c44bc466
2 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/component/tab/index.css
View File

@ -1,7 +1,10 @@
:root { :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-left: 0;
--tab-indicator-width: 0; --tab-indicator-width: 0;
--tab-indicator-height: 0;
} }
.tab { .tab {
@ -10,39 +13,30 @@
grid-template-areas: grid-template-areas:
"nav" "nav"
"content"; "content";
gap: var(--tab-space); gap: calc((var(--tab-size) / 4) * 1em);
position: relative; position: relative;
width: 100%; width: 100%;
} }
.tab-nav { .tab-nav {
background-color: hsl(var(--theme-primary-020)); 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; grid-area: nav;
display: flex; display: flex;
position: relative; position: relative;
transition: background-color var(--layout-transition-extra-fast); transition: background-color var(--layout-transition-extra-fast);
} }
.tab-nav>* { .tab-nav-group {
flex: 1 1 50%; flex-grow: 1;
display: flex;
flex-direction: row;
gap: calc((var(--tab-size) / 4) * 0.125em);
} }
.tab-nav-indicator { .tab-nav-button {
background-color: rgb(var(--theme-accent)); flex-grow: 1;
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 { .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); 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 { .tab-content {
grid-area: content; grid-area: content;
} }

8
src/component/tab/index.js
View File

@ -14,7 +14,7 @@ export const Tab = function({
this.element = { this.element = {
tab: node('div|class:tab'), tab: node('div|class:tab'),
nav: node('div|class:tab-nav'), 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'), indicator: node('div|class:tab-nav-indicator'),
content: node('div|class:tab-content') content: node('div|class:tab-content')
}; };
@ -74,8 +74,10 @@ export const Tab = function({
const itemBox = item.toggle.button.getBoundingClientRect(); 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-top', Math.round(itemBox.top - navBox.top));
this.element.tab.style.setProperty('--tab-indicator-width', itemBox.width); 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));
}; };