1
Fork 0

Rollup merge of #102799 - rol1510:issue-100421-fix, r=notriddle

rustdoc: remove hover gap in file picker

Fixes #100421

Before:
<img width="385" alt="image" src="https://user-images.githubusercontent.com/29011024/194677087-fda2db3e-126d-47cf-8152-c554e3c25a54.png">

After:
<img width="388" alt="image" src="https://user-images.githubusercontent.com/29011024/194676774-7a50ace9-4060-492e-849a-ad85d9132630.png">

longe module names also wrap nicely:
<img width="389" alt="image" src="https://user-images.githubusercontent.com/29011024/194678516-f2497b3a-8d50-439b-9d69-3fa9fb43b84d.png">

Also if you zoom out very far, the arrows did move to the left, in relation to the text below. This is now also fixed.
<img width="818" alt="image" src="https://user-images.githubusercontent.com/29011024/194677652-cfdf129d-f5db-4f26-ac3c-3d0853e89619.png">

CSS doesn't have a lot of controll over the `::marker` element, so now the `::after` element is used to draw the arrows.

Now the whole line is clickable wihtout gaps.
This commit is contained in:
Yuki Okushi 2022-10-10 00:09:41 +09:00 committed by GitHub
commit fb27d01922
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1494,10 +1494,31 @@ details.dir-entry {
padding-left: 4px;
}
details.dir-entry > summary::after {
content: " ►";
position: absolute;
left: -15px;
top: 0px;
font-size: 80%;
padding: 2px 0px;
/* set width to cover gap between arrow and text */
width: 25px;
}
details[open].dir-entry > summary::after {
content: " ▼";
}
details.dir-entry > summary::-webkit-details-marker,
details.dir-entry > summary::marker {
display: none;
}
details.dir-entry > summary {
margin: 0 0 0 13px;
list-style-position: outside;
list-style: none;
cursor: pointer;
position: relative;
}
details.dir-entry div.folders, details.dir-entry div.files {