diff --git a/site/assets/js/search.js b/site/assets/js/search.js index 6c90a20872..9bad2749f5 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -5,51 +5,40 @@ (() => { 'use strict' - const inputElement = document.getElementById('search-input') + const searchElement = document.getElementById('docsearch') - if (!window.docsearch || !inputElement) { + if (!window.docsearch || !searchElement) { return } - const siteDocsVersion = inputElement.getAttribute('data-bd-docs-version') - - document.addEventListener('keydown', event => { - if ((((event.ctrlKey || event.metaKey) && event.key === 'k')) || (event.ctrlKey && event.key === '/')) { - event.preventDefault() - inputElement.focus() - } - }) - - if (navigator.platform.includes('Win') || navigator.platform.includes('Linux')) { - const searchShortcut = document.querySelector('.bd-search') - searchShortcut.setAttribute('data-shortcut', '⌃K') - } + const siteDocsVersion = searchElement.getAttribute('data-bd-docs-version') window.docsearch({ - apiKey: '5990ad008512000bba2cf951ccf0332f', + apiKey: '3151f502c7b9e9dafd5e6372b691a24e', indexName: 'bootstrap', - inputSelector: '#search-input', - algoliaOptions: { + appId: 'AK7KMZKZHQ', + container: searchElement, + searchParameters: { facetFilters: [`version:${siteDocsVersion}`] }, - transformData(hits) { - return hits.map(hit => { + transformItems(items) { + return items.map(item => { const liveUrl = 'https://getbootstrap.com/' - hit.url = window.location.origin.startsWith(liveUrl) ? + item.url = window.location.origin.startsWith(liveUrl) ? // On production, return the result as is - hit.url : - // On development or Netlify, replace `hit.url` with a trailing slash, + item.url : + // On development or Netlify, replace `item.url` with a trailing slash, // so that the result link is relative to the server root - hit.url.replace(liveUrl, '/') + item.url.replace(liveUrl, '/') // Prevent jumping to first header - if (hit.anchor === 'content') { - hit.url = hit.url.replace(/#content$/, '') - hit.anchor = null + if (item.anchor === 'content') { + item.url = item.url.replace(/#content$/, '') + item.anchor = null } - return hit + return item }) }, // Set debug to `true` if you want to inspect the dropdown diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 57e3f47b7f..4805a3c471 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -63,7 +63,7 @@ } .dropdown-toggle { - &:focus { + &:focus:not(:focus-visible) { outline: 0; } } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index 1825337a00..9739d7a3a2 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -1,25 +1,9 @@ +// stylelint-disable selector-class-pattern + .bd-search { position: relative; width: 100%; - &::after { - position: absolute; - top: .4rem; - right: .4rem; - bottom: .4rem; - display: flex; - align-items: center; - justify-content: center; - padding-right: .3125rem; - padding-left: .3125rem; - @include font-size(.75rem); - color: rgba($white, .65); - // content: "⌘K"; - content: attr(data-shortcut); - background-color: rgba($white, .1); - @include border-radius(.125rem); - } - @include media-breakpoint-up(lg) { position: absolute; top: .75rem; @@ -33,30 +17,105 @@ margin-left: -140px; } - .form-control { - padding-right: 2.75rem; - color: $white; - background-color: rgba($black, .1); - border-color: rgba($white, .4); - transition-property: background-color, border-color, box-shadow; +} - &::placeholder { - color: rgba($white, .65); - } +.DocSearch-Container { + --docsearch-muted-color: #{$text-muted}; + --docsearch-hit-shadow: none; - &::-webkit-search-cancel-button { - appearance: none; - width: 1rem; - height: 1rem; - cursor: pointer; - background: escape-svg($search-clear-icon) no-repeat 0 0; - background-size: 100% 100%; - } + z-index: 1030; - &:focus { - background-color: rgba($black, .25); - border-color: rgba($bd-accent, 1); - box-shadow: 0 0 0 .25rem rgba($bd-accent, .4); + @include media-breakpoint-up(lg) { + padding-top: 4rem; + } +} + +.DocSearch-Button { + --docsearch-searchbox-background: #{rgba($black, .1)}; + --docsearch-searchbox-color: #{$white}; + --docsearch-searchbox-focus-background: #{rgba($black, .25)}; + --docsearch-searchbox-shadow: #{0 0 0 .25rem rgba($bd-accent, .4)}; + --docsearch-text-color: #{$white}; + --docsearch-muted-color: #{rgba($white, .65)}; + + width: 100%; + margin: 0; + border: 1px solid rgba($white, .4); + @include border-radius(.375rem); + + .DocSearch-Search-Icon { + opacity: .65; + } + + &:active, + &:focus, + &:hover { + border-color: rgba($bd-accent, 1); + + .DocSearch-Search-Icon { + opacity: 1; } } } + +.DocSearch-Button-Keys { + min-width: 0; + padding-right: .25rem; + padding-left: .25rem; + background: rgba($black, .25); + @include border-radius(.25rem); +} + +.DocSearch-Button-Key { + top: 0; + width: auto; + height: 1.25rem; + padding-right: .125rem; + padding-left: .125rem; + margin-right: 0; + font-size: .875rem; + background: none; + box-shadow: none; +} + +.DocSearch-Commands-Key { + padding-left: 1px; + font-size: .875rem; + background-color: rgba($black, .1); + background-image: none; + box-shadow: none; +} + +.DocSearch-Form { + @include border-radius(var(--bs-border-radius)); +} + +.DocSearch-Hits { + mark { + padding: 0; + } +} + +.DocSearch-Hit { + padding-bottom: 0; + @include border-radius(0); + + a { + @include border-radius(0); + border: solid var(--bs-border-color); + border-width: 0 1px 1px; + } + + &:first-child a { + @include border-top-radius(var(--bs-border-radius)); + border-top-width: 1px; + } + &:last-child a { + @include border-bottom-radius(var(--bs-border-radius)); + } +} + +.DocSearch-Hit-icon { + display: flex; + align-items: center; +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 8f74f94d0b..b460392d0f 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -6,7 +6,6 @@ $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable- $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; $dropdown-active-icon: url("data:image/svg+xml,"); -$search-clear-icon: url("data:image/svg+xml,"); $bd-gutter-x: 3rem; $bd-callout-variants: info, warning, danger !default; @@ -19,4 +18,6 @@ $bd-callout-variants: info, warning, danger !default; --bd-accent-rgb: #{to-rgb($bd-accent)}; --bd-pink-rgb: #{to-rgb($pink-500)}; --bd-teal-rgb: #{to-rgb($teal-500)}; + --docsearch-primary-color: var(--bd-violet); + --docsearch-logo-color: var(--bd-violet); } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 3c61cd3421..d08e5a393a 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -62,4 +62,5 @@ {{ range .Page.Params.extra_js -}} {{- end -}} +
{{ end }} diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 441c2bd56a..c54d3fa447 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -46,9 +46,7 @@
{{ if eq .Layout "docs" }} -
- -
+
{{ end }} diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index 8e34122bea..fb340bb59c 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -11,9 +11,9 @@ {{- end }}
  • -