diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2021-08-23 11:53:44 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-08-23 14:53:44 -0400 |
| commit | e03f39a1b3e8e80a321d26c5dc8a913955d9a46e (patch) | |
| tree | 8c2b44534d1674af7d9f26fc7a038cebe3d1d128 | |
| parent | d51e0f4fef5a19eb82c2e02c41578bd908b39720 (diff) | |
| download | astro-e03f39a1b3e8e80a321d26c5dc8a913955d9a46e.tar.gz astro-e03f39a1b3e8e80a321d26c5dc8a913955d9a46e.tar.zst astro-e03f39a1b3e8e80a321d26c5dc8a913955d9a46e.zip | |
fix the rtl search bar view (#1177)
| -rw-r--r-- | docs/src/components/Header/LanguageSelect.css | 4 | ||||
| -rw-r--r-- | docs/src/components/Header/Search.css | 24 | ||||
| -rw-r--r-- | docs/src/components/Header/Search.tsx | 2 |
3 files changed, 14 insertions, 16 deletions
diff --git a/docs/src/components/Header/LanguageSelect.css b/docs/src/components/Header/LanguageSelect.css index 7911db413..5411e50dc 100644 --- a/docs/src/components/Header/LanguageSelect.css +++ b/docs/src/components/Header/LanguageSelect.css @@ -3,7 +3,7 @@ width: 48px; box-sizing: border-box; margin: 0; - padding: 0.33em 0.5em; + padding: 0.33em 2rem; overflow: visible; font-weight: 500; font-size: 1rem; @@ -21,8 +21,6 @@ transition-duration: 0.2s; transition-property: border-color, color; -webkit-font-smoothing: antialiased; - padding-left: 30px; - padding-right: 1rem; -webkit-appearance: none; } .language-select-wrapper .language-select:hover, diff --git a/docs/src/components/Header/Search.css b/docs/src/components/Header/Search.css index 2056c2c8f..559c676ee 100644 --- a/docs/src/components/Header/Search.css +++ b/docs/src/components/Header/Search.css @@ -3,6 +3,18 @@ --docsearch-primary-color: var(--theme-accent); --docsearch-logo-color: var(--theme-text); } + +.DocSearch-Modal .DocSearch-Hit a { + box-shadow: none; + border: 1px solid var(--theme-accent); +} + + +/** Style Search Bar */ +.search-placeholder { + flex-grow: 1; + text-align: initial; +} .search-input { flex-grow: 1; box-sizing: border-box; @@ -40,9 +52,6 @@ color: var(--theme-text-light); } .search-hint { - position: absolute; - top: 7px; - right: 19px; padding: 3px 5px; display: none; display: none; @@ -65,12 +74,3 @@ display: flex; } } - -/* ------------------------------------------------------------ *\ - DocSearch (Algolia) -\* ------------------------------------------------------------ */ - -.DocSearch-Modal .DocSearch-Hit a { - box-shadow: none; - border: 1px solid var(--theme-accent); -} diff --git a/docs/src/components/Header/Search.tsx b/docs/src/components/Header/Search.tsx index a1684e49f..5f05f744f 100644 --- a/docs/src/components/Header/Search.tsx +++ b/docs/src/components/Header/Search.tsx @@ -51,7 +51,7 @@ export default function Search() { strokeLinejoin="round" /> </svg> - <span>Search</span> + <span className="search-placeholder">Search</span> <span className="search-hint"> <span className="sr-only">Press </span> <kbd>/</kbd> |