Merge pull request #44527 from Subhajit009iitr/searchbar

Fix search-icon when typing

Author: k8s-ci-robot

assets/scss/_custom.scss

@@ -1003,3 +1003,32 @@ div.alert > em.javascript-required {
         margin: 0.25em;
     }
 }
+
+// Adjust Search-bar search-icon
+.search-bar {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid #4c4c4c;
+  border-radius: 20px; 
+  vertical-align: middle;
+  flex-grow: 1;
+  overflow-x: hidden;
+  width: auto;
+}
+
+.search-bar:focus-within {
+  border: 2.5px solid rgba(47, 135, 223, 0.7);
+}
+
+.search-bar i.search-icon {
+  padding: .5em .5em .5em .75em;
+  opacity: .75;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  padding: .5em 0 .5em 0;
+}

layouts/partials/search-input.html

@@ -1,30 +1,36 @@
 {{ if or .Site.Params.gcs_engine_id .Site.Params.algolia_docsearch }}
+<div class="search-bar">
+  <i class="search-icon fas fa-search"></i>
   <input
     type="search"
-    class="form-control td-search-input"
-    placeholder="&#xf002; {{ T "ui_search_placeholder" }}"
+    class="search-input td-search-input" 
+    placeholder="{{ T "ui_search_placeholder" }}"
     aria-label="{{ T "ui_search_placeholder" }}"
     autocomplete="off"
   >
+</div>
 {{ else if .Site.Params.offlineSearch }}
-  <div id="search-nav-container">
-    <input
-      type="search"
-      id="search-input"
-      autocomplete="off"
-      class="form-control td-search-input"
-      placeholder="&#xf002 {{ T "ui_search_placeholder" }}"
-      autocomplete="off"
-    >
-    <div id="search-results" class="container"></div>
-  </div>
+<div class="search-bar" id="search-nav-container">
+  <i class="search-icon fas fa-search"></i>
+  <input
+    type="search"
+    class="search-input td-search-input" 
+    id="search-input"
+    placeholder="{{ T "ui_search_placeholder" }}"
+    aria-label="{{ T "ui_search_placeholder" }}"
+    autocomplete="off"
+  >
+</div>
 {{ else if .Site.Params.k8s_search }}
+<div class="search-bar">
+  <i class="search-icon fas fa-search"></i>
   <input
     type="search"
-    class="form-control td-search-input"
     name="q"
-    placeholder="&#xf002 {{ T "ui_search_placeholder" }}"
+    class="search-input td-search-input" 
+    placeholder="{{ T "ui_search_placeholder" }}"
     aria-label="{{ T "ui_search_placeholder" }}"
     autocomplete="off"
   >
-{{ end }}
+</div>
+{{ end }}