Skip to content
Snippets Groups Projects
Normal view Permalink
search.sass 1.78 KiB
Newer Older
Olivia206's avatar
added pagefind ui wip  
Olivia206 committed
1 2 3 4 5 6 7 8 9 10 11 12 

.pagefind-ui__toggle
    @include meta
    cursor: pointer
    padding: half($spacing0) $spacing0
.search
    &__close
        @include button-reset
        @include meta
        @include icon-block(close, after)
        position: absolute
        right: $spacing3
Arnaud Levy's avatar
test
Arnaud Levy committed
13 
#search
Olivia206's avatar
added pagefind ui wip  
Olivia206 committed
14 15 16 17 18 19 20 21 22 23 
    background: $color-background
    height: 100vh
    left: 0
    padding: $spacing4 $spacing3 $spacing3
    position: fixed
    top: 0
    width: 100vw
    z-index: 80
    &[aria-hidden=true]
        display: none
Arnaud Levy's avatar
test
Arnaud Levy committed
24 25 
    .pagefind-ui
        &__search-input
Olivia206's avatar
added pagefind ui wip  
Olivia206 committed
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 
            border-left: 0
            border-right: 0
            border-radius: 0
            border-top: 0
            padding-right: $spacing1 !important
            position: relative
        &__form
            position: relative
        &__message
            text-align: right
            position: absolute
            top: $spacing3
        &__search-clear
            @include button-reset
            color: $color-accent
Arnaud Levy's avatar
test
Arnaud Levy committed
41 42 43 
        &__drawer
            z-index: 99
        &__results-area
Olivia206's avatar
added pagefind ui wip  
Olivia206 committed
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 
            margin-top: $spacing3
        &__result
            list-style: none
            position: relative
            &-thumb
                grid-column: 1/3
                @include media-breakpoint-down(md)
                    display: none
            + li
                margin-top: half($spacing3)
            @include media-breakpoint-up(md)
                @include grid
                &-inner
                    grid-column: 3/9
        &__inner 
            mark
                background-color: $color-accent
        &__result-title a
            @include h4
            @include stretched-link
        @include media-breakpoint-up(md)
            &__form
                width: col(8)
            &__search-input,
            &__message
                    width: col(8,8)