mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-23 10:27:20 +01:00
87 lines
1.4 KiB
Stylus
87 lines
1.4 KiB
Stylus
//
|
|
// kremalicious3
|
|
// --------------
|
|
// Search
|
|
//
|
|
|
|
.has-search-open
|
|
overflow: hidden
|
|
|
|
.site__content
|
|
@extend .transition
|
|
filter: blur(10px) opacity(0.3)
|
|
user-select: none
|
|
pointer-events: none
|
|
|
|
.search-btn
|
|
right: 70px
|
|
padding: .65em .85em
|
|
|
|
@media $screen-md
|
|
right: 50px
|
|
|
|
.search-close
|
|
position: absolute
|
|
right: 14px
|
|
|
|
&,
|
|
&:active
|
|
top: 8%
|
|
|
|
.search-area
|
|
@extend .transition
|
|
position: absolute
|
|
left: 0
|
|
top: -7px
|
|
z-index: 3
|
|
margin-left: ($spacer / 2)
|
|
margin-right: ($spacer / 2)
|
|
width: "calc(100% - %s)" % $spacer
|
|
|
|
// hidden by default
|
|
display: none
|
|
|
|
@media $screen-md
|
|
margin-left: 0
|
|
margin-right: 0
|
|
width: 100%
|
|
|
|
&.is-ready
|
|
display: block
|
|
|
|
.form-control
|
|
background: #fff
|
|
|
|
|
|
.search-popover
|
|
position: absolute
|
|
left: 0
|
|
top: ($spacer*2.4)
|
|
bottom: 0
|
|
z-index: 6
|
|
width: 100%
|
|
max-height: 90vh
|
|
padding: ($spacer / 2) 0
|
|
overflow: auto
|
|
-webkit-overflow-scrolling: touch
|
|
|
|
@media $screen-sm
|
|
top: ($spacer * 3)
|
|
|
|
.search-results
|
|
@extend .breakoutviewport
|
|
padding-bottom: $spacer
|
|
|
|
.search-link
|
|
@extend .h4
|
|
line-height: $line-height-small
|
|
margin: 0
|
|
padding: ($spacer / 2)
|
|
display: block
|
|
border-bottom: 1px solid alpha($brand-grey-light, .2)
|
|
box-shadow: 0 1px 0 alpha(#fff,.2)
|
|
|
|
&:hover
|
|
background: $link-color
|
|
color: #fff
|