m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-09-24 01:58:50 +02:00
Code

search tweaks

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_src/_assets/js/_search.js
View File

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

33
_src/_assets/styl/buttons.styl
View File

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

41
_src/_assets/styl/search.styl
View File

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