Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

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