search: css

css/area_sidebar-search.less

@@ -4,14 +4,58 @@
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-.search.main-sidebar{
+
-    form{
+.search.main-sidebar {
-        white-space: nowrap;
+    form {
-        .no{
+        @icon-size: 40px;
-            border: 1px solid ;
+
-            padding-right: 1.5rem;
+        display: block;
-            #qsearch__in{
+        margin: @margin-default 0;
+
+        .no {
+            #qsearch__in {
                 width: 100%;
+                padding-left: 10px;
+                padding-right: (@icon-size + 10);
+            }
+        }
+
+        input {
+            min-height: @icon-size;
+            box-sizing: border-box;
+            border-color: @color-link;
+            border-radius: 0;
+        }
+
+        button[type="submit"] {
+            .fontello();
+            .hide-text-show-before();
+            .icon-search();
+
+            width: @icon-size;
+            min-height: @icon-size;
+            background-image: none;
+            background-color: @color-link;
+            border: solid 1px @color-link;
+            border-radius: 0;
+            color: #fff;
+            margin-left: -(@icon-size);
+            padding: 0;
+            transition: @transition color, @transition background-color;
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: #fff;
+                color: @color-link;
+            }
+
+            &::before {
+                width: 100%;
+                color: inherit;
+                font-size: 25px;
+                text-align: center;
+                margin: 0;
             }
         }
     }

css/base.less

@@ -25,15 +25,17 @@
 
 @color-link:         __existing__;
 
-@margin-small:       .5rem;
-@margin-default:     1.5rem;
-@margin-big:         2.5rem;
-
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* global vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 
+@margin-small:       .5rem;
+@margin-default:     1.5rem;
+@margin-big:         2.5rem;
+
+@transition: ease-out .30s;
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* fonts */

css/base_fonts.less

@@ -158,6 +158,12 @@
     }
 }
 
+.icon-search() {
+    &::before {
+        content: '\e81f';
+    }
+}
+
 .icon-puzzle-1{
     &::before {
         content: '\e817';