diff --git a/assets/js/theme/design-system/search.js b/assets/js/theme/design-system/search.js index 2de0815ccf7d655ad515b6ddac79e984b8748cda..3ffe7bd84ee8d03795b59cb17a76e7ca40492caa 100644 --- a/assets/js/theme/design-system/search.js +++ b/assets/js/theme/design-system/search.js @@ -15,6 +15,9 @@ class Search { } listen() { + if (document.body.querySelector(".toc-cta")) { + this.button.classList.add('in-page-with-toc'); + } this.button.addEventListener('click', () => { this.toggle(true); this.removedItems = this.element.querySelector('.pagefind-ui__suppressed', '.pagefind-ui__search-clear'); diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass index 8f9c0dc0b8e42c85ce9fd360435363e3225ab82d..b5a6369ab1da8a81b6dd9edec891c5161c4cb49b 100644 --- a/assets/sass/_theme/design-system/search.sass +++ b/assets/sass/_theme/design-system/search.sass @@ -14,9 +14,10 @@ line-height: inherit margin-left: px2rem(8) @include media-breakpoint-down(md) - border-bottom: 1px solid #adb5bd - padding: $spacing1 0 - width: 100% + &:not(.pagefind-fixed) + border-bottom: 1px solid #adb5bd + padding: $spacing1 0 + width: 100% .search__close @include icon-block(close, after) position: fixed @@ -29,7 +30,7 @@ margin-left: $spacing0 width: px2rem(15) @include media-breakpoint-down(md) - right: 0 + right: $spacing1 top: half($spacing0) #search background: $color-background @@ -155,4 +156,9 @@ min-width: calc(#{$spacing3} * 3) &::after position: absolute - right: $spacing0 \ No newline at end of file + right: $spacing0 + @include media-breakpoint-down(md) + left: 0 + width: 100vw + &.in-page-with-toc + bottom: px2rem(44)