[IMP] redo faceted search styles from scratch

bzr revid: xmo@openerp.com-20120514142449-m2us3n83iqp2jskb

2 files changed, 79 insertions, 83 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 11095d7baf1..5b032ebed4c 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1091,9 +1091,6 @@
 .openerp .oe_searchview .oe_searchview_unfold_drawer:before {
   content: "▾";
 }
-.openerp .oe_searchview .oe_searchview_facets {
-  display: inline-block;
-}
 .openerp .oe_searchview .oe_searchview_facets:before {
   color: #cccccc;
   font-family: "mnmliconsRegular";
@@ -1102,65 +1099,64 @@
   padding: 0 1px 0 3px;
   display: inline;
 }
-.openerp .oe_searchview .oe_searchview_input {
-  height: 2em;
-  padding: 0 3px;
+.openerp .oe_searchview .oe_searchview_facets * {
+  vertical-align: top;
   display: inline-block;
+  line-height: 26px;
 }
-.openerp .oe_searchview .oe_searchview_input:focus {
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_input, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet {
+  height: 26px;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_input:focus, .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet:focus {
   outline: none;
 }
-.openerp .oe_searchview .oe_searchview_facet {
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_input {
+  padding: 0 3px;
+}
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet {
   position: relative;
   cursor: pointer;
-  display: inline-block;
-  margin: 1px 0;
-  padding: 0;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  -box-shadow: none;
-  text-align: left;
   border: 1px solid #afafb6;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
-  background: #f0f0fa;
-  height: 18px;
-  line-height: 18px;
+  background: #8786b7;
   -webkit-font-smoothing: auto;
+  padding-left: 1.1em;
+  margin: 1px 0;
 }
-.openerp .oe_searchview .oe_searchview_facet span {
-  display: inline-block;
-  height: 18px;
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet:focus {
+  border-color: #a6a6fe;
+  -moz-box-shadow: 0 0 3px 1px #a6a6fe;
+  -webkit-box-shadow: 0 0 3px 1px #a6a6fe;
+  -box-shadow: 0 0 3px 1px #a6a6fe;
 }
-.openerp .oe_searchview .oe_searchview_facet span span {
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_values {
+  background: #f0f0fa;
+  -moz-border-radius: 0 3px 3px 0;
+  -webkit-border-radius: 0 3px 3px 0;
+  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;
+}
+.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_value {
   border-left: 1px solid #afafb6;
-  padding: 0 4px;
 }
-.openerp .oe_searchview .oe_searchview_facet .oe_facet_remove {
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_remove {
   position: absolute;
   top: 0;
   left: 2px;
   color: white;
 }
-.openerp .oe_searchview .oe_searchview_facet .oe_facet_remove:hover {
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_remove:hover {
   color: #cccccc;
 }
-.openerp .oe_searchview .oe_searchview_facet .oe_facet_category {
-  padding: 0 4px 0 14px;
-  color: white;
-  background: #8786b7;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
-}
-.openerp .oe_searchview .oe_searchview_facet:focus {
-  border-color: #a6a6fe;
-  -moz-box-shadow: 0 0 3px 1px #a6a6fe;
-  -webkit-box-shadow: 0 0 3px 1px #a6a6fe;
-  -box-shadow: 0 0 3px 1px #a6a6fe;
-}
-.openerp .oe_searchview .oe_searchview_facet:focus .oe_facet_category {
-  margin-left: 0;
-}
 .openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {
   display: block;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index c1824427f58..1c868f107cb 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -857,7 +857,6 @@ $colour4: #8a89ba
                 content: "▾"
 
         .oe_searchview_facets
-            display: inline-block
             &:before
                 color: #ccc
                 font-family: "mnmliconsRegular"
@@ -866,56 +865,57 @@ $colour4: #8a89ba
                 padding: 0 1px 0 3px
                 display: inline
 
-        .oe_searchview_input
-            height: 2em
-            padding: 0 3px
-            display: inline-block
-            &:focus
-                outline: none
-
-        .oe_searchview_facet
-            position: relative
-            cursor: pointer
-            display: inline-block
-            margin: 1px 0
-            padding: 0
-            @include box-shadow(none)
-            text-align: left
-            border: 1px solid $facets-border
-            @include radius(3px)
-            background: #f0f0fa
-            height: 18px
-            line-height: 18px
-            -webkit-font-smoothing: auto
-
-            span
+            *
+                vertical-align: top
                 display: inline-block
-                height: 18px
-                span
-                    border-left: 1px solid $facets-border
-                    padding: 0 4px
+                line-height: 26px
 
-            .oe_facet_remove
-                position: absolute
-                top: 0
-                left: 2px
-                color: white
+            .oe_searchview_input, .oe_searchview_facet
+                height: 26px
+                &:focus
+                    outline: none
 
-                &:hover
-                    color: #ccc
+            .oe_searchview_input
+                padding: 0 3px
 
-            .oe_facet_category
-                padding: 0 4px 0 14px
-                color: white
+            .oe_searchview_facet
+                position: relative
+                cursor: pointer
+                border: 1px solid $facets-border
+                @include radius(3px)
                 background: #8786b7
-                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+                -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)
+                &: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
 
                 .oe_facet_category
-                    margin-left: 0
+                    color: white
+                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+
+                .oe_facet_value
+                    border-left: 1px solid $facets-border
+
+                .oe_facet_remove
+                    position: absolute
+                    top: 0
+                    left: 2px
+                    color: white
+
+                    &:hover
+                        color: #ccc
 
         &.oe_searchview_open_drawer
             .oe_searchview_drawer