extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-30 22:30:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve tab nav buttons on small screens

Browse Source
This commit is contained in:
zombieFox
2021-09-05 11:49:04 +01:00
parent e9f40ded2e
commit 6aa16dc26a
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,16 +32,21 @@
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
gap: calc((var(--tab-size) / 4) * 0.125em); gap: calc((var(--tab-size) / 4) * 0.125em);
} }
.tab-nav-button { .tab-nav-button {
background-color: transparent;
flex-grow: 1; flex-grow: 1;
flex-basis: 25%;
z-index: 2;
} }
@media (min-width: 600px) {
.tab-nav-button { .tab-nav-button {
background-color: transparent; flex-basis: auto;
z-index: 2; }
} }
.tab-nav-button.active { .tab-nav-button.active {
@ -65,7 +70,7 @@
.tab-nav-indicator-active .tab-nav-indicator { .tab-nav-indicator-active .tab-nav-indicator {
animation: none; animation: none;
transition: left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast); transition: top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast);
} }
.tab-content { .tab-content {