Skip to content

Commit

Permalink
Rollup merge of rust-lang#129284 - notriddle:notriddle/animate-target…
Browse files Browse the repository at this point in the history
…=light, r=GuillaumeGomez

rustdoc: animate the `:target` highlight

This approach is, roughly, based on how Discourse does it. It came up while discussing [some other possible sidebar changes](https://rust-lang.zulipchat.com/#narrow/stream/266220-t-rustdoc/topic/Moving.20deprecated.20items.20out.20of.20the.20way), as a design that made rapid scanning easier while avoiding the inherent trade-offs in summarizing.

https://github.com/user-attachments/assets/f7a8fec3-70a5-40a1-92ea-bfdffbd61c22
  • Loading branch information
jieyouxu committed Aug 20, 2024
2 parents c7efc95 + 9d7574f commit a65e367
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 a65e367

Please sign in to comment.