diff --git a/addon/styles/addon.css b/addon/styles/addon.css index eb1a76df..abddaf63 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -14,6 +14,7 @@ @import 'icon.css'; @import 'sidebar-container.css'; @import 'well.css'; +@import 'algolia-search.css'; /* Helpers */ @import 'helpers/index.css'; diff --git a/addon/styles/algolia-search.css b/addon/styles/algolia-search.css new file mode 100644 index 00000000..d77297d2 --- /dev/null +++ b/addon/styles/algolia-search.css @@ -0,0 +1,78 @@ +#search-input { + border-radius: 18px; + border: 2px solid var(--color-card-border); + line-height: 30px; + padding-left: 8px; + width: 100%; +} + +/* Dropdown styling */ +.ds-dropdown-results { + z-index: 1; /* makes sure that the search is above the version selector */ +} +.ds-dropdown-menu { + width: 500px; + background-color: white; + color: black; + border-radius: 8px; + margin-top: 10px; + border: 2px solid var(--color-card-border); + overflow-x: hidden; +} + +/* Dropdown header styling */ +.algolia-docsearch-suggestion__main { + background-color: var(--color-info); + padding: 8px 16px; +} + +.algolia-docsearch-suggestion__main > .algolia-docsearch-suggestion--wrapper { + border: none; + padding: 0; +} + +/* No results styling */ +.algolia-docsearch-suggestion--noresults { + color: var(--color-gray-600); + padding: 8px 16px; +} + +/* Result styling */ +.algolia-docsearch-suggestion--wrapper { + display: flex; + border-bottom: 1px solid var(--color-card-border); + gap: 10px; + font-size: 14px; + padding: 8px 16px; +} + +.algolia-docsearch-suggestion--subcategory-column { + flex-basis: 80px; + min-width: 80px; +} + +.algolia-docsearch-suggestion--subcategory-column-text { + font-weight: bold; +} + +/* Search sponsor styling */ +.powered-by-algolia { + display: flex; + justify-content: end; + margin: 8px; +} +.powered-by-algolia > a { + display: flex; +} + +@media (min-width: 1008px) { + .navbar-list { + flex-grow: 1; + } +} + +@media (max-width: 1007px) { + .ds-dropdown-menu { + width: calc(100vw - 2rem); + } +} diff --git a/docs/concepts/search.md b/docs/concepts/search.md new file mode 100644 index 00000000..386ced68 --- /dev/null +++ b/docs/concepts/search.md @@ -0,0 +1,3 @@ +# Algolia Search style overrides + +We use Algolia as search engine. This comes with some default styling which we've updated a bit to look nicer and fit more with our theme.