search improvement on mobile

opentofu · Sep 19, 2023 · 4239d3f · 4239d3f
1 parent 5c78807
commit 4239d3f
Showing 1 changed file with 25 additions and 1 deletion.
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -43,9 +43,33 @@ body {
   display: none;
 }
 
+html[data-theme="light"] .navbar__search {
+  color: theme("colors.gray.700");
+}
+
+html[data-theme="dark"] .navbar__search {
+  color: theme("colors.gray.200");
+}
+
 /* TODO: Replace with Algolia search icon */
 .navbar__search-input {
-  @apply w-32 lg:w-48 h-10;
+  @apply w-32 lg:w-48 h-10 xs:pl-8;
+
+  &:focus {
+    @apply xs:pl-9;
+  }
+
+  &:not(:placeholder-shown) {
+    @apply xs:pl-9 pr-8;
+
+    @media (max-width: 576px) {
+      width: 8rem !important;
+    }
+  }
+}
+
+button[class^="searchClearButton"] {
+  display: block !important;
 }
 
 div[class^="searchHintContainer"] {