Skip to content

Commit

Permalink
rustdoc: animate the :target highlight
Browse files Browse the repository at this point in the history
This approach is, roughly, based on how Discourse does it.
It came up while discussing some other possible sidebar changes,
as a design that made rapid scanning easier while avoiding the
inherent trade-offs in summarizing.
  • Loading branch information
notriddle committed Aug 20, 2024
1 parent 5601d14 commit 9d7574f
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 1 deletion.
13 changes: 13 additions & 0 deletions src/librustdoc/html/static/css/rustdoc.css
Original file line number Diff line number Diff line change
Expand Up @@ -1547,10 +1547,23 @@ instead, we check that it's not a "finger" cursor.
margin-left: 24px;
}

@keyframes targetfadein {
from {
background-color: var(--main-background-color);
}
10% {
background-color: var(--target-border-color);
}
to {
background-color: var(--target-background-color);
}
}

:target {
padding-right: 3px;
background-color: var(--target-background-color);
border-right: 3px solid var(--target-border-color);
animation: 0.65s cubic-bezier(0, 0, 0.1, 1.0) 0.1s targetfadein;
}

.code-header a.tooltip {
Expand Down
2 changes: 1 addition & 1 deletion tests/rustdoc-gui/target.goml
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ define-function: (
[theme, background, border],
block {
call-function: ("switch-theme", {"theme": |theme|})
assert-css: ("#method\.a_method:target", {
wait-for-css: ("#method\.a_method:target", {
"background-color": |background|,
"border-right": "3px solid " + |border|,
})
Expand Down

0 comments on commit 9d7574f

Please sign in to comment.