[IMP] web client refactoring: action and view manager

large rewrite of action manager, view manager and
viewmanageraction.  The goal is to lay the foundation
for the redesign of the advanced search view.

This commit includes:
* improvements to the display order (no/less flickering)
* large simplification of the breadcrumbs code
* much better html layout for the header (no table)
* bootstrapisation of the view manager
* lots of optimizations/simplification
* a base.css.map, courtesy of the last sass version

2 files changed, 252 insertions, 222 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 23fb4ed2f09..41d1f35bd0c 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -161,16 +161,16 @@
 }
 .openerp .zebra tbody tr:hover td {
   background-color: #e6e6e6;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dedede));
-  background-image: -webkit-linear-gradient(top, #eeeeee, #dedede);
-  background-image: -moz-linear-gradient(top, #eeeeee, #dedede);
-  background-image: -ms-linear-gradient(top, #eeeeee, #dedede);
-  background-image: -o-linear-gradient(top, #eeeeee, #dedede);
-  background-image: linear-gradient(to bottom, #eeeeee, #dedede);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#dedede));
+  background-image: -webkit-linear-gradient(top, #eee, #dedede);
+  background-image: -moz-linear-gradient(top, #eee, #dedede);
+  background-image: -ms-linear-gradient(top, #eee, #dedede);
+  background-image: -o-linear-gradient(top, #eee, #dedede);
+  background-image: linear-gradient(to bottom, #eee, #dedede);
 }
 .openerp input, .openerp textarea, .openerp select {
   padding: 2px 4px;
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -184,7 +184,7 @@
   font-weight: bold;
   font-size: inherit;
 }
-.openerp a.button:link, .openerp a.button:visited, .openerp button, .openerp .oe_button, .openerp input[type='submit'] {
+.openerp a.button:link, .openerp a.button:visited, .openerp .oe_button, .openerp input[type='submit'] {
   display: inline-block;
   border: 1px solid rgba(0, 0, 0, 0.4);
   color: #4c4c4c;
@@ -209,7 +209,7 @@
   -webkit-font-smoothing: antialiased;
   outline: none;
 }
-.openerp a.button:hover, .openerp button:hover, .openerp .oe_button:hover, .openerp input[type='submit']:hover {
+.openerp a.button:hover, .openerp .oe_button:hover, .openerp input[type='submit']:hover {
   background-color: #ececec;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#e3e3e3));
   background-image: -webkit-linear-gradient(top, #f6f6f6, #e3e3e3);
@@ -220,7 +220,7 @@
   cursor: pointer;
   background-position: 0;
 }
-.openerp a.button:focus, .openerp button:focus, .openerp .oe_button:focus, .openerp input[type='submit']:focus {
+.openerp a.button:focus, .openerp .oe_button:focus, .openerp input[type='submit']:focus {
   border: 1px solid #80bfff;
   background-position: 0;
   background-color: #ececec;
@@ -234,7 +234,7 @@
   -webkit-box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
   box-shadow: 0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, 0.8) inset;
 }
-.openerp a.button:active, .openerp a.button.active, .openerp button:active, .openerp .oe_button:active, .openerp .oe_button.active, .openerp input[type='submit']:active, .openerp input[type='submit'].active {
+.openerp a.button:active, .openerp a.button.active, .openerp .oe_button:active, .openerp .oe_button.active, .openerp input[type='submit']:active, .openerp input[type='submit'].active {
   background-color: #ececec;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f6f6f6));
   background-image: -webkit-linear-gradient(top, #e3e3e3, #f6f6f6);
@@ -246,18 +246,18 @@
   -webkit-box-shadow: none;
   box-shadow: none;
 }
-.openerp a.button.disabled, .openerp button:disabled, .openerp .oe_button:disabled, .openerp input[type='submit']:disabled {
+.openerp a.button.disabled, .openerp .oe_button:disabled, .openerp input[type='submit']:disabled {
   background: #efefef !important;
   border: 1px solid #d1d1d1 !important;
   -moz-box-shadow: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
-  color: #aaaaaa !important;
+  color: #aaa !important;
   cursor: default;
-  text-shadow: 0 1px 1px white !important;
+  text-shadow: 0 1px 1px #fff !important;
 }
 .openerp .ui-widget-content a {
-  color: #7c7bad;
+  color: #7C7BAD;
 }
 .openerp .oe_bounce_container {
   display: inline-block;
@@ -305,7 +305,7 @@
   cursor: wait;
 }
 .openerp .oe_fade {
-  color: #888888;
+  color: #888;
   font-weight: normal;
 }
 .openerp .oe_bold {
@@ -316,7 +316,7 @@
 }
 .openerp .oe_highlight {
   color: white;
-  background: #dc5f59;
+  background: #DC5F59;
 }
 .openerp button.oe_highlight {
   background-color: #c02c2c;
@@ -349,7 +349,7 @@
   background-image: linear-gradient(to bottom, #c52020, #d22323);
 }
 .openerp .oe_background_grey {
-  background: #eeeeee !important;
+  background: #eee !important;
 }
 .openerp .oe_form_dirty .oe_highlight_on_dirty {
   color: white;
@@ -369,7 +369,7 @@
   box-shadow: none;
 }
 .openerp .oe_form_dirty button.oe_highlight_on_dirty:hover {
-  background: #ed6f6a;
+  background: #ED6F6A;
 }
 .openerp .oe_warning_redirect {
   border: none !important;
@@ -385,7 +385,7 @@
   font-weight: normal;
   width: 132px !important;
   height: 40px;
-  color: #666666;
+  color: #666;
   margin: 0px -1px -1px 0px;
   padding: 0;
   border: 1px solid #dddddd;
@@ -401,7 +401,7 @@
   line-height: 120%;
 }
 .openerp .oe_stat_button .stat_button_icon {
-  color: #7c7bad;
+  color: #7C7BAD;
   font-size: 24px;
   padding: 0px 3px;
   width: 37px;
@@ -482,7 +482,7 @@
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
-  color: #7c7bad;
+  color: #7C7BAD;
   font-weight: bold;
 }
 .openerp .oe_button.oe_link span:hover {
@@ -505,7 +505,7 @@
   max-width: 650px;
 }
 .openerp .oe_grey {
-  color: #aaaaaa;
+  color: #aaa;
 }
 .openerp .oe_error_detail hr {
   display: block;
@@ -525,10 +525,10 @@
   -webkit-border-radius: 6px;
   border-radius: 6px;
   background-position: center center;
-  background-image: -webkit-radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-  background-image: -moz-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-  background-image: -ms-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
-  background-image: radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
+  background-image: -webkit-radial-gradient(circle, #eee 0%, #ccc 40%, #bbb 100%);
+  background-image: -moz-radial-gradient(#eee 0%, #ccc 40%, #bbb 100%);
+  background-image: -ms-radial-gradient(#eee 0%, #ccc 40%, #bbb 100%);
+  background-image: radial-gradient(circle, #eee 0%, #ccc 40%, #bbb 100%);
 }
 .openerp .oe_kanban_status_green {
   background: green;
@@ -562,11 +562,11 @@
   -webkit-border-radius: 3px;
   border-radius: 3px;
   background: #f0f0fa;
-  color: #4c4c4c;
+  color: #4C4C4C;
 }
 .openerp .oe_tag_dark {
-  background: #7c7bad;
-  color: #eeeeee;
+  background: #7C7BAD;
+  color: #eee;
 }
 .openerp .oe_form_field_radio.oe_horizontal {
   white-space: nowrap;
@@ -636,13 +636,13 @@
 }
 .openerp .oe_notebook > li > a {
   display: block;
-  color: gray;
+  color: #808080;
 }
 .openerp .oe_notebook > li.ui-tabs-active > a {
   color: #4c4c4c;
 }
 .openerp .oe_notebook {
-  border-color: #dddddd;
+  border-color: #ddd;
   border-style: solid;
   border-width: 0 0 1px;
 }
@@ -660,16 +660,16 @@
 }
 .openerp .oe_notebook > li > a:hover {
   text-decoration: none;
-  background-color: #eeeeee;
-  border-color: #eeeeee #eeeeee #dddddd;
+  background-color: #eee;
+  border-color: #eee #eee #ddd;
 }
 .openerp .ui-tabs .oe_notebook.ui-tabs-nav li.ui-tabs-active {
   border-bottom: none;
   padding-bottom: 1px;
 }
 .openerp .oe_notebook > li.ui-state-active > a, .openerp .oe_notebook > li.ui-state-active > a:hover {
-  background-color: white;
-  border: 1px solid #dddddd;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
   border-bottom-color: transparent;
   cursor: default;
 }
@@ -690,7 +690,7 @@
   cursor: pointer;
 }
 .openerp .oe_dropdown_toggle {
-  color: #2b2b2b;
+  color: #2B2B2B;
   font-weight: normal;
 }
 .openerp .oe_dropdown_hover:hover .oe_dropdown_menu, .openerp .oe_dropdown_menu.oe_opened {
@@ -812,10 +812,10 @@
   top: 0;
   right: 50%;
   padding: 4px 12px;
-  background: #a61300;
+  background: #A61300;
   color: white;
   text-align: center;
-  border: 1px solid #990000;
+  border: 1px solid #900;
   border-top: none;
   -moz-border-radius-bottomright: 8px;
   -moz-border-radius-bottomleft: 8px;
@@ -833,12 +833,12 @@
   width: 32px;
 }
 .openerp .oe_database_manager {
-  background: white;
-  color: black;
+  background: #fff;
+  color: #000;
   text-align: left;
 }
 .openerp .oe_database_manager .oe_database_manager_menu {
-  color: black;
+  color: #000;
 }
 .openerp .oe_webclient {
   width: 100%;
@@ -881,7 +881,7 @@
   width: 100%;
   display: none;
   text-align: center;
-  color: #eeeeee;
+  color: #eee;
   background: rgba(37, 37, 37, 0.9);
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -923,7 +923,7 @@
 .openerp .oe_secondary_menu_section {
   font-weight: bold;
   margin-left: 8px;
-  color: #7c7bad;
+  color: #7C7BAD;
 }
 .openerp .oe_secondary_submenu {
   margin-bottom: 10px !important;
@@ -1003,7 +1003,7 @@
 }
 .openerp .oe_about .user-details .user-info-block .navigation li.active a {
   background: #a24689;
-  color: white;
+  color: #fff;
 }
 .openerp .oe_about .user-details .user-info-block .user-body {
   text-align: center;
@@ -1027,10 +1027,10 @@
   transform: scale(1.3);
 }
 .openerp .oe_about #social .social-fb:hover {
-  color: #3b5998;
+  color: #3B5998;
 }
 .openerp .oe_about #social .social-tw:hover {
-  color: #4099ff;
+  color: #4099FF;
 }
 .openerp .oe_about #social .social-gp:hover {
   color: #d34836;
@@ -1045,8 +1045,11 @@
   width: 100%;
   height: 100%;
 }
-.openerp .oe_application a {
-  color: #7c7bad;
+.openerp .oe_application .oe-view-manager-body a {
+  color: #7C7BAD;
+}
+.openerp .oe_application .oe-view-manager-body .oe-view-manager-view-kanban:not(:empty) {
+  height: 100%;
 }
 .openerp .oe_application > div {
   position: relative;
@@ -1079,6 +1082,63 @@
   overflow: hidden;
   font-weight: bold;
 }
+.openerp .oe-view-manager-header {
+  height: 90px;
+  overflow: hidden;
+  border-bottom: 1px solid black;
+  display: none;
+}
+.openerp .oe-view-manager-header .row {
+  height: 45px;
+}
+.openerp .oe-view-manager-header .oe-view-title {
+  float: left;
+  font-size: 18px;
+  font-weight: bold;
+  margin: 0;
+}
+.openerp .oe-view-manager-header .oe-header-title {
+  padding-left: 0;
+}
+.openerp .oe-view-manager-header .oe-view-manager-search-view {
+  float: right;
+  padding-top: 5px;
+}
+.openerp .oe-view-manager-header .oe-view-manager-switch {
+  float: right;
+}
+.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-kanban:before {
+  content: "";
+}
+.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-list:before {
+  content: "";
+}
+.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-form:before {
+  content: "";
+}
+.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-graph:before {
+  content: "";
+}
+.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-calendar:before {
+  content: "";
+}
+.openerp .oe-view-manager-header .oe-view-manager-switch .oe-vm-switch-gantt:before {
+  content: "";
+}
+.openerp .oe-view-manager-header .oe-view-manager-buttons {
+  float: left;
+}
+.openerp .oe-view-manager-header .oe-view-manager-buttons > div {
+  display: none;
+}
+.openerp .oe_application > div > div > .oe-view-manager-body {
+  position: absolute;
+  top: 90px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto;
+}
 .openerp .oe_view_manager {
   display: table;
   height: inherit;
@@ -1122,7 +1182,7 @@
   line-height: 30px;
 }
 .openerp .oe_view_manager table.oe_view_manager_header h2 a {
-  color: #7c7bad;
+  color: #7C7BAD;
 }
 .openerp .oe_view_manager table.oe_view_manager_header .oe_dropdown_menu {
   line-height: normal;
@@ -1148,13 +1208,13 @@
   text-decoration: none;
 }
 .openerp .oe_view_manager table.oe_view_manager_header .oe_button_group .active {
-  background: #999999;
+  background: #999;
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
 }
 .openerp .oe_view_manager table.oe_view_manager_header .oe_button_group .active a {
-  color: white;
+  color: #fff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
 }
 .openerp .oe_view_manager table.oe_view_manager_header .oe_view_manager_buttons {
@@ -1250,40 +1310,18 @@
   text-decoration: none;
 }
 .openerp .oe_pager_group .active {
-  background: #999999;
+  background: #999;
   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) inset;
 }
 .openerp .oe_pager_group .active a {
-  color: white;
+  color: #fff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
 }
 .openerp .oe_list_pager.oe_list_pager_single_page .oe_pager_group {
   display: none;
 }
-.openerp .oe_view_manager_current {
-  height: 100%;
-}
-.openerp .oe_view_manager_current > .oe_view_manager_header {
-  border-bottom: 1px solid #cacaca;
-  background-color: #ededed;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
-  background-image: -webkit-linear-gradient(top, #fcfcfc, #dedede);
-  background-image: -moz-linear-gradient(top, #fcfcfc, #dedede);
-  background-image: -ms-linear-gradient(top, #fcfcfc, #dedede);
-  background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
-  background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
-  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 9px rgba(0, 0, 0, 0.1);
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 9px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 9px rgba(0, 0, 0, 0.1);
-}
-.openerp .oe_view_manager_current > .oe_view_manager_header .oe_header_row td {
-  padding: 8px;
-}
-.openerp .oe_view_manager_current > .oe_view_manager_header .oe_header_row:first-child td {
-  padding-top: 8px;
-}
 .openerp .oe_view_manager_inline, .openerp .oe_view_manager_inlineview {
   height: 100%;
 }
@@ -1305,18 +1343,12 @@
 .openerp .oe_searchview {
   cursor: text;
   position: relative;
-  float: right;
   padding: 1px 0;
-  line-height: 18px;
   min-width: 400px;
-  border: 1px solid #ababab;
-  background: white;
+  width: 400px;
   -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;
@@ -1343,73 +1375,44 @@
 .openerp .oe_searchview .oe_searchview_clear {
   cursor: pointer;
   position: absolute;
-  top: 0;
+  top: 3px;
   right: 18px;
   width: 15px;
   height: 24px;
-  background: url(../img/search_reset.gif) center center no-repeat;
 }
 .openerp .oe_searchview .oe_searchview_unfold_drawer {
   position: absolute;
   top: 0;
   right: 0;
-  height: 24px;
-  padding: 0 7px 0 4px;
-  color: #cccccc;
+  color: #ccc;
   cursor: pointer;
 }
 .openerp .oe_searchview .oe_searchview_unfold_drawer:hover {
-  color: #999999;
+  color: #999;
 }
 .openerp .oe_searchview .oe_searchview_unfold_drawer:before {
   position: absolute;
-  top: 10px;
-  right: 7px;
+  top: 7px;
+  right: 18px;
   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_search {
-  font-size: 1px;
-  letter-spacing: -1px;
-  color: transparent;
-  text-shadow: none;
-  font-weight: normal;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
+  cursor: pointer;
   position: absolute;
-  left: 3px;
-  top: 1px;
-  padding: 0;
-  border: none;
-  background: transparent;
-}
-.openerp .oe_searchview .oe_searchview_search:before {
-  font: 21px "mnmliconsRegular";
-  content: "r";
-  color: #a3a3a3;
+  left: 6px;
+  top: 8px;
 }
 .openerp .oe_searchview .oe_searchview_facets {
   min-height: 22px;
-  margin: 0 35px 0 15px;
+  margin: 2px 35px 0 20px;
 }
 .openerp .oe_searchview .oe_searchview_facets * {
   vertical-align: top;
   display: inline-block;
-  line-height: 17px;
+  font-size: 100%;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet {
+  height: 20px;
   margin: 1px 0;
   font-size: 11px;
 }
@@ -1431,6 +1434,9 @@
   padding: 0;
   -webkit-font-smoothing: auto;
 }
+.openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet span {
+  height: 18px;
+}
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet:focus {
   border-color: #a6a6fe;
   -moz-box-shadow: 0 0 3px 1px #a6a6fe;
@@ -1439,9 +1445,6 @@
 }
 .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 {
   padding: 0 4px;
@@ -1454,9 +1457,7 @@
   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;
-  color: #4c4c4c;
+  color: #4C4C4C;
 }
 .openerp .oe_searchview .oe_searchview_facets .oe_searchview_facet .oe_facet_value:last-child {
   padding-right: 16px;
@@ -1560,7 +1561,7 @@
   margin-bottom: 0;
 }
 .openerp .oe_searchview_drawer dt {
-  color: #7c7bad;
+  color: #7C7BAD;
   font-size: 13px;
   line-height: 24px;
 }
@@ -1783,8 +1784,8 @@
   display: inline-block;
 }
 .openerp .oe_form_invalid input, .openerp .oe_form_invalid select, .openerp .oe_form_invalid textarea {
-  background-color: #ff6666 !important;
-  border: 1px solid #dd0000 !important;
+  background-color: #F66 !important;
+  border: 1px solid #D00 !important;
 }
 .openerp .oe_view_manager_current .oe_form_editable .oe_highlight {
   color: #404040;
@@ -1878,7 +1879,7 @@
 }
 .openerp .oe_application .oe_form_sheetbg {
   background: url(/web/static/src/img/form_sheetbg.png);
-  border-bottom: 1px solid #dddddd;
+  border-bottom: 1px solid #ddd;
 }
 .openerp .oe_application .oe_form_sheetbg .oe_subtotal_footer label {
   font-weight: bold;
@@ -1938,7 +1939,7 @@
   padding: 16px 16px 48px;
 }
 .openerp .oe_form div.oe_form_configuration p, .openerp .oe_form div.oe_form_configuration ul, .openerp .oe_form div.oe_form_configuration ol {
-  color: #aaaaaa;
+  color: #aaa;
   max-width: 650px;
 }
 .openerp .oe_form div.oe_form_configuration label {
@@ -1979,8 +1980,8 @@
   font-weight: normal !important;
 }
 .openerp .oe_form .oe_form_box_info {
-  background: #ffee99;
-  border-bottom: 1px solid #ccbb66;
+  background: #fe9;
+  border-bottom: 1px solid #cb6;
   padding: 4px;
 }
 .openerp .oe_form .oe_form_box_info > p {
@@ -1988,7 +1989,7 @@
 }
 .openerp .oe_form .oe_form_box_warning {
   background: #bd362f;
-  border-bottom: 1px solid #990000;
+  border-bottom: 1px solid #900;
   padding: 4px;
 }
 .openerp .oe_form .oe_form_box_warning * {
@@ -2002,7 +2003,7 @@
   margin: 2px;
 }
 .openerp .oe_form td.oe_form_group_cell_label {
-  border-right: 1px solid #dddddd;
+  border-right: 1px solid #ddd;
   padding: 2px 0px;
 }
 .openerp .oe_form td.oe_form_group_cell_label label {
@@ -2027,7 +2028,7 @@
 }
 .openerp .oe_form .oe_form_label_help[for] span, .openerp .oe_form .oe_form_label[for] span {
   font-size: 80%;
-  color: darkgreen;
+  color: darkGreen;
   vertical-align: top;
   position: relative;
   top: -4px;
@@ -2040,13 +2041,13 @@
   font-weight: bold;
   font-size: 20px;
   margin: 15px 0px 10px 0px;
-  color: #7c7bad;
+  color: #7C7BAD;
 }
 .openerp .oe_horizontal_separator:empty {
   height: 5px;
 }
 .openerp .oe_vertical_separator {
-  border-left: 1px solid #666666;
+  border-left: 1px solid #666;
   padding: 0 4px 0 4px;
 }
 .openerp .oe_form_field_progressbar {
@@ -2060,7 +2061,7 @@
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
-  border: 1px solid #999999;
+  border: 1px solid #999;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2141,8 +2142,8 @@
   font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
 }
 .openerp .oe_form input[readonly], .openerp .oe_form select[readonly], .openerp .oe_form textarea[readonly], .openerp .oe_form input[disabled], .openerp .oe_form select[disabled] {
-  background: #e5e5e5 !important;
-  color: #666666;
+  background: #E5E5E5 !important;
+  color: #666;
 }
 .openerp .oe_form textarea[disabled] {
   border: none;
@@ -2156,7 +2157,7 @@
   color: #4c4c4c;
 }
 .openerp .oe_form textarea.oe_inline[disabled] {
-  border-left: 8px solid #eeeeee;
+  border-left: 8px solid #eee;
 }
 .openerp .oe_form .oe_form_field_url button img {
   vertical-align: top;
@@ -2173,11 +2174,11 @@
   display: inline-block;
 }
 .openerp .oe_form .oe_form_required input:not([disabled]):not([readonly]), .openerp .oe_form .oe_form_required select:not([disabled]):not([readonly]), .openerp .oe_form .oe_form_required textarea:not([disabled]):not([readonly]) {
-  background-color: #d2d2ff !important;
+  background-color: #D2D2FF !important;
 }
 .openerp .oe_form .oe_form_invalid input, .openerp .oe_form .oe_form_invalid select, .openerp .oe_form .oe_form_invalid textarea {
-  background-color: #ff6666 !important;
-  border: 1px solid #dd0000 !important;
+  background-color: #F66 !important;
+  border: 1px solid #D00 !important;
 }
 .openerp .oe_form .oe_input_icon {
   cursor: pointer;
@@ -2267,7 +2268,7 @@
   width: 100%;
   display: none;
   text-align: center;
-  color: #eeeeee;
+  color: #eee;
   background: rgba(37, 37, 37, 0.9);
   -moz-border-radius: 3px 3px 0 0;
   -webkit-border-radius: 3px 3px 0 0;
@@ -2304,7 +2305,7 @@
 .openerp .oe_fileupload .oe_add button.oe_attach {
   width: 24px;
   background: transparent;
-  color: #7c7bad;
+  color: #7C7BAD;
   box-shadow: none;
   border: none;
   text-shadow: none;
@@ -2323,7 +2324,7 @@
   cursor: pointer;
 }
 .openerp .oe_fileupload .oe_add .oe_attach_label {
-  color: #7c7bad;
+  color: #7C7BAD;
   margin-left: -3px;
 }
 .openerp .oe_fileupload .oe_attachments {
@@ -2349,7 +2350,7 @@
   background: white;
 }
 .openerp .oe_fileupload .oe_attachments .oe_attachment:nth-child(even) {
-  background: #f4f5fa;
+  background: #F4F5FA;
 }
 .openerp .oe_form_field_many2one {
   display: inline-block;
@@ -2510,7 +2511,7 @@
   background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
 }
 .openerp ul.oe_form_status_clickable li > .label {
-  color: #7c7bad;
+  color: #7C7BAD;
 }
 .openerp ul.oe_form_status_clickable li.oe_active:hover {
   background-color: #3a699f;
@@ -2580,7 +2581,7 @@
   background-color: #d2d2ff;
 }
 .openerp .oe_form_editable .oe_list_editable .oe_list_content td.oe_readonly {
-  background-color: #eeeeee;
+  background-color: #eee;
 }
 .openerp .oe_list_editable .oe_list_content td.oe_list_field_cell {
   padding: 4px 6px 3px;
@@ -2617,7 +2618,7 @@
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   border-radius: 0;
-  border: 1px solid #aaaaff;
+  border: 1px solid #aaf;
   margin: 0;
 }
 .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field input, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field textarea, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field select {
@@ -2709,7 +2710,7 @@
 }
 .openerp .oe_list_content > thead {
   border-bottom: 2px solid #cacaca;
-  background: #eeeeee;
+  background: #eee;
   vertical-align: top;
 }
 .openerp .oe_list_content td, .openerp .oe_list_content th {
@@ -2728,7 +2729,7 @@
   margin-top: 7px;
   border-width: 0 4px 4px;
   border-style: solid;
-  border-color: black transparent;
+  border-color: #000 transparent;
   visibility: hidden;
 }
 .openerp .oe_list_content th.sortup div:after {
@@ -2745,7 +2746,7 @@
   border-bottom: none;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top: 4px solid black;
+  border-top: 4px solid #000;
   visibility: visible;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
@@ -2758,7 +2759,7 @@
 }
 .openerp .oe_list_content > tbody > tr {
   height: 27px;
-  border-top: 1px solid #dddddd;
+  border-top: 1px solid #ddd;
 }
 .openerp .oe_list_content > tbody > tr > td.oe_list_field_cell {
   padding: 3px 6px;
@@ -2797,7 +2798,7 @@
 .openerp .oe_list_content > tfoot {
   border-top: 2px solid #cacaca;
   border-bottom: 1px solid #cacaca;
-  background: #eeeeee;
+  background: #eee;
   font-weight: bold;
 }
 .openerp .oe_list_content .numeric {
@@ -2828,7 +2829,7 @@
 .openerp .oe_list_content td.oe_list_field_handle .oe_list_handle:before {
   font: 18px "entypoRegular";
   content: "}";
-  color: #e0e0e0;
+  color: #E0E0E0;
 }
 .openerp .oe_list_content .oe_list_field_progressbar progress {
   width: 100%;
@@ -2990,7 +2991,7 @@
   -webkit-margin-end: 0px;
 }
 .openerp pre {
-  background-color: white;
+  background-color: #FFFFFF;
   border: none;
   padding: 10px 0 3px 0;
 }
@@ -3035,9 +3036,9 @@
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
-  -moz-box-shadow: 0 0 5px 5px #999999;
-  -webkit-box-shadow: 0 0 5px 5px #999999;
-  box-shadow: 0 0 5px 5px #999999;
+  -moz-box-shadow: 0 0 5px 5px #999;
+  -webkit-box-shadow: 0 0 5px 5px #999;
+  box-shadow: 0 0 5px 5px #999;
 }
 
 div.ui-widget-overlay {
@@ -3076,7 +3077,7 @@ div.ui-widget-overlay {
   background: #f0f0fa;
 }
 .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
-  background: #7c7bad;
+  background: #7C7BAD;
 }
 
 .ui-corner-all {
@@ -3090,7 +3091,7 @@ div.ui-widget-overlay {
 }
 
 body.oe_single_form {
-  background: #eeeeee url(/web/static/src/img/form_sheetbg.png);
+  background: #eee url(/web/static/src/img/form_sheetbg.png);
   height: 100%;
 }
 body.oe_single_form .oe_single_form_logo {
@@ -3124,7 +3125,7 @@ body.oe_single_form .oe_single_form_container {
   width: 80px;
 }
 .openerp_ie .oe_form_field_boolean input {
-  background: white;
+  background: #fff;
 }
 .openerp_ie .db_option_table .oe_form_field_selection {
   width: auto;
@@ -3315,7 +3316,7 @@ body.oe_single_form .oe_single_form_container {
   max-width: 350px;
 }
 .tooltip .tooltip-inner .oe_tooltip_string {
-  color: #ffdd55;
+  color: #FD5;
   font-weight: bold;
   font-size: 13px;
 }
@@ -3339,7 +3340,7 @@ body.oe_single_form .oe_single_form_container {
   color: white;
 }
 .tooltip .tooltip-inner .oe_tooltip_close:hover {
-  color: #999999;
+  color: #999;
   cursor: pointer;
 }
 .tooltip .tooltip-inner .oe_tooltip_message {
@@ -3414,7 +3415,7 @@ div.tour-backdrop {
   bottom: 0;
   left: 0;
   z-index: 1100;
-  background-color: black;
+  background-color: #000;
   opacity: 0.8;
 }
 
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index a8efd0f29cb..5aeaccf07aa 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -267,7 +267,7 @@ $sheet-padding: 16px
         font-size: inherit
     // }}}
     // Button style {{{
-    a.button:link, a.button:visited, button, .oe_button, input[type='submit']
+    a.button:link, a.button:visited, .oe_button, input[type='submit']
         display: inline-block
         border: 1px solid rgba(0,0,0,0.4)
         color: #4c4c4c
@@ -282,22 +282,22 @@ $sheet-padding: 16px
         -webkit-font-smoothing: antialiased
         outline: none
 
-    a.button:hover, button:hover,.oe_button:hover, input[type='submit']:hover
+    a.button:hover,.oe_button:hover, input[type='submit']:hover
         @include vertical-gradient(#f6f6f6, #e3e3e3)
         cursor: pointer
         background-position: 0
 
-    a.button:focus, button:focus, .oe_button:focus, input[type='submit']:focus
+    a.button:focus, .oe_button:focus, input[type='submit']:focus
         border: 1px solid #80bfff
         background-position: 0
         @include vertical-gradient(#f6f6f6, #e3e3e3)
         @include box-shadow((0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, .8) inset))
 
-    a.button:active, a.button.active, button:active, .oe_button:active, .oe_button.active, input[type='submit']:active, input[type='submit'].active
+    a.button:active, a.button.active, .oe_button:active, .oe_button.active, input[type='submit']:active, input[type='submit'].active
         @include vertical-gradient(#e3e3e3, #f6f6f6)
         @include box-shadow(none)
 
-    a.button.disabled, button:disabled, .oe_button:disabled, input[type='submit']:disabled
+    a.button.disabled, .oe_button:disabled, input[type='submit']:disabled
         background: #efefef !important
         border: 1px solid #d1d1d1 !important
         @include box-shadow(none !important)
@@ -899,8 +899,11 @@ $sheet-padding: 16px
     .oe_application
         width: 100%
         height: 100%
-        a
-            color: $link-color
+        .oe-view-manager-body
+            a
+                color: $link-color
+            .oe-view-manager-view-kanban:not(:empty)
+                height: 100%
         > div
             position: relative
             height: 100%
@@ -931,6 +934,52 @@ $sheet-padding: 16px
             font-weight: bold
     // }}}
     // ViewManager common {{{
+    .oe-view-manager-header
+        height: 90px
+        overflow: hidden
+        border-bottom: 1px solid black
+        display: none
+        .row
+            height: 45px
+        .oe-view-title
+            float: left
+            font-size: 18px
+            font-weight: bold
+            margin: 0
+        .oe-header-title
+            padding-left: 0
+        .oe-view-manager-search-view
+            float: right
+            padding-top: 5px
+        .oe-view-manager-switch
+            float: right
+            .oe-vm-switch-kanban:before
+                content: "\f009"
+            .oe-vm-switch-list:before
+                content: "\f0c9"
+            .oe-vm-switch-form:before
+                content: "\f044"
+            .oe-vm-switch-graph:before
+                content: "\f080"
+            .oe-vm-switch-calendar:before
+                content: "\f073"
+            .oe-vm-switch-gantt:before
+                content: "\f0ae"
+        .oe-view-manager-buttons
+            float: left
+            > div
+                display: none
+
+    .oe_application 
+        > div    
+            > div
+                > .oe-view-manager-body
+                    position: absolute
+                    top: 90px
+                    bottom: 0
+                    left: 0
+                    right: 0
+                    overflow: auto
     .oe_view_manager
         display: table
         height: inherit
@@ -1076,18 +1125,18 @@ $sheet-padding: 16px
         display: none
     // }}}
     // ViewManager application {{{
-    .oe_view_manager_current
-        height: 100%
-        > .oe_view_manager_header
-            border-bottom: 1px solid #cacaca
-            @include vertical-gradient(#fcfcfc, #dedede)
-            @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
-            .oe_header_row
-                td
-                    padding: 8px
-            .oe_header_row:first-child
-                td
-                    padding-top: 8px
+    // .oe_view_manager_current
+    //     height: 100%
+    //     > .oe_view_manager_header
+    //         border-bottom: 1px solid #cacaca
+    //         @include vertical-gradient(#fcfcfc, #dedede)
+    //         @include box-shadow((0 1px 0 rgba(255,255,255,0.4), 0 0 9px rgba(0,0,0,0.1)))
+    //         .oe_header_row
+    //             td
+    //                 padding: 8px
+    //         .oe_header_row:first-child
+    //             td
+    //                 padding-top: 8px
     // }}}
     // ViewManager inline {{{
     .oe_view_manager_inline, .oe_view_manager_inlineview
@@ -1111,14 +1160,10 @@ $sheet-padding: 16px
     .oe_searchview
         cursor: text
         position: relative
-        float: right
         padding: 1px 0
-        line-height: 18px
         min-width: 400px
-        border: 1px solid #ababab
-        background: white
+        width: 400px
         @include radius(13px)
-        @include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset)
         input, textarea
             padding: 3px
             height: 14px
@@ -1139,54 +1184,39 @@ $sheet-padding: 16px
         .oe_searchview_clear
             cursor: pointer
             position: absolute
-            top: 0
+            top: 3px
             right: 18px
             width: 15px
             height: 24px
-            background: url(../img/search_reset.gif) center center no-repeat
         .oe_searchview_unfold_drawer
             position: absolute
             top: 0
             right: 0
-            height: 24px
-            padding: 0 7px 0 4px
             color: #ccc
             cursor: pointer
             &:hover
                 color: #999
             &:before
                 position: absolute
-                top: 10px
-                right: 7px
+                top: 7px
+                right: 18px
                 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_search
-            @include text-to-icon("r", #a3a3a3)
-            @include box-shadow(none)
-            @include radius(0)
+            cursor: pointer
             position: absolute
-            left: 3px
-            top: 1px
-            padding: 0
-            border: none
-            background: transparent
+            left: 6px
+            top: 8px
 
         .oe_searchview_facets
             min-height: 22px
-            margin: 0 35px 0 15px
+            margin: 2px 35px 0 20px
             *
                 vertical-align: top
                 display: inline-block
-                line-height: 17px
+                font-size: 100%
             .oe_searchview_facet
+                height: 20px
                 margin: 1px 0
                 font-size: 11px
                 &:focus
@@ -1204,12 +1234,13 @@ $sheet-padding: 16px
                 padding: 0
                 -webkit-font-smoothing: auto
                 // spacing for opera, FF
+                span
+                    height: 18px
                 &:focus
                     border-color: $tag-border-selected
                     @include box-shadow(0 0 3px 1px $tag-border-selected)
                 .oe_facet_values
                     background: $tag-bg-light
-                    @include radius(0 3px 3px 0)
                 .oe_facet_category, .oe_facet_value
                     padding: 0 4px
                 .oe_facet_category
@@ -1218,8 +1249,6 @@ $sheet-padding: 16px
                 .oe_facet_category.oe_i
                     font-size: 16px
                 .oe_facet_value
-                    border-left: 1px solid $tag-border
-                    text-shadow: 0 1px 1px white
                     color: #4C4C4C
                     &:last-child
                         padding-right: 16px