SPR-742: Konfigurierbarkeit - search

css/area_sidebar-search.less

@@ -5,35 +5,40 @@
  */
 
 .search.main-sidebar {
-;
     @main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
-
     @icon-size: @page-header_height;
     @icon-search_font-size: @font-size-big;
+
     p.toggleSearch a,
     button[type="submit"] {
         .fontello();
         .hide-text-show-before();
         .icon-search();
+
         position: relative;
         width: @icon-size;
         min-height: @icon-size;
         overflow: visible;
         background-image: none;
-        background-color: transparent;
+        background-color: transparent; // fix
-        color: @color-nav;
+        border: solid 1px transparent;
+        color: @color-nav; // fix
         padding: 0;
         transition: @transition color, @transition background-color, @transition border-color;
+
         &:hover,
         &:focus,
         &:active {
+            min-height: @icon-size;
             background-color: @button_color;
             border: solid 1px @button_background;
             color: @button_background;
+
             &::after {
                 background-color: @button_background;
             }
         }
+
         &::before {
             width: 100%;
             color: inherit;
@@ -42,54 +47,89 @@
             margin: 0;
         }
     }
+
     p.toggleSearch {
         display: none;
         margin: -2px 0 0; // reverse transparent border and box-sizing of a child
         padding: 0;
+
         @media @screen_max-xxlg {
             margin-top: -1px;
         }
+
         a {
             min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
             width: @main-ico-dummy;
-            border: solid 1px transparent;
+            border-radius: @fix_border-radius;
-            border-bottom: solid 1px @color-border;
-            border-radius: @fix_border-radius 0 0 0;
             text-decoration: none;
             box-sizing: border-box;
-            &:hover,
+
-            &:focus,
-            &:active {
-                border-radius: @fix_border-radius 0 0 @fix_border-radius;
-            }
             &::before {
                 position: absolute;
                 top: 50%;
                 left: 0;
+                color: inherit;
                 text-align: center;
                 margin-top: -(@icon-search_font-size / 2);
             }
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: @color-nav-hover-bg;
+                border-color: @color-nav-hover;
+                color: @color-nav-hover;
+            }
         }
     }
-    /* + + +  form  + + + */
+
+    button[type="submit"] {
+        position: absolute;
+        top: 1px;
+        bottom: 1px;
+        right: 0;
+        height: auto;
+        min-height: (@icon-size - .2);
+
+        &:hover,
+        &:focus,
+        &:active {
+            top: 0;
+            bottom: 0;
+            min-height: @icon-size;
+            background-color: @button_color;
+            border: solid 1px @button_background;
+            color: @button_background;
+        }
+    }
+
+
+/* + + +  form  + + + */
     form {
+        position: relative;
         display: block;
         margin: 0 0 @margin-default;
+
         .no {
+            display: inline-block;
+
             #qsearch__in {
                 width: 100%;
                 padding-left: 10px;
                 padding-right: (@icon-size + 10);
             }
         }
+
         input {
             min-height: @icon-size;
             box-sizing: border-box;
         }
+
         button[type="submit"] {
             border: solid 1px transparent;
             border-right-color: @color-border;
             margin-left: -(@icon-size);
+
             &::after {
                 content: '';
                 position: absolute;
@@ -109,23 +149,31 @@
         width: 100%;
     }
 }
+
+
+/* + + + + +  wide page content  + + + + + */
 .wide-content {
     .search.main-sidebar {
         p.toggleSearch {
+            position: relative;
+            z-index: 1;
             display: block;
             float: left;
             width: 100%;
         }
+
         form {
             input {
                 border: 0 none;
             }
+
             .no {
                 #qsearch__in {
                     width: 0;
                     padding: 0;
                     margin: 0;
                 }
+
                 button[type="submit"] {
                     display: none;
                 }