handle arrow pseudoclasses

Author: Filip Łukasik

scaladoc/resources/dotty_res/images/icon-buttons/arrow-down/dark/Ankieta dla klienta.template

@@ -23,7 +23,11 @@ window.addEventListener("DOMContentLoaded", () => {
     e.stopPropagation()
   });
 
-  document.querySelectorAll(".nh").forEach(el => el.addEventListener('click', () => el.lastChild.click()))
+  document.querySelectorAll(".nh").forEach(el => el.addEventListener('click', () => {
+    el.lastChild.click()
+    el.first.addClass("expanded")
+    el.parent.addClass("expanded")
+  }))
 
   $('.names .tab').on('click', function () {
     parent = $(this).parents(".tabs").first()

scaladoc/resources/dotty_res/images/icon-buttons/arrow-down/dark/active.svg

@@ -20,6 +20,7 @@
   padding-bottom: calc(1.25 * var(--base-spacing));
   padding-right: calc(1.25 * var(--base-spacing));
   overflow: hidden;
+  position: relative;
 }
 
 .nh > a {
@@ -99,7 +100,7 @@
 }
 
 .nh.selected > a {
-  color: var(--action-primary-content-selected);
+  color: var(--action-primary-content-selected) !important;
 }
 
 .nh.cs > a {
@@ -112,11 +113,15 @@
   color: transparent;
 }
 
-span.ar {
+button.ar {
   cursor: pointer;
   position: absolute;
 }
 
+button.ar:active ~ a:not(.nh:active) {
+  color: var(--action-primary-content-default);
+}
+
 .nh a {
   position: relative;
 }

scaladoc/resources/dotty_res/scripts/ux.js

@@ -123,7 +123,7 @@ class HtmlRenderer(rootPackage: Member, members: Map[DRI, Member])(using ctx: Do
         }
         Seq(
           span(cls := s"nh " + attrs.mkString(" "))(
-            if withArrow then Seq(span(cls := "ar icon-button")) else Nil,
+            if withArrow then Seq(button(cls := s"ar icon-button ${if isSelected || expanded then "expanded" else ""}")) else Nil,
             a(href := pathToPage(pageLink.dri, nav.link.dri))(icon, span(nav.link.name))
           )
         )