From 524c2fce2cb4cce38f4d47f324fcb9212644f1e6 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 19 Nov 2015 17:53:50 +0100
Subject: [PATCH] search tweaks

---
 _src/_assets/js/_search.js     |  4 ++--
 _src/_assets/styl/buttons.styl | 33 +++++++++++++++------------
 _src/_assets/styl/search.styl  | 41 +++++++++++++++++++++-------------
 3 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/_src/_assets/js/_search.js b/_src/_assets/js/_search.js
index 3a0b406a..30616203 100644
--- a/_src/_assets/js/_search.js
+++ b/_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');
         }
diff --git a/_src/_assets/styl/buttons.styl b/_src/_assets/styl/buttons.styl
index d9c789c7..c7342886 100644
--- a/_src/_assets/styl/buttons.styl
+++ b/_src/_assets/styl/buttons.styl
@@ -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
 /////////////////////////////////////
diff --git a/_src/_assets/styl/search.styl b/_src/_assets/styl/search.styl
index c88d1102..7522ba1e 100644
--- a/_src/_assets/styl/search.styl
+++ b/_src/_assets/styl/search.styl
@@ -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