search tweaks

_src/_assets/js/_search.js

@@ -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');
         }

_src/_assets/styl/buttons.styl

@@ -74,8 +74,7 @@ a.btn
 
         @media $breakpoint2
             margin-bottom: 0
-
+    span
-.btn span
         font-size: .9em
         color: rgba(19, 56, 50, .6)
         margin-left: .3em
@@ -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: lighten($brand-grey-light, 50%)
-    color: #fff
     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: lighten($brand-grey-light, 20%)
-        color: #fff
         cursor: pointer
         outline: 0
 
+    &:active
+        background: none
+        color: $brand-grey-light
+        transition: none
+
 
 // some helper classes for old content
 /////////////////////////////////////

_src/_assets/styl/search.styl

@@ -4,7 +4,10 @@
 // Search
 //
 
-&.search-open-blur
+.search-open
+    overflow: hidden
+
+    .site__content
         transition: .2s ease-out
         filter: blur(10px)
         user-select: none
@@ -19,12 +22,11 @@
 
 .search-close
     position: absolute
-    right: 16px
+    right: 14px
 
     &,
     &:active
-        top: 50%
+        top: 8%
-        margin-top: -7px
 
 .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
-    .search-results > li:last-child &
+    &:nth-child(9)
-        border: none
+    &:nth-child(10)
+        .search-link
+            border-bottom: none
             &:before
                 display: none