mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rustdoc: animate the :target highlight

Browse Source 
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.
This commit is contained in:
Michael Howell 2024-08-19 16:16:34 -07:00
parent 5601d14249
commit 9d7574f9b0
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/librustdoc/html/static/css/rustdoc.css
View File

@ -1547,10 +1547,23 @@ instead, we check that it's not a "finger" cursor.
margin-left: 24px; 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 { :target {
padding-right: 3px; padding-right: 3px;
background-color: var(--target-background-color); background-color: var(--target-background-color);
border-right: 3px solid var(--target-border-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 { .code-header a.tooltip {

2
tests/rustdoc-gui/target.goml
View File

@ -11,7 +11,7 @@ define-function: (
[theme, background, border], [theme, background, border],
block { block {
call-function: ("switch-theme", {"theme": |theme|}) call-function: ("switch-theme", {"theme": |theme|})
assert-css: ("#method\.a_method:target", { wait-for-css: ("#method\.a_method:target", {
"background-color": |background|, "background-color": |background|,
"border-right": "3px solid " + |border|, "border-right": "3px solid " + |border|,
}) })