mirror of
https://github.com/zombieFox/nightTab.git
synced 2025-06-30 14:21:05 +02:00
improve tab nav buttons on small screens
This commit is contained in:
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-nav-button {
|
@media (min-width: 600px) {
|
||||||
background-color: transparent;
|
.tab-nav-button {
|
||||||
z-index: 2;
|
flex-basis: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
|
Reference in New Issue
Block a user