diff --git a/assets/styles/layouts/_algolia-search-overrides.scss b/assets/styles/layouts/_algolia-search-overrides.scss index 41f074cf2..1603da86c 100644 --- a/assets/styles/layouts/_algolia-search-overrides.scss +++ b/assets/styles/layouts/_algolia-search-overrides.scss @@ -6,19 +6,23 @@ width: 74vw; max-width: 800px; background: $sidebar-search-bg; + background-color: $sidebar-search-bg; + border: none; + box-shadow: 2px 2px 10px $sidebar-search-shadow; + transition: background-color 0.2s; + [class^=ds-dataset-] { - background-color: $sidebar-search-bg; border: none; - box-shadow: 2px 2px 10px $sidebar-search-shadow; - transition: background-color .2s; + background: $sidebar-search-bg; + background-color: $sidebar-search-bg; } &:before { display: none; } .ds-suggestions { - padding: 2rem; + padding: .5rem 2rem 2rem; } } @@ -104,7 +108,11 @@ } } -// Search result version tags +.algolia-docsearch-suggestion--content.algolia-docsearch-suggestion--no-results { + text-align: center; +} + +////////////////////////// Search result version tags ////////////////////////// .algolia-autocomplete .algolia-docsearch-suggestion .search-product-version { font-size: .8em; font-weight: $medium; @@ -116,6 +124,70 @@ display: none; } +///////// CUSTOM ELEMENTS ADDED IN layouts/partials/footer/search.html ///////// + +.search-all-content { + padding: 0.5rem 0.75rem; + font-size: 0.8rem; + text-align: right; + + a { + color: $article-text; + opacity: .6; + text-decoration: none; + transition: opacity .2s; + &:hover{ + opacity: 1; + } + } +} + +.search-no-results { + padding: 2rem; + text-align: center; + font-size: 1.1rem; + color: rgba($article-text, .75); + font-style: italic; + + a { + position: relative; + display: inline-block; + margin: .5rem .25rem .5rem 0; + padding: 0.85rem 1.5rem; + color: $article-btn-text !important; + border-radius: $radius; + font-size: 1.1rem; + font-weight: $medium; + font-style: normal; + text-decoration: none; + z-index: 1; + @include gradient($article-btn-gradient); + + &:after { + content: ""; + position: absolute; + display: block; + top: 0; + right: 0; + width: 100%; + height: 100%; + border-radius: $radius; + @include gradient($article-btn-gradient-hover); + opacity: 0; + transition: opacity .2s; + z-index: -1; + } + + &:hover { + cursor: pointer; + + &:after { + opacity: 1; + } + } + } +} + //////////////////////////////////////////////////////////////////////////////// ///////////////////////////////// MEDIA QUERIES //////////////////////////////// //////////////////////////////////////////////////////////////////////////////// diff --git a/assets/styles/layouts/_sidebar-toggle.scss b/assets/styles/layouts/_sidebar-toggle.scss index b86c4ec7e..1e81e38ea 100644 --- a/assets/styles/layouts/_sidebar-toggle.scss +++ b/assets/styles/layouts/_sidebar-toggle.scss @@ -34,11 +34,16 @@ $vertical-offset: -14px; } } +.sidebar-toggle { + padding: 0.4rem 0.6rem; + width: 35px; + & > a { + font-size: 1rem; + } +} .content-wrapper .sidebar-toggle { display: none; - padding: .4rem .6rem; - width: 35px; left: 0; background-color: $body-bg; border-radius: 0 $radius $radius 0; @@ -51,14 +56,9 @@ $vertical-offset: -14px; } &:before { transform: rotateY(180deg); } &:after { transform: rotate(180deg); } - & > a { - font-size: 1rem; - } } .sidebar .sidebar-toggle { - padding: .4rem .6rem; - width: 30px; right: 0; background-color: $article-bg; border-radius: $radius 0 0 $radius; @@ -69,9 +69,6 @@ $vertical-offset: -14px; "); right: 0; } - & > a { - font-size: 1rem; - } } //////////////////////////////////////////////////////////////////////////////// diff --git a/layouts/partials/footer/search.html b/layouts/partials/footer/search.html index b0fae6508..422edac8d 100644 --- a/layouts/partials/footer/search.html +++ b/layouts/partials/footer/search.html @@ -65,5 +65,11 @@ docsearch({ {{ end }} ] }, + autocompleteOptions: { + templates: { + header: '
Search all InfluxData content ', + empty: '

Not finding what you\'re looking for?

Search all InfluxData content
' + } + } }); \ No newline at end of file