3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-07 21:32:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): increase search input on medium screens (#2799)

Browse source 
* refactor(v2): show only search icon on mobiles

* refactor(v2): increase search input on medium screens
This commit is contained in:
Alexey Pyltsyn 2020-05-24 07:45:38 +03:00 • committed by GitHub
parent a7e4013d3b
commit 604f9f5b25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -35,6 +35,7 @@ const Search = ({handleSearchBarToggle, isSearchBarExpanded}) => {
openOnFocus: true, openOnFocus: true,
autoselect: false, autoselect: false,
hint: false, hint: false,
tabAutocomplete: false,
}, },
// Override algolia's default selection event, allowing us to do client-side // Override algolia's default selection event, allowing us to do client-side
// navigation and avoiding a full page refresh. // navigation and avoiding a full page refresh.

9
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.module.css
View file

@ -9,6 +9,13 @@
display: none; display: none;
} }
@media (min-width: 769px) and (max-width: 996px) {
:global(.navbar__search),
:global(.navbar__search-input) {
width: 100%;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.searchIconButton { .searchIconButton {
display: block; display: block;
@ -53,10 +60,10 @@
.searchInputExpanded { .searchInputExpanded {
width: 100%; width: 100%;
} }
}
:global(.algolia-autocomplete) { :global(.algolia-autocomplete) {
width: 100%; width: 100%;
display: flex !important; display: flex !important;
justify-content: flex-end; justify-content: flex-end;
} }
}