radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-10-18 19:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Spin the sidebar section header's icon on hover

Browse Source
This commit is contained in:
Brandon Oxendine
2026-09-21 18:14:24 +02:00
committed by Rūdolfs Ošiņš
parent 892869637f
commit 8aa54c065d
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SidebarRepoList.svelte
+12 -6
View File
@@ -509,7 +509,7 @@
.section-header {
font: var(--txt-body-m-regular);
font-variant-ligatures: none;
color: var(--color-text-secondary);
color: var(--color-text-primary);
/* No bottom padding: the 2rem action buttons already leave a row's worth
of slack under the label. */
padding: 1rem 0 0 0.5rem;
@@ -826,26 +826,32 @@
off the label so the buttons beside it don't trigger it. */
.icon-stack {
display: grid;
/* Sized and centred so both icons pivot about the same point. */
width: 1rem;
place-items: center;
}
.icon-default,
.icon-hover {
grid-area: 1 / 1;
transition: opacity 150ms ease;
/* Promoted for good, for the same reason the filter button is: the fade
puts these on a layer of their own only while it runs, and handing them
back at the end re-rounds their position by a pixel. */
will-change: opacity;
transition:
opacity 150ms ease,
transform 150ms ease;
/* Promoted for good, for the same reason `.filter-action` is. */
will-change: opacity, transform;
}
.icon-hover {
opacity: 0;
transform: rotate(-90deg);
}
.section-header-label:hover .icon-default,
.section-header:focus-visible .icon-default {
opacity: 0;
transform: rotate(90deg);
}
.section-header-label:hover .icon-hover,
.section-header:focus-visible .icon-hover {
opacity: 1;
transform: rotate(0);
}
.menu-item {