diff options
| -rw-r--r-- | site/assets/js/search.js | 7 | ||||
| -rw-r--r-- | site/assets/scss/_subnav.scss | 33 |
2 files changed, 37 insertions, 3 deletions
diff --git a/site/assets/js/search.js b/site/assets/js/search.js index bb97c5cf8..823dcb10a 100644 --- a/site/assets/js/search.js +++ b/site/assets/js/search.js @@ -12,6 +12,13 @@ var inputElement = document.getElementById('search-input') var siteDocsVersion = inputElement.getAttribute('data-docs-version') + document.addEventListener('keydown', function (event) { + if (event.ctrlKey && event.key === '/') { + event.preventDefault() + inputElement.focus() + } + }) + function getOrigin() { var location = window.location var origin = location.origin diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index 566bc17fd..c23d96a49 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -25,9 +25,36 @@ } .bd-search { - .form-control:focus { - border-color: $bd-purple-bright; - box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + position: relative; + + &::after { + position: absolute; + top: .4rem; + right: .4rem; + display: flex; + align-items: center; + justify-content: center; + height: 1.5rem; + padding-right: .25rem; + padding-left: .25rem; + @include font-size(.75rem); + color: $gray-600; + content: "Ctrl + /"; + border: $border-width solid $border-color; + @include border-radius(.125rem); + } + + @include media-breakpoint-down(md) { + width: 100%; + } + + .form-control { + padding-right: 3.75rem; + + &:focus { + border-color: $bd-purple-bright; + box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25); + } } } |