doc: fix arrow vertical alignment in HTML version

This commit fixes the alignment of the bullet points (green arrow) under
'Node.js <version> documentation' by drawing a triangle in CSS instead
of using an ASCII char.

PR-URL: https://github.com/nodejs/node/pull/52193
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>
This commit is contained in:
Akash Yeole authored and GitHub committed 2024-03-28 00:35:22 +01:00
1 parent 4d8602046e
commit 27493a1dd7
3 files changed
+25 -20

No files matched your search

+21 -16
View File
@@ -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 {
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 .expanded-arrow {
display: none;
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 .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 {
display: inline-block;
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,
+1 -1
View File
@@ -60,7 +60,7 @@
__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>
+3 -3
View File
@@ -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>
@@ -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>
@@ -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>