From 5a16f4f4f50d71a7dda16123864b702513960579 Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Tue, 3 Jan 2017 14:48:35 +0100
Subject: [PATCH] new searchsubmitbutton design

---
 css/area_sidebar-search.less | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less
index d11bc69..f48f501 100755
--- a/css/area_sidebar-search.less
+++ b/css/area_sidebar-search.less
@@ -23,8 +23,6 @@
         input {
             min-height: @icon-size;
             box-sizing: border-box;
-            border-color: @color-link;
-            border-radius: 0;
         }
 
         button[type="submit"] {
@@ -32,22 +30,28 @@
             .hide-text-show-before();
             .icon-search();
 
+            position: relative;
             width: @icon-size;
             min-height: @icon-size;
+            overflow: visible;
             background-image: none;
-            background-color: @color-link;
-            border: solid 1px @color-link;
-            border-radius: 0;
-            color: #fff;
+            background-color: transparent;
+            border: solid 1px transparent;
+            border-right-color: @color-border;
+            color: @color-nav;
             margin-left: -(@icon-size);
             padding: 0;
-            transition: @transition color, @transition background-color;
+            transition: @transition color, @transition border-color;
 
             &:hover,
             &:focus,
             &:active {
-                background-color: #fff;
+                border: solid 1px @color-link;
                 color: @color-link;
+
+                &::after {
+                    background-color: @color-link;
+                }
             }
 
             &::before {
@@ -57,6 +61,17 @@
                 text-align: center;
                 margin: 0;
             }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 15%;
+                bottom: 15%;
+                width: 1px;
+                left: -1px;
+                background-color: @color-border;
+                transition: @transition background-color;
+            }
         }
     }
 }