Commit 27493a1
authored
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: #52193
Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com>
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Moshe Atlow <moshe@atlow.co.il>1 parent 4d86020 commit 27493a1
3 files changed
Lines changed: 29 additions & 24 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -182,27 +182,32 @@ li.picker-header { | |||
| 182 | 182 | position: relative; | |
| 183 | 183 | } | |
| 184 | 184 | ||
| 185 | - li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow { | ||
| 186 | - width: 1.5ch; | ||
| 187 | - height: 1.5em; | ||
| 188 | - } | ||
| 189 | - | ||
| 190 | - li.picker-header .collapsed-arrow { | ||
| 191 | - display: inline-block; | ||
| 192 | - } | ||
| 193 | - | ||
| 194 | - li.picker-header .expanded-arrow { | ||
| 195 | - display: none; | ||
| 196 | - } | ||
| 197 | - | ||
| 198 | - li.picker-header.expanded .collapsed-arrow, | ||
| 199 | - :root:not(.has-js) li.picker-header:hover .collapsed-arrow { | ||
| 200 | - display: none; | ||
| 201 | - } | ||
| 202 | - | ||
| 203 | - li.picker-header.expanded .expanded-arrow, | ||
| 204 | - :root:not(.has-js) li.picker-header:hover .expanded-arrow { | ||
| 185 | + li.picker-header .picker-arrow { | ||
| 205 | 186 | display: inline-block; | |
| 187 | + width: .6rem; | ||
| 188 | + height: .6rem; | ||
| 189 | + border-top: .3rem solid transparent; | ||
| 190 | + border-bottom: .3rem solid transparent; | ||
| 191 | + border-left: .6rem solid var(--color-links); | ||
| 192 | + border-right: none; | ||
| 193 | + margin: 0 .2rem .05rem 0; | ||
| 194 | + } | ||
| 195 | + | ||
| 196 | + li.picker-header a:focus .picker-arrow, | ||
| 197 | + li.picker-header a:active .picker-arrow, | ||
| 198 | + li.picker-header a:hover .picker-arrow { | ||
| 199 | + border-left: .6rem solid var(--white); | ||
| 200 | + } | ||
| 201 | + | ||
| 202 | + li.picker-header.expanded a:focus .picker-arrow, | ||
| 203 | + li.picker-header.expanded a:active .picker-arrow, | ||
| 204 | + li.picker-header.expanded a:hover .picker-arrow, | ||
| 205 | + :root:not(.has-js) li.picker-header:hover .picker-arrow { | ||
| 206 | + border-top: .6rem solid var(--white); | ||
| 207 | + border-bottom: none; | ||
| 208 | + border-left: .35rem solid transparent; | ||
| 209 | + border-right: .35rem solid transparent; | ||
| 210 | + margin-bottom: 0; | ||
| 206 | 211 | } | |
| 207 | 212 | ||
| 208 | 213 | li.picker-header.expanded > a, | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -60,7 +60,7 @@ <h1>Node.js __VERSION__ documentation</h1> | |||
| 60 | 60 | __ALTDOCS__ | |
| 61 | 61 | <li class="picker-header"> | |
| 62 | 62 | <a href="#"> | |
| 63 | - <span class="collapsed-arrow">►</span><span class="expanded-arrow">▼</span> | ||
| 63 | + <span class="picker-arrow"></span> | ||
| 64 | 64 | Options | |
| 65 | 65 | </a> | |
| 66 | 66 | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -528,7 +528,7 @@ function altDocs(filename, docCreated, versions) { | |||
| 528 | 528 | return list ? ` | |
| 529 | 529 | <li class="picker-header"> | |
| 530 | 530 | <a href="#"> | |
| 531 | - <span class="collapsed-arrow">►</span><span class="expanded-arrow">▼</span> | ||
| 531 | + <span class="picker-arrow"></span> | ||
| 532 | 532 | Other versions | |
| 533 | 533 | </a> | |
| 534 | 534 | <div class="picker"><ol id="alt-docs">${list}</ol></div> | |
@@ -558,7 +558,7 @@ function gtocPicker(id) { | |||
| 558 | 558 | return ` | |
| 559 | 559 | <li class="picker-header"> | |
| 560 | 560 | <a href="#"> | |
| 561 | - <span class="collapsed-arrow">►</span><span class="expanded-arrow">▼</span> | ||
| 561 | + <span class="picker-arrow"></span> | ||
| 562 | 562 | Index | |
| 563 | 563 | </a> | |
| 564 | 564 | ||
@@ -575,7 +575,7 @@ function tocPicker(id, content) { | |||
| 575 | 575 | return ` | |
| 576 | 576 | <li class="picker-header"> | |
| 577 | 577 | <a href="#"> | |
| 578 | - <span class="collapsed-arrow">►</span><span class="expanded-arrow">▼</span> | ||
| 578 | + <span class="picker-arrow"></span> | ||
| 579 | 579 | Table of contents | |
| 580 | 580 | </a> | |
| 581 | 581 | ||
0 commit comments