diff options
| author | Achilleas Pipinellis <axil@gitlab.com> | 2017-12-15 14:24:20 +0300 |
|---|---|---|
| committer | Achilleas Pipinellis <axil@gitlab.com> | 2017-12-15 15:21:43 +0300 |
| commit | 955a5d12e89384383ccc9f213f112d80f669b851 (patch) | |
| tree | b4faa911777106d338c76f5f4bbf17f7e7d72921 /content | |
| parent | 1444e0557e028b16303bd7fc2dfb24837a50d8b6 (diff) | |
Make Algolia search mobile friendly
Taken from
https://github.com/algolia/docsearch/issues/181#issuecomment-301730219
Diffstat (limited to 'content')
| -rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index f39c8bc5..4905b9bb 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -555,3 +555,32 @@ h6 { .alert { color: inherit; } + +/* +Algolia search for mobile +https://github.com/algolia/docsearch/issues/181#issuecomment-301730219 +*/ +// Since some values are added by Javascript, we have to add the +// !important option to override these values. +.algolia-autocomplete { + + // On a max-width of 768px + @media (max-width: 768px) { + .ds-dropdown-menu { + max-width: calc(100vw - 32px) !important; + min-width: calc(100vw - 32px) !important; + width: calc(100vw - 32px) !important; + margin-left: 16px !important; + } + .algolia-docsearch-suggestion--content { + width: 100% !important; + padding-left: 0 !important; + } + .algolia-docsearch-suggestion--content:before { + display: none !important; + } + .algolia-docsearch-suggestion--subcategory-column { + display: none !important; + } + } +} |