doc: fix arrow vertical alignment in HTML version

akashyeole · marco-ippolito · commit 2509f3be184b · 2024-05-03T08:30:26.000+02:00
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>
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -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,
diff --git a/doc/template.html b/doc/template.html
@@ -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>
         
diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
@@ -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>
 
