From ddea63a6434d72f2f6586ea12c226c4a4c3e48b6 Mon Sep 17 00:00:00 2001
From: Olivia206 <olivia.simonet206@gmail.com>
Date: Fri, 22 Sep 2023 17:15:48 +0200
Subject: [PATCH] fixed searchbar
---
assets/sass/_theme/_utils.sass | 2 +-
assets/sass/_theme/design-system/search.sass | 48 ++++++++++++++------
2 files changed, 34 insertions(+), 16 deletions(-)
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index a19eb328..87bf8de4 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -267,7 +267,7 @@
appearance: none
background: transparent
border: none
- border-radius: none
+ border-radius: 0
cursor: pointer
user-select: none
&:active,
diff --git a/assets/sass/_theme/design-system/search.sass b/assets/sass/_theme/design-system/search.sass
index 95ddbfe1..5854c58c 100644
--- a/assets/sass/_theme/design-system/search.sass
+++ b/assets/sass/_theme/design-system/search.sass
@@ -1,4 +1,5 @@
.pagefind-ui__toggle,
+.pagefind-ui__button,
.search__close
@include button-reset
@include meta
@@ -13,8 +14,9 @@
width: 100%
.search__close
@include icon-block(close, after)
- position: absolute
+ position: fixed
right: $spacing3
+ z-index: 9
@include media-breakpoint-down(md)
right: 0
top: half($spacing0)
@@ -37,35 +39,45 @@
&[aria-hidden=true]
display: none
.pagefind-ui
+ &::before
+ content: ""
+ background: $color-background
+ height: calc(#{$spacing3} + #{$spacing1} + #{$spacing4})
+ width: 100%
+ position: fixed
+ top: 0
+ left: 0
+ z-index: 5
+ @include media-breakpoint-down(md)
+ height: calc(#{$spacing3} + #{half($spacing0)} + #{$spacing4})
&__search-input
border-left: 0
border-right: 0
border-radius: 0
border-top: 0
padding-right: $spacing1 !important
- position: relative
+ position: fixed
+ z-index: 6
@include media-breakpoint-down(md)
- width: 100%
margin-bottom: $spacing1
&__button[type="button"]
- background: $color-text
- border-radius: 0
- color: $color-background
- display: block
- margin: $spacing4 auto 0
- @include media-breakpoint-down(md)
- margin-top: $spacing2
+ @include button-reset
+ @include link($color-text)
+ margin-top: $spacing2
+ padding: 0
&__message
@include meta
color: $color-text-alt
text-align: right
+ z-index: 11
+ position: fixed
+ top: calc(#{$spacing2} + #{$spacing4})
&__search-clear,
&__suppressed
display: none
pointer-events: none
&__drawer
position: relative
- z-index: 99
&__result
list-style: none
position: relative
@@ -90,13 +102,19 @@
@include stretched-link
@include media-breakpoint-up(md)
&__form
- position: relative
+ position: relative
width: col(8)
&__search-input,
&__message
width: col(8,8)
+ &__results-area
+ padding-top: $spacing4
+ &__search-input,
+ &__message
+ width: col(8)
+ @include media-breakpoint-down(md)
+ &__search-input,
&__message
- position: absolute
- top: $spacing0
+ width: calc(100% - #{$spacing2})
&__results-area
- padding-top: $spacing3
\ No newline at end of file
+ padding-top: calc(#{$spacing3} + #{half($spacing0)})
\ No newline at end of file
--
GitLab