[MERGE] trunk-mit search view css

bzr revid: al@openerp.com-20120531134825-lk0isjcorvmp1zfg

5 files changed, 317 insertions, 177 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 7c2b938c836..e2879011a72 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
@@ -98,6 +98,12 @@
 .openerp li {
   list-style-type: none;
 }
+.openerp input, .openerp textarea {
+  border: 1px solid #cccccc;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}
 .openerp .oe_i {
   font-family: "mnmliconsRegular" !important;
   font-size: 21px;
@@ -1165,17 +1171,28 @@
   cursor: text;
   position: relative;
   float: right;
-  padding-right: 20px;
-  width: 410px;
+  padding: 1px 0;
+  line-height: 18px;
+  width: 480px;
   border: 1px solid #ababab;
   background: white;
-  -moz-border-radius: 1em;
-  -webkit-border-radius: 1em;
-  border-radius: 1em;
+  -moz-border-radius: 13px;
+  -webkit-border-radius: 13px;
+  border-radius: 13px;
   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
   -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
 }
+.openerp .oe_searchview input, .openerp .oe_searchview textarea {
+  padding: 3px;
+  height: 14px;
+  font-size: 11px;
+  line-height: 18px;
+  border: 1px solid #cccccc;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+}
 .openerp .oe_searchview.oe_focused {
   border-color: #a6a6fe;
   -moz-box-shadow: 0 1px 2px #a6a6fe inset;
@@ -1186,17 +1203,16 @@
   cursor: pointer;
   position: absolute;
   top: 0;
-  right: 22px;
+  right: 18px;
   width: 15px;
   height: 100%;
-  background: url(../img/attachments-close.png) center center no-repeat;
+  background: url(../img/search_reset.gif) center center no-repeat;
 }
 .openerp .oe_searchview .oe_searchview_unfold_drawer {
   position: absolute;
   top: 0;
   right: 0;
   height: 100%;
-  line-height: 2.5em;
   padding: 0 7px 0 4px;
   color: #cccccc;
   cursor: pointer;
@@ -1205,23 +1221,44 @@
   color: #999999;
 }
 .openerp .oe_searchview .oe_searchview_unfold_drawer:before {
-  content: "◀";
+  position: absolute;
+  top: 10px;
+  right: 7px;
+  width: 0;
+  height: 0;
+  display: inline-block;
+  content: "";
+  vertical-align: top;
+  border-top: 5px solid #4c4c4c;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+}
+.openerp .oe_searchview .oe_searchview_facets {
+  min-height: 22px;
 }
 .openerp .oe_searchview .oe_searchview_facets:before {
   color: #cccccc;
   font-family: "mnmliconsRegular";
   content: "r";
-  font-size: 150%;
-  padding: 0 1px 0 3px;
+  font-size: 130%;
   display: inline;
+  position: relative;
+  left: 6px;
+  top: 2px;
+  color: #a3a3a3;
+  padding-right: 4px;
 }
 .openerp .oe_searchview .oe_searchview_facets * {
   vertical-align: top;
   display: inline-block;
-  line-height: 26px;
+  line-height: 17px;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_input, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet {
-  height: 26px;
+  height: 18px;
+  margin: 1px 0;
+  font-size: 11px;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_input:focus, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet:focus {
   outline: none;
@@ -1238,8 +1275,6 @@
   border-radius: 3px;
   background: #8786b7;
   -webkit-font-smoothing: auto;
-  padding-left: 1.1em;
-  margin: 1px 0;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet:focus {
   border-color: #a6a6fe;
@@ -1254,63 +1289,96 @@
   border-radius: 0 3px 3px 0;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_category, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_value {
-  height: 24px;
-  padding: 1px 0.1em;
+  height: 18px;
+  padding: 0 4px;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_category {
   color: white;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
 }
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_category.oe_i {
+  font-size: 16px;
+}
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_value {
   border-left: 1px solid #afafb6;
+  text-shadow: 0 1px 1px white;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_value:last-child {
+  padding-right: 16px;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_remove {
   position: absolute;
-  top: 0;
-  left: 2px;
-  color: white;
+  top: 3px;
+  right: 3px;
+  color: #8786b7;
+  line-height: 8px;
+  width: 12px;
+  height: 12px;
+  text-align: center;
+  font-weight: bold;
+  cursor: pointer;
+  text-shadow: 0 1px 1px white;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_remove:hover {
-  color: #cccccc;
+  color: white;
+  background: #8786b7;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
 }
 .openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {
   display: block;
 }
-.openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_unfold_drawer:before {
-  content: "▼";
-}
 .openerp .oe_searchview .oe_searchview_drawer {
   position: absolute;
   z-index: 1;
-  margin-top: 3px;
+  margin-top: 4px;
   top: 100%;
-  right: 0;
+  right: -1px;
   background-color: white;
   min-width: 100%;
   display: none;
-  border: 1px solid #cccccc;
+  border: 1px solid #afafb6;
   text-align: left;
-  padding-bottom: 0.5em;
-  -moz-border-radius: 1em;
-  -webkit-border-radius: 1em;
-  border-radius: 1em;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
 .openerp .oe_searchview .oe_searchview_drawer > div {
   border-top: 1px solid #cccccc;
-  margin: 3px 0;
+  margin: 0;
+  padding: 8px;
 }
 .openerp .oe_searchview .oe_searchview_drawer > div:first-child {
   border-top: none;
   margin: 0;
 }
+.openerp .oe_searchview .oe_searchview_drawer h3 {
+  margin: 8px 4px 4px 12px;
+  color: #8786b7;
+  font-size: 13px;
+}
 .openerp .oe_searchview .oe_searchview_drawer h4, .openerp .oe_searchview .oe_searchview_drawer h4 * {
   margin: 0;
   cursor: pointer;
+  font-weight: normal;
+  display: inline-block;
+}
+.openerp .oe_searchview .oe_searchview_drawer h4:hover, .openerp .oe_searchview .oe_searchview_drawer h4 *:hover {
+  background-color: #f0f0fa;
 }
 .openerp .oe_searchview .oe_searchview_drawer h4:before {
   content: "▸ ";
+  color: #a3a3a3;
 }
-.openerp .oe_searchview .oe_searchview_drawer button, .openerp .oe_searchview .oe_searchview_drawer .button {
+.openerp .oe_searchview .oe_searchview_drawer button {
+  margin: 4px 0;
+}
+.openerp .oe_searchview .oe_searchview_drawer .button {
   border: none;
   background: transparent;
   padding: 0 2px;
@@ -1321,61 +1389,64 @@
   -webkit-border-radius: 0;
   border-radius: 0;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section {
   display: table;
   width: 100%;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters > div {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section > div {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: table-cell;
   width: 50%;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters h3 {
-  margin: 2px 4px 2px 8px;
-  color: #8786b7;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters ul {
-  margin: 0 12px 3px;
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section ul {
+  margin: 0 8px 8px;
   padding: 0;
   list-style: none;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters li {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li {
   list-style: none;
-  padding: 3px 6px 3px 18px;
+  padding: 2px 4px 2px 20px;
   line-height: 14px;
   color: inherit;
   cursor: pointer;
+  position: relative;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters li.oe_selected {
-  background: url(/web/static/src/img/icons/gtk-apply.png) left 2px no-repeat;
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li.oe_selected:before {
+  content: "W";
+  font-family: "entypoRegular" !important;
+  font-size: 24px;
+  font-weight: 300 !important;
+  color: #a3a3a3;
+  position: absolute;
+  left: 4px;
+  top: -2px;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters li:hover {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li:hover {
   background-color: #f0f0fa;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom form {
-  display: none;
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section form {
+  margin-left: 12px;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom form button {
-  font-size: 1px;
-  letter-spacing: -1px;
-  color: transparent;
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section form p {
+  margin: 4px 0;
+  line-height: 18px;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom form button:before {
-  font-family: "mnmliconsRegular";
-  content: "S";
-  font-size: 20px;
-  color: #404040;
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section form button {
+  margin: 0 0 8px 0;
+}
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom {
+  padding: 0 8px 8px 8px;
+}
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom form {
+  display: none;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li {
   cursor: pointer;
   position: relative;
-  line-height: 1.2em;
-  padding: 2px 20px 2px 25px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li.oe_searchview_custom_private {
-  background: url(/web/static/src/img/icons/terp-locked.png) 5px center no-repeat;
+  line-height: 14px;
+  padding: 2px 4px 2px 20px;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li:hover {
   background-color: #f0f0fa;
@@ -1387,38 +1458,55 @@
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced form {
   display: none;
+  margin-top: 8px;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced button.oe_add_condition:before {
-  content: "⊞ ";
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced button.oe_apply:before {
-  content: "⚡ ";
+  content: "Z";
+  font-family: "entypoRegular" !important;
+  font-size: 24px;
+  font-weight: 300 !important;
+  margin-right: 4px;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced ul {
   list-style: none;
   padding: 0;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced li {
+  position: relative;
   list-style: none;
   margin: 0;
   white-space: nowrap;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_opened h4:before {
   content: "▾ ";
+  position: relative;
+  top: -1px;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_opened form {
   display: block;
 }
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete {
+  position: absolute;
+  left: 4px;
+  top: 3px;
+}
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete, .openerp .oe_searchview .oe_searchview_drawer .searchview_extended_delete_prop {
-  font-size: 1px;
-  letter-spacing: -1px;
-  color: transparent;
+  width: 12px;
+  height: 12px;
+  color: #8786b7;
+  line-height: 8px;
+  text-align: center;
+  font-weight: bold;
+  text-shadow: 0 1px 1px white;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete:before, .openerp .oe_searchview .oe_searchview_drawer .searchview_extended_delete_prop:before {
-  font-family: "mnmliconsRegular";
-  content: "d";
-  font-size: 20px;
-  color: #404040;
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete:hover, .openerp .oe_searchview .oe_searchview_drawer .searchview_extended_delete_prop:hover {
+  text-decoration: none;
+  color: white;
+  background: #8786b7;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
 }
 .openerp .oe_view_nocontent > img {
   float: left;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 9f2a8605875..eda410aa6ca 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -139,6 +139,10 @@ $colour4: #8a89ba
         padding: 0
     li
         list-style-type: none
+    input, textarea
+        border: 1px solid #ccc
+        @include radius(3px)
+
     // }}}
     // Generic classes {{{
     .oe_i
@@ -919,67 +923,85 @@ $colour4: #8a89ba
     .oe_sidebar
         white-space: nowrap
     // }}}
-    // SearchView xmo {{{
+    // SearchView {{{
     .oe_searchview
         cursor: text
         position: relative
         float: right
-        padding-right: 20px
-        width: 410px
+        padding: 1px 0
+        line-height: 18px
+        width: 480px
         border: 1px solid #ababab
         background: white
-        @include radius(1em)
+        @include radius(13px)
         @include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
-
+        input, textarea
+            padding: 3px
+            height: 14px
+            font-size: 11px
+            line-height: 18px
+            border: 1px solid #ccc
+            @include radius(3px)
         &.oe_focused
             border-color: $facets-border-selected
             @include box-shadow(0 1px 2px $facets-border-selected inset)
-
         .oe_searchview_clear
             cursor: pointer
             position: absolute
             top: 0
-            right: 22px
+            right: 18px
             width: 15px
             height: 100%
-            background: url(../img/attachments-close.png) center center no-repeat
-
+            background: url(../img/search_reset.gif) center center no-repeat
         .oe_searchview_unfold_drawer
             position: absolute
             top: 0
             right: 0
             height: 100%
-            line-height: 2.5em
             padding: 0 7px 0 4px
             color: #ccc
             cursor: pointer
             &:hover
                 color: #999
             &:before
-                content: "◀"
+                position: absolute
+                top: 10px
+                right: 7px
+                width: 0
+                height: 0
+                display: inline-block
+                content: ""
+                vertical-align: top
+                border-top: 5px solid #4C4C4C
+                border-left: 5px solid transparent
+                border-right: 5px solid transparent
+                @include opacity()
 
         .oe_searchview_facets
+            min-height: 22px
             &:before
                 color: #ccc
                 font-family: "mnmliconsRegular"
                 content: "r"
-                font-size: 150%
-                padding: 0 1px 0 3px
+                font-size: 130%
                 display: inline
-
+                position: relative
+                left: 6px
+                top: 2px
+                color: #a3a3a3
+                padding-right: 4px
             *
                 vertical-align: top
                 display: inline-block
-                line-height: 26px
-
+                line-height: 17px
             .oe_searchview_input, .oe_searchview_facet
-                height: 26px
+                height: 18px
+                margin: 1px 0
+                font-size: 11px
                 &:focus
                     outline: none
-
             .oe_searchview_input
                 padding: 0 3px
-
             .oe_searchview_facet
                 position: relative
                 cursor: pointer
@@ -987,162 +1009,187 @@ $colour4: #8a89ba
                 @include radius(3px)
                 background: #8786b7
                 -webkit-font-smoothing: auto
-                padding-left: 1.1em
                 // spacing for opera, FF
-                margin: 1px 0
-
                 &:focus
                     border-color: $facets-border-selected
                     @include box-shadow(0 0 3px 1px $facets-border-selected)
-
                 .oe_facet_values
                     background: #f0f0fa
                     @include radius(0 3px 3px 0)
-
                 .oe_facet_category, .oe_facet_value
-                    height: 24px
-                    padding: 1px 0.1em
-
+                    height: 18px
+                    padding: 0 4px
                 .oe_facet_category
                     color: white
                     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
-
+                .oe_facet_category.oe_i
+                    font-size: 16px
                 .oe_facet_value
                     border-left: 1px solid $facets-border
-
+                    text-shadow: 0 1px 1px white
+                    &:last-child
+                        padding-right: 16px
                 .oe_facet_remove
                     position: absolute
-                    top: 0
-                    left: 2px
-                    color: white
-
+                    top: 3px
+                    right: 3px
+                    color: #8786b7
+                    line-height: 8px
+                    width: 12px
+                    height: 12px
+                    text-align: center
+                    font-weight: bold
+                    cursor: pointer
+                    text-shadow: 0 1px 1px white
                     &:hover
-                        color: #ccc
-
+                        color: white
+                        background: #8786b7
+                        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+                        @include radius(2px)
         &.oe_searchview_open_drawer
             .oe_searchview_drawer
                 display: block
-            .oe_searchview_unfold_drawer:before
-                content: "▼"
 
         .oe_searchview_drawer
             position: absolute
             z-index: 1
             // detach drawer from field slightly
-            margin-top: 3px
+            margin-top: 4px
             top: 100%
-            right: 0
+            right: -1px
             background-color: white
             min-width: 100%
             display: none
-            border: 1px solid #ccc
+            border: 1px solid #afafb6
             text-align: left
-            padding-bottom: 0.5em
-            @include radius(1em)
-
+            @include radius(4px)
+            @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
             > div
                 border-top: 1px solid #ccc
-                margin: 3px 0
+                margin: 0
+                padding: 8px
             > div:first-child
                 border-top: none
                 margin: 0
-
+            h3
+                margin: 8px 4px 4px 12px
+                color: $section-title-color
+                font-size: 13px
             h4, h4 *
                 margin: 0
                 cursor: pointer
-
+                font-weight: normal
+                display: inline-block
+                &:hover
+                    background-color: $hover-background
             h4:before
                 content: "▸ "
-
-            button, .button
+                color: #a3a3a3
+            button
+                margin: 4px 0
+            .button
                 border: none
                 background: transparent
                 padding: 0 2px
                 @include box-shadow(none)
                 @include radius(0)
-
-            .oe_searchview_filters
+            .oe_searchview_section
                 display: table
                 width: 100%
-
                 > div
                     @include unscrew-box
                     display: table-cell
                     width: 50%
-
-                h3
-                    margin: 2px 4px 2px 8px
-                    color: $section-title-color
-
                 ul
-                    margin: 0 12px 3px
+                    margin: 0 8px 8px
                     padding: 0
                     list-style: none
-
                 li
                     list-style: none
-                    padding: 3px 6px 3px 18px
+                    padding: 2px 4px 2px 20px
                     line-height: 14px
                     color: inherit
                     cursor: pointer
-
-                    &.oe_selected
-                        background: url(/web/static/src/img/icons/gtk-apply.png) left 2px no-repeat
+                    position: relative
+                    &.oe_selected:before
+                        content: "W"
+                        font-family: "entypoRegular" !important
+                        font-size: 24px
+                        font-weight: 300 !important
+                        color: #a3a3a3
+                        position: absolute
+                        left: 4px
+                        top: -2px
                     // after oe_selected so background color is not overridden
                     &:hover
                         background-color: $hover-background
-
-
+                form
+                    margin-left: 12px
+                    p
+                        margin: 4px 0
+                        line-height: 18px
+                    button
+                        margin: 0 0 8px 0
             .oe_searchview_custom
+                padding: 0 8px 8px 8px
                 form
                     display: none
-
-                    button
-                        @include text-to-icon("S")
                 li
                     cursor: pointer
                     position: relative
-                    line-height: 1.2em
-                    padding: 2px 20px 2px 25px
-
-                    &.oe_searchview_custom_private
-                        background: url(/web/static/src/img/icons/terp-locked.png) 5px center no-repeat
-
+                    line-height: 14px
+                    padding: 2px 4px 2px 20px
                     &:hover
                         background-color: $hover-background
-
                     button
                         position: absolute
                         top: 0
                         right: 5px
-
-
             .oe_searchview_advanced
                 form
                     display: none
-
+                    margin-top: 8px
                 button.oe_add_condition:before
-                    content: "⊞ "
-                button.oe_apply:before
-                    content: "⚡ "
-
+                    content: "Z"
+                    font-family: "entypoRegular" !important
+                    font-size: 24px
+                    font-weight: 300 !important
+                    margin-right: 4px
                 ul
                     list-style: none
                     padding: 0
                 li
+                    position: relative
                     list-style: none
                     margin: 0
                     white-space: nowrap
-
             .oe_opened
                 h4:before
                     content: "▾ "
+                    position: relative
+                    top: -1px
                 form
                     display: block
 
             // delete buttons
+            .oe_searchview_custom_delete
+                position: absolute
+                left: 4px
+                top: 3px
             .oe_searchview_custom_delete, .searchview_extended_delete_prop
-                @include text-to-icon("d")
+                width: 12px
+                height: 12px
+                color: #8786b7
+                line-height: 8px
+                text-align: center
+                font-weight: bold
+                text-shadow: 0 1px 1px white
+                &:hover
+                    text-decoration: none
+                    color: white
+                    background: #8786b7
+                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+                    @include radius(2px)
     // }}}
     // Views Common {{{
     .oe_view_nocontent
diff --git a/addons/web/static/src/img/search_reset.gif b/addons/web/static/src/img/search_reset.gif
new file mode 100644
index 00000000000..9d4253e018b
--- /dev/null
+++ b/addons/web/static/src/img/search_reset.gif
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index c70cf2ab470..f9e737471ae 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -1564,15 +1564,14 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
                                          : 'oe_searchview_custom_public')
                 .text(filter.name);
 
-            $('<button type="button" class="oe_searchview_custom_delete">')
-                .text(_t("Delete"))
+            $('<a class="oe_searchview_custom_delete">x</a>')
                 .click(function (e) {
                     e.stopPropagation();
                     self.model.call('unlink', [id]).then(function () {
                         $filter.remove();
                     });
                 })
-                .appendTo($filter);
+                .prependTo($filter);
         }
 
         $filter.unbind('click').click(function () {
@@ -1643,7 +1642,7 @@ instance.web.search.Filters = instance.web.search.Input.extend({
         var col1 = [], col2 = _(this.view.controls).map(function (inputs, group) {
             var filters = _(inputs).filter(is_group);
             return {
-                name: group === 'null' ? _t("Filters") : group,
+                name: group === 'null' ? "<span class='oe_i'>q</span> " + _t("Filters") : "<span class='oe_i'>w</span> " + group,
                 filters: filters,
                 length: _(filters).chain().map(function (i) {
                     return i.filters.length; }).sum().value()
@@ -1666,7 +1665,7 @@ instance.web.search.Filters = instance.web.search.Input.extend({
     },
     render_column: function (column, $el) {
         return $.when.apply(null, _(column).map(function (group) {
-            $('<h3>').text(group.name).appendTo($el);
+            $('<h3>').html(group.name).appendTo($el);
             return $.when.apply(null,
                 _(group.filters).invoke('appendTo', $el));
         }));
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index b1101fb09d2..594b3e3c8d1 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1310,7 +1310,7 @@
 <div t-name="SearchView.FacetView"
      class="oe_searchview_facet"
      tabindex="0"
-    ><span class="oe_facet_remove">✖</span
+    ><span class="oe_facet_remove">x</span
     ><span class="oe_facet_category oe_i" t-if="widget.model.has('icon')">
         <t t-esc="widget.model.get('icon')"/>
     </span
@@ -1475,19 +1475,25 @@
         </t>
     </t>
 </t>
-<div t-name="SearchView.Filters" class="oe_searchview_filters">
+<div t-name="SearchView.Filters" class="oe_searchview_section">
 
 </div>
-<div t-name="SearchView.CustomFilters" class="oe_searchview_custom">
-    <ul class="oe_searchview_custom_list"/>
-    <h4 class="oe_searchview_custom_title">
-        <label for="oe_searchview_custom_input">Save search</label></h4>
-    <form>
-        <input id="oe_searchview_custom_input"/>
-        <button>Save</button><br/>
-        <label for="oe_searchview_custom_public">Share with all users:</label>
-        <input id="oe_searchview_custom_public" type="checkbox"/>
-    </form>
+<div t-name="SearchView.CustomFilters" class="oe_searchview_section">
+    <div>
+        <h3><span class="oe_i">M</span> Custom Filters</h3>
+        <ul class="oe_searchview_custom_list"/>
+        <div class="oe_searchview_custom">
+          <h4>Save current filter</h4>
+          <form>
+            <p><input id="oe_searchview_custom_input" placeholder="Filter name"/></p>
+            <p><input id="oe_searchview_custom_public" type="checkbox"/>
+              <label for="oe_searchview_custom_public">Share with all users</label></p>
+            <button>Save</button>
+          </form>
+        </div>
+    </div>
+    <div>
+    </div>
 </div>
 <div t-name="SearchView.advanced" class="oe_searchview_advanced">
     <h4>Advanced Search</h4>
@@ -1495,7 +1501,7 @@
         <ul>
 
         </ul>
-        <button class="oe_add_condition" type="button">Add a condition</button>
+        <button class="oe_add_condition button" type="button">Add a condition</button><br/>
         <button class="oe_apply" type="submit">Apply</button>
     </form>
 </div>
@@ -1512,7 +1518,7 @@
         </select>
         <select class="searchview_extended_prop_op"/>
         <span class="searchview_extended_prop_value"/>
-        <button type="button" class="searchview_extended_delete_prop">Delete</button>
+        <a class="searchview_extended_delete_prop button">x</a>
     </li>
 </t>
 <t t-name="SearchView.extended_search.proposition.char">