Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

doc: fix bullet(arrow) alignment vertically in documentation #52193

Merged
merged 2 commits into from Mar 27, 2024
Merged

doc: fix bullet(arrow) alignment vertically in documentation #52193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a9bc846
doc: fix bullet(arrow) alignment vertically
Mar 23, 2024
448b609
doc,tools: replace bullet triangle with pure css design
Mar 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
45 changes: 25 additions & 20 deletions doc/api_assets/style.css
View file
Open in desktop
Expand Up @@ -182,27 +182,32 @@ li.picker-header {
position: relative;
}

li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow {
width: 1.5ch;
height: 1.5em;
}

li.picker-header .collapsed-arrow {
display: inline-block;
}

li.picker-header .expanded-arrow {
display: none;
}

li.picker-header.expanded .collapsed-arrow,
:root:not(.has-js) li.picker-header:hover .collapsed-arrow {
display: none;
}

li.picker-header.expanded .expanded-arrow,
:root:not(.has-js) li.picker-header:hover .expanded-arrow {
li.picker-header .picker-arrow {
display: inline-block;
width: .6rem;
height: .6rem;
border-top: .3rem solid transparent;
border-bottom: .3rem solid transparent;
border-left: .6rem solid var(--color-links);
border-right: none;
margin: 0 .2rem .05rem 0;
}

li.picker-header a:focus .picker-arrow,
li.picker-header a:active .picker-arrow,
li.picker-header a:hover .picker-arrow {
border-left: .6rem solid var(--white);
}

li.picker-header.expanded a:focus .picker-arrow,
li.picker-header.expanded a:active .picker-arrow,
li.picker-header.expanded a:hover .picker-arrow,
:root:not(.has-js) li.picker-header:hover .picker-arrow {
border-top: .6rem solid var(--white);
border-bottom: none;
border-left: .35rem solid transparent;
border-right: .35rem solid transparent;
margin-bottom: 0;
}

li.picker-header.expanded > a,
Expand Down
2 changes: 1 addition & 1 deletion doc/template.html
View file
Open in desktop
Expand Up @@ -60,7 +60,7 @@ <h1>Node.js __VERSION__ documentation</h1>
__ALTDOCS__
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Options
</a>

Expand Down
6 changes: 3 additions & 3 deletions tools/doc/html.mjs
View file
Open in desktop
Expand Up @@ -528,7 +528,7 @@ function altDocs(filename, docCreated, versions) {
return list ? `
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Other versions
</a>
<div class="picker"><ol id="alt-docs">${list}</ol></div>
Expand Down Expand Up @@ -558,7 +558,7 @@ function gtocPicker(id) {
return `
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Index
</a>

Expand All @@ -575,7 +575,7 @@ function tocPicker(id, content) {
return `
<li class="picker-header">
<a href="#">
<span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
<span class="picker-arrow"></span>
Table of contents
</a>

Expand Down