1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-24 02:06:17 +01:00

search tweaks

This commit is contained in:
Matthias Kretschmann 2015-11-19 17:53:50 +01:00
parent 60dd4498aa
commit 524c2fce2c
3 changed files with 46 additions and 32 deletions

View File

@ -27,7 +27,7 @@ var Search = (function(w, d) {
.removeClass('ready bounceOutUp')
.addClass('ready slideDown')
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
content.addClass('search-open-blur');
$('body').addClass('search-open');
});
searchfield.focus();
@ -85,7 +85,7 @@ var Search = (function(w, d) {
.removeClass('slideDown')
.addClass('bounceOutUp')
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
content.removeClass('search-open-blur');
$('body').removeClass('search-open');
});
searchpop.addClass('hide');
}

View File

@ -74,11 +74,10 @@ a.btn
@media $breakpoint2
margin-bottom: 0
.btn span
font-size: .9em
color: rgba(19, 56, 50, .6)
margin-left: .3em
span
font-size: .9em
color: rgba(19, 56, 50, .6)
margin-left: .3em
// Primary Button
.btn-primary,
@ -123,23 +122,29 @@ a.btn-primary
.close
@extend .textcenter, .transition
width: 14px
height: 14px
padding: 0
border-radius: 50%
display: block
background: lighten($brand-grey-light, 50%)
color: #fff
color: lighten($brand-grey-light, 50%)
line-height: 1
font-size: $font-size-mini
font-size: $font-size-large
padding: 3px
button.&
cursor: pointer
background: transparent
border: 0
-webkit-appearance: none
&:hover,
&:focus
background: $link-color-hover
color: #fff
color: lighten($brand-grey-light, 20%)
cursor: pointer
outline: 0
&:active
background: none
color: $brand-grey-light
transition: none
// some helper classes for old content
/////////////////////////////////////

View File

@ -4,11 +4,14 @@
// Search
//
&.search-open-blur
transition: .2s ease-out
filter: blur(10px)
user-select: none
pointer-events: none
.search-open
overflow: hidden
.site__content
transition: .2s ease-out
filter: blur(10px)
user-select: none
pointer-events: none
.search-btn
right: 50px
@ -19,12 +22,11 @@
.search-close
position: absolute
right: 16px
right: 14px
&,
&:active
top: 50%
margin-top: -7px
top: 8%
.search-area
@extend .transition
@ -59,6 +61,8 @@
.search-results
@extend .list-unstyled
display: flex
align-items: center
.grid__col
padding-top: 0
@ -73,14 +77,19 @@
.search-link
@extend .h6
@extend .h6, .divider-bottom
line-height: $line-height-small
margin: 0
padding: 15px
padding: 10px 15px
min-height: 55px
display: block
width: 100%
display: flex
align-items: center
.search-results > li:nth-child(9) &,
.search-results > li:last-child &
border: none
&:before
display: none
.search-results > li
&:nth-child(9)
&:nth-child(10)
.search-link
border-bottom: none
&:before
display: none