mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-11 23:55:16 +01:00
87 lines
1.5 KiB
Stylus
87 lines
1.5 KiB
Stylus
//
|
|
// kremalicious3
|
|
// --------------
|
|
// Search
|
|
//
|
|
|
|
&.search-open-blur
|
|
@extend .transition
|
|
filter: blur(10px)
|
|
|
|
.search-btn
|
|
right: 50px
|
|
padding: .65em .85em
|
|
|
|
.site-search
|
|
margin-right: 4%
|
|
|
|
.search-close
|
|
position: absolute
|
|
right: 32px
|
|
|
|
&,
|
|
&:active
|
|
top: 50%
|
|
margin-top: -8px
|
|
|
|
.search-area
|
|
@extend .transition
|
|
position: absolute
|
|
width: 100%
|
|
left: 0
|
|
top: -3px
|
|
z-index: 3
|
|
|
|
// hidden by default
|
|
display: none
|
|
|
|
&.ready
|
|
display: block
|
|
|
|
.search-results
|
|
@extend .list-unstyled, .textcenter
|
|
|
|
@media $breakpoint2
|
|
display: flex
|
|
flex-wrap: wrap
|
|
margin-top: ($line-height-computed/2)
|
|
margin-bottom: ($line-height-computed/2)
|
|
|
|
> li
|
|
padding: 0
|
|
margin: 0
|
|
|
|
@media $breakpoint2
|
|
flex: 0 0 49%
|
|
display: flex
|
|
align-items: center
|
|
align-content: stretch
|
|
|
|
|
|
.search-link
|
|
@extend .h6
|
|
margin: 0
|
|
padding: 15px
|
|
display: block
|
|
width: 100%
|
|
|
|
.search-results > li:nth-child(9) &,
|
|
.search-results > li:last-child &
|
|
border: none
|
|
&:before
|
|
display: none
|
|
|
|
.search-popover
|
|
position: absolute
|
|
left: 0
|
|
top: 71px
|
|
z-index: 6
|
|
width: 100%
|
|
padding-top: ($line-height-computed/2)
|
|
background: lighten($page-bg, 3%)
|
|
border-bottom: 1px solid rgba(255,255,255,.7)
|
|
box-shadow: 0 1px 4px alpha($brand-dark, .1)
|
|
|
|
@media $breakpoint2
|
|
top: 0
|