add searchbar basic style

Author: Filip Łukasik

scaladoc-js/main/src/searchbar/SearchbarComponent.scala

@@ -172,7 +172,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
     icon
 
   private val inputElem: html.Input =
-    input(id := "scaladoc-searchbar-input").tap { element =>
+    input(id := "scaladoc-searchbar-input", `type` := "search").tap { element =>
       element.addEventListener("input", { e =>
         val inputValue = e.target.asInstanceOf[html.Input].value
         if inputValue.isEmpty then showHints()

scaladoc-js/main/src/versions-dropdown/DropdownHandler.scala

@@ -25,7 +25,7 @@ class DropdownHandler:
     val ver = JSON.parse(json).asInstanceOf[Versions]
     val ddc = document.getElementById("version-dropdown")
     for (k, v) <- ver.versions do
-      val child = a(cls := "text-button", href := v)(k)
+      var child = a(cls := "text-button", href := v)(k)
       ddc.appendChild(child)
 
   private def disableButton() =
@@ -57,6 +57,7 @@ class DropdownHandler:
 
   document.addEventListener("click", (e: Event) => {
     document.getElementById("version-dropdown").classList.remove("expanded")
+    document.getElementById("dropdown-trigger").classList.remove("selected")
   })
 
   document.getElementById("version-dropdown").asInstanceOf[html.Span].addEventListener("click", (e: Event) => e.stopPropagation())
@@ -69,6 +70,7 @@ def dropdownHandler(e: Event) =
   if document.getElementById("version-dropdown").getElementsByTagName("a").size > 0 &&
      window.getSelection.toString.length == 0 then
     document.getElementById("version-dropdown").classList.toggle("expanded")
+    document.getElementById("dropdown-trigger").classList.toggle("selected")
 
 @JSExportTopLevel("filterFunction")
 def filterFunction() =

scaladoc/resources/dotty_res/images/icon-buttons/close/dark/default.svg

@@ -48,3 +48,19 @@
 .theme-dark .text-button.with-arrow::after {
   content: url("../../../../images/icon-buttons/arrow-down/dark/default.svg");
 }
+
+.text-button.with-arrow:hover::after {
+  content: url("../../../../images/icon-buttons/arrow-down/light/hover.svg");
+}
+
+.theme-dark .text-button.with-arrow:hover::after {
+  content: url("../../../../images/icon-buttons/arrow-down/dark/hover.svg");
+}
+
+.text-button.with-arrow.selected::after {
+  content: url("../../../../images/icon-buttons/arrow-down/light/selected.svg");
+}
+
+.theme-dark .text-button.with-arrow.selected::after {
+  content: url("../../../../images/icon-buttons/arrow-down/dark/selected.svg");
+}

scaladoc/resources/dotty_res/images/icon-buttons/close/light/default.svg

@@ -10,16 +10,56 @@
 
 #scaladoc-searchbar {
   z-index: 5;
+  width: calc(125 * var(--base-spacing));
 }
 
 #scaladoc-searchbar-input {
   width: 100%;
   background-color: var(--action-primary-background-default-solid);
+  color: var(--action-primary-content-active);
   background-image: url("../../../images/icon-buttons/search/dark/default.svg");
   background-repeat: no-repeat;
   padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing))
     calc(2 * var(--base-spacing)) calc(5 * var(--base-spacing));
   border-radius: 4px;
   background-size: 16px;
   background-position: 10px 15px;
+  border: none;
+}
+
+#scaladoc-searchbar-input:focus-visible {
+  border: none;
+  outline: none;
+}
+
+#scaladoc-searchbar-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  height: 1em;
+  width: 1em;
+  border-radius: 50em;
+  background: url("../../../images/icon-buttons/close/light/default.svg")
+    no-repeat 50% 50%;
+  background-size: contain;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.theme-dark #scaladoc-searchbar-input::-webkit-search-cancel-button {
+  background: url("../../../images/icon-buttons/close/dark/default.svg")
+    no-repeat 50% 50%;
+}
+
+#scaladoc-searchbar-input:focus::-webkit-search-cancel-button {
+  opacity: 1;
+  pointer-events: all;
+}
+
+#scaladoc-searchbar-input.dark::-webkit-search-cancel-button {
+  filter: invert(1);
+}
+
+#scaladoc-searchbar-results {
+  background-color: var(--background-default);
+  border-radius: 4px;
+  margin-top: calc(1.5 * var(--base-spacing));
 }

scaladoc/resources/dotty_res/styles/theme/components/button/text-button.css

@@ -333,6 +333,8 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       dottyRes("images/icon-buttons/arrow-right/light/hover.svg"),
       dottyRes("images/icon-buttons/arrow-right/light/selected.svg"),
       dottyRes("images/icon-buttons/arrow-right/light/default.svg"),
+      dottyRes("images/icon-buttons/close/light/default.svg"),
+      dottyRes("images/icon-buttons/close/dark/default.svg"),
       searchData(pages),
       scastieConfiguration(),
     )