From 27dad9e286d534ba79003b555e9792a2cb233f02 Mon Sep 17 00:00:00 2001
From: Akash Yeole <akashyeole02@gmail.co>
Date: Sat, 23 Mar 2024 21:00:52 +0530
Subject: [PATCH] doc,tools: build bullet triangle in css and remove exsiting
 triangle symbol

Removed the hardcoded triangle from doc/template.html and tools/doc/html.mjs and placed the new <span> element which takes the shape of triangle using the new style defined in css.
---
 doc/api_assets/style.css | 47 +++++++++++++++++++++-------------------
 doc/template.html        |  2 +-
 tools/doc/html.mjs       |  6 ++---
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index 4b723852501f87..073d202b3cbdd0 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -182,29 +182,32 @@ li.picker-header {
   position: relative;
 }
 
-li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow {
-  position: relative;
-  bottom: 0.2rem;
-  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
index 658c8d94cd0723..ab8be0e747f492 100644
--- 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
index 95782efe03d554..ff1c6854b58e22 100644
--- 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>