blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/SidebarTab: make the button squishy

Browse source
This commit is contained in:
wukko 2024-07-10 21:46:14 +06:00
parent f498ea65b0
commit 3a531713d0
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
web/src/components/sidebar/SidebarTab.svelte
View file

@ -15,7 +15,7 @@
$: isTabActive = currentTab === baseTabPath;
const showTab = (e: HTMLElement | undefined) => {
const showTab = (e: HTMLElement) => {
if (e) {
e.scrollIntoView({
inline: firstTabPage.includes(tabName) ? "end" : "start",
@ -24,7 +24,7 @@
}
};
$: if (isTabActive) {
$: if (isTabActive && tab) {
showTab(tab);
}
</script>
@ -56,6 +56,8 @@
opacity: 0.8;
height: fit-content;
border-radius: var(--border-radius);
will-change: transform;
transition: transform 0.2s;
}
.sidebar-tab :global(svg) {
@ -68,14 +70,31 @@
color: var(--sidebar-bg);
background: var(--sidebar-highlight);
opacity: 1;
animation: pressButton 0.2s;
transition: none;
}
.sidebar-tab:active:not(.active) {
transform: scale(0.95);
}
@keyframes pressButton {
0% {
transform: scale(0.95)
}
50% {
transform: scale(1.01)
}
100% {
transform: scale(1)
}
}
@media (hover: hover) {
.sidebar-tab:active:not(.active) {
opacity: 1;
background-color: var(--sidebar-hover);
}
@media (hover: hover) {
.sidebar-tab:hover:not(.active) {
opacity: 1;
background-color: var(--sidebar-hover);
@ -91,5 +110,21 @@
.sidebar-tab.active {
z-index: 2;
}
.sidebar-tab:active:not(.active) {
transform: scale(0.9);
}
@keyframes pressButton {
0% {
transform: scale(0.9)
}
60% {
transform: scale(1.01)
}
100% {
transform: scale(1)
}
}
}
</style>