search.sass 6.53 KiB
.pagefind-ui__toggle,
.pagefind-ui__button,
.search__close
@include button-reset
@include meta
&:focus
box-shadow: none
.pagefind-ui__toggle:not(.pagefind-menu),
.pagefind-ui__button,
.search__close
@include meta
.pagefind-ui__toggle
color: $header-color
cursor: pointer
text-align: left
box-shadow: none
&:not(.toggle-text)
@include icon(search-inline, after)
&::after
line-height: inherit
margin-left: half($spacing0)
&:not(.pagefind-menu)
padding: half($spacing0) $spacing0
&.toggle-icon::after
font-size: $h3-size
@include media-breakpoint-up(desktop)
margin-top: px2rem(5)
span,
&::after
display: inline
@include media-breakpoint-down(desktop)
&.pagefind-menu
padding: $spacing1 0
width: 100%
@include media-breakpoint-up(desktop)
&.toggle-icon::after
margin-left: 0
.search__close
@include icon-block(close, after)
position: fixed
right: $spacing3
padding: 0
z-index: 9
&::after
display: inline-flex
justify-content: center
margin-left: $spacing0
width: px2rem(15)
@include media-breakpoint-down(desktop)
right: $spacing1
top: half($spacing0)
#search
background: $color-background
color: $color-text
height: 100vh
left: 0
padding-bottom: $spacing3
padding-left: $spacing1
padding-right: $spacing1
padding-top: $spacing4
position: fixed
overflow: auto
top: 0
width: 100vw
z-index: 80
@include media-breakpoint-up(desktop)
padding-right: $spacing3
padding-left: $spacing3
padding-top: space(7)
&[aria-hidden=true]
display: none
a
color: $color-text
.pagefind-ui
&::before
content: ""
background: $color-background
height: space(27)
left: 0
position: fixed
top: 0
width: 100%
z-index: 5
@include media-breakpoint-down(desktop)
height: space(50)
&__form
@include icon(search-inline, after)
&::after
color: transparentize($color-text-alt, .4)
padding-right: px2rem(2)
position: fixed
pointer-events: none
transform: translate(-6px,20%)
z-index: 9
@include media-breakpoint-down(desktop)
right: $spacing1
top: space(33)
&__search-input
border-left: 0
border-right: 0
border-radius: 0
border-top: 0
padding-left: 0
padding-right: $spacing1 !important
position: fixed
z-index: 6
@include media-breakpoint-down(desktop)
margin-bottom: $spacing1
&:focus,
&:focus-visible
border-bottom: 2px solid $color-text
outline: none
&__button[type="button"]
@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: space(20)
&__search-clear,
&__suppressed
display: none
pointer-events: none
&__drawer
position: relative
&__result
list-style: none
position: relative
&-thumb
grid-column: 1/4
> *
aspect-ratio: 3/2
object-fit: cover
@include media-breakpoint-down(desktop)
display: none
+ li
margin-top: half($spacing3)
@include media-breakpoint-up(desktop)
@include grid
&-inner
grid-column: 4/13
&__result-excerpt mark
background-color: $color-accent
color: $color-background
&__result-title a
@include h4
@include stretched-link
@include media-breakpoint-up(desktop)
&__form
position: relative
width: col(8)
&::after
left: calc(#{col(8)} - #{space(8)})
top: space(9)
&__search-input,
&__message
width: calc(#{col(8,12)} - #{space(21.5)})
&__results-area
padding-top: space(26)
@include media-breakpoint-down(desktop)
&__search-input,
&__message
width: calc(100% - #{$spacing2})
&__message
top: space(44)
&__results-area
padding-top: space(17)
.menu .nav-level-1 > li .pagefind-ui__toggle:not(.toggle-icon)::after
margin-left: 0
margin-top: px2rem(2)
.pagefind-fixed
align-items: center
background: $color-background-alt
bottom: 0
color: $color-text
display: flex
justify-content: space-between
left: $spacing3
position: fixed
z-index: 10
@include media-breakpoint-up(desktop)
&:not(.toggle-icon)
min-width: calc(#{$spacing3} * 3)
&.toggle-icon:not(:hover)
padding-left: 0
padding-right: 0
justify-content: center
&.toggle-icon
min-height: px2rem(37)
width: px2rem(50)
&:hover,
&:focus
width: calc(#{$spacing3} * 3)
span
display: inline
@include media-breakpoint-down(desktop)
left: 0
width: 100vw
&.in-page-with-toc
background: $color-background
border-top: 1px solid #eee
bottom: px2rem(44)
footer#document-footer .footer-search
.pagefind-footer
color: $footer-color
padding: 0
&.toggle-icon
transform: translateX(-35%)
&::after
margin-top: px2rem(3)
#search
margin-top: 0
a
color: $color-text
.nav-search
display: flex
.pagefind-menu:not(.toggle-icon)::after
margin-top: 10px
.menu .nav-level-1 > li .pagefind-ui__toggle span
display: inline
@include media-breakpoint-up(desktop)
.menu .nav-level-1 > li .pagefind-ui__toggle.toggle-icon span
display: none