Merge pull request #478 from Sma1lboy/feat-adding-border-active-highlight-color

feat: add active border highlight for search bar input

Author: weareoutman

README.md

@@ -151,6 +151,7 @@ This theme is shipped with polished styles just like the Algolia Search on the D
 | --search-local-muted-color       | `#969faf`                                                              | `var(--ifm-color-secondary-darkest)`                    |
 | --search-local-icon-stroke-width | `1.4`                                                                  | -                                                       |
 | --search-local-hit-active-color  | `var(--ifm-color-white)`                                               | -                                                       |
+| --search-local-input-active-border-color  | `var(--ifm-color-primary)`   | -              | 
 
 E.g.:
 

docusaurus-search-local/src/client/theme/SearchBar/SearchBar.module.css

@@ -16,6 +16,11 @@
   padding: var(--search-local-spacing, 12px);
 }
 
+.searchInput:focus {
+  outline: 2px solid var(--search-local-input-active-border-color, var(--ifm-color-primary));
+  outline-offset: 0px;
+}
+
 @media not (max-width: 996px) {
   .searchBar.searchBarLeft .dropdownMenu {
     left: 0 !important;

docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx

@@ -432,14 +432,14 @@ export default function SearchBar({
       // Manually make the search bar be LTR even if in RTL
       dir="ltr"
     >
-      <input
+    <input
         placeholder={translate({
           id: "theme.SearchBar.label",
           message: "Search",
           description: "The ARIA label and placeholder for search button",
         })}
         aria-label="Search"
-        className="navbar__search-input"
+        className={`navbar__search-input ${styles.searchInput}`}
         onMouseEnter={onInputMouseEnter}
         onFocus={onInputFocus}
         onBlur={onInputBlur}