Skip to content

Commit

Permalink
Merge pull request #478 from Sma1lboy/feat-adding-border-active-highl…
Browse files Browse the repository at this point in the history
…ight-color

feat: add active border highlight for search bar input
weareoutman authored Jan 14, 2025

Verified

This commit was signed with the committer’s verified signature.
andrewb1269hg Andrew Brandt
2 parents 1a4af21 + 0c1a816 commit 06ddff2
Showing 3 changed files with 8 additions and 2 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.:

Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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}

0 comments on commit 06ddff2

Please sign in to comment.