1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 09:05:17 +01:00
blog/_src/_assets/styl/search.styl

76 lines
1.2 KiB
Stylus
Raw Normal View History

2014-07-12 21:22:47 +02:00
//
// kremalicious3
// --------------
// Search
//
2015-11-28 01:19:31 +01:00
.has-search-open
2015-11-19 17:53:50 +01:00
overflow: hidden
.site__content
2016-04-17 00:17:17 +02:00
@extend .transition
filter: blur(10px) opacity(0.3)
2015-11-19 17:53:50 +01: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-11-19 17:53:50 +01:00
right: 14px
2014-07-12 21:22:47 +02:00
&,
&:active
2015-11-19 17:53:50 +01:00
top: 8%
2014-07-12 21:22:47 +02:00
.search-area
@extend .transition
position: absolute
width: 100%
left: 0
2015-11-20 22:35:41 +01:00
top: -7px
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
2015-11-28 01:19:31 +01:00
&.is-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
2016-04-17 00:17:17 +02:00
top: ($spacer*2.4)
bottom: 0
2015-08-18 20:55:30 +02:00
z-index: 6
width: 100%
2016-04-17 00:17:17 +02:00
max-height: 90vh
padding: ($spacer / 2) 0
overflow: auto
-webkit-overflow-scrolling: touch
2015-08-18 20:55:30 +02:00
2015-08-09 18:15:40 +02:00
@media $breakpoint2
2016-04-17 00:17:17 +02:00
top: ($spacer * 3)
2015-08-09 18:15:40 +02:00
2016-04-17 00:17:17 +02:00
.search-results
padding-bottom: $spacer
2014-07-13 00:42:57 +02:00
.search-link
2016-04-17 00:17:17 +02:00
@extend .h4
2015-11-19 17:53:50 +01:00
line-height: $line-height-small
2015-08-09 18:15:40 +02:00
margin: 0
2016-04-17 00:17:17 +02:00
padding: ($spacer / 2)
2014-07-13 00:42:57 +02:00
display: block
2016-04-17 00:17:17 +02:00
border-bottom: 1px solid alpha($brand-grey-light, .2)
box-shadow: 0 1px 0 alpha(#fff,.2)
2015-11-19 17:53:50 +01:00
2016-04-17 00:17:17 +02:00
&:hover
background: $link-color
color: #fff