BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): spring the active pill in tab strips

Browse Source 
Give the active-pill tab strips the lifted, physical feel of a spring
capsule: the pill now travels with a slight overshoot instead of jumping,
leans toward a neighbouring tab on press, and sits on a raised surface with
a soft ambient shadow rather than a hard border.

Transitions are opt-in per switch so first measurement and container
resizes still snap into place, and reduced-motion disables them.

Also drop the icons from the git commit/update/pr switcher, along with the
now-unused iconOnlyActiveTab prop.
This commit is contained in:
Bohdan Triapitsyn
2026-07-25 15:05:28 +03:00
parent 248e403977
commit aab9f3bca3
4 changed files with 103 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/index.css
+34
View File
@@ -933,6 +933,40 @@ html:not(.dark) .chat-scroll {
}
}
/*
* Active pill indicator motion. Transitions are opt-in via the --is-animated
* modifier so first measurement and container resizes reposition instantly
* instead of sliding in from the track origin.
*/
.pill-tabs__indicator--is-animated {
/* Slight overshoot on travel reads as a spring; size stays non-overshooting
so wide/narrow label swaps do not wobble. */
transition:
transform 320ms cubic-bezier(0.34, 1.3, 0.64, 1),
width 260ms cubic-bezier(0.22, 1, 0.36, 1),
height 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pill-tabs__button {
transition-property: color, transform;
transition-duration: 150ms;
transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.pill-tabs__button:active {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.pill-tabs__indicator--is-animated {
transition: none;
}
.pill-tabs__button:active {
transform: none;
}
}
/* Text font */
.markdown-content {
font-family: var(--font-sans);