1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-11 23:55:16 +01:00
blog/_src/_assets/styl/search.styl

86 lines
1.4 KiB
Stylus
Raw Normal View History

2014-07-12 21:22:47 +02:00
//
// kremalicious3
// --------------
// Search
//
2015-08-09 18:15:40 +02:00
&.search-open-blur
filter: blur(10px)
2015-08-18 20:55:30 +02:00
user-select: none
pointer-events: none
2015-08-09 18:15:40 +02:00
2014-07-13 01:58:31 +02:00
.search-btn
right: 50px
padding: .65em .85em
2014-07-12 21:22:47 +02:00
.site-search
margin-right: 4%
.search-close
position: absolute
2015-08-18 20:55:30 +02:00
right: 16px
2014-07-12 21:22:47 +02:00
&,
&:active
2014-07-13 00:42:57 +02:00
top: 50%
2015-08-18 20:55:30 +02:00
margin-top: -7px
2014-07-12 21:22:47 +02:00
.search-area
@extend .transition
position: absolute
width: 100%
left: 0
2015-08-09 21:50:06 +02:00
top: 0
2014-07-12 21:22:47 +02:00
z-index: 3
// hidden by default
2014-07-13 22:21:56 +02:00
display: none
2014-07-12 21:22:47 +02:00
&.ready
2014-07-13 22:21:56 +02:00
display: block
2014-07-12 21:22:47 +02:00
2015-08-18 20:55:30 +02:00
.search-popover
position: absolute
left: 0
2015-08-20 20:06:14 +02:00
top: 80px
2015-08-18 20:55:30 +02:00
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)
2015-08-20 20:06:14 +02:00
@media only screen and (min-width: 40.625em) and (min-height: 650px)
2015-08-18 20:55:30 +02:00
top: 0
2014-07-12 21:22:47 +02:00
.search-results
2015-08-18 20:55:30 +02:00
@extend .list-unstyled
2015-08-09 21:50:06 +02:00
display: flex
2015-08-09 18:15:40 +02:00
2015-08-18 20:55:30 +02:00
.grid__col
padding-top: 0
2015-08-09 18:15:40 +02:00
@media $breakpoint2
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
> li
padding: 0
margin: 0
2014-07-13 00:42:57 +02:00
.search-link
@extend .h6
2015-08-09 18:15:40 +02:00
margin: 0
padding: 15px
2014-07-13 00:42:57 +02:00
display: block
2015-08-09 18:15:40 +02:00
width: 100%
2014-07-13 00:42:57 +02:00
2015-08-09 18:15:40 +02:00
.search-results > li:nth-child(9) &,
.search-results > li:last-child &
border: none
&:before
display: none