Fix search input styles on mobile

steache · Feb 9, 2023 · 60050da · 60050da
1 parent 51e2d71
commit 60050da
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -120,6 +120,10 @@ const config = {
             className: "nav-github-stars",
             position: "right",
           },
+          {
+            type: "search",
+            position: "right",
+          },
           {
             href: "https://github.com/dragonflydb/dragonfly/blob/main/docs/quick-start/README.md",
             label: "Get Started",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -161,7 +161,7 @@ a > svg[class*="ExternalLink"] {
 }
 
 .nav-cta {
-  padding: 8px 20px;
+  padding: 8px 20px !important;
   margin-left: 8px;
   font-family: var(--ifm-heading-font-family);
   font-weight: 700;
@@ -186,11 +186,30 @@ a > svg[class*="ExternalLink"] {
 /* Search */
 .navbar__search {
   margin: 0 !important;
+
+  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="white" opacity="0.8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
 }
 
 .navbar__search-input {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  height: auto !important;
+  --ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.1);
+
+  padding-top: 13px;
+  padding-bottom: 13px;
   border-radius: 6px;
+  height: auto !important;
+  transition: 0.2s;
+  font-family: inherit;
+}
+
+@media (max-width: 576px) {
+  .navbar__search-input:focus {
+    --ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200);
+  }
+
+  .navbar__search-input:not(:focus) {
+    border-radius: 50%;
+    padding-right: 0.2rem;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
 }