[MERGE] trunk-mit

bzr revid: fp@tinyerp.com-20120817070541-7777ihtcq31vpw8s

addons/web/static/src/css/base.css

@@ -76,9 +76,10 @@
   color: #4c4c4c;
   font-size: 13px;
   background: white;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
   /* http://www.quirksmode.org/dom/inputfile.html
    * http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image
-   */
+   */ */
 }
 .openerp :-moz-placeholder {
   color: #afafb6 !important;
@@ -159,7 +160,7 @@
 .openerp a.button:link, .openerp a.button:visited, .openerp button, .openerp input[type='submit'], .openerp .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
   display: inline-block;
   border: 1px solid #ababab;
-  color: #404040;
+  color: #4c4c4c;
   margin: 0;
   padding: 3px 12px;
   font-size: 13px;
@@ -1297,6 +1298,9 @@
 .openerp .oe_view_manager table.oe_view_manager_header .oe_header_row:last-child td {
   padding-top: 0;
 }
+.openerp .oe_view_manager table.oe_view_manager_header .oe_header_row:first-child td {
+  padding-top: 8px;
+}
 .openerp .oe_view_manager table.oe_view_manager_header .oe_view_manager_sidebar {
   margin: 0px auto;
   text-align: center;
@@ -1923,12 +1927,10 @@
   width: auto;
 }
 .openerp .oe_form_nosheet {
-  margin: 8px;
+  margin: 16px;
 }
 .openerp .oe_form_nosheet > header {
-  margin-top: -8px;
+  margin: -16px -16px 0 -16px;
-  margin-left: -8px;
-  margin-right: -8px;
 }
 .openerp .oe_form header {
   position: relative;
@@ -1940,8 +1942,7 @@
   background-image: -ms-linear-gradient(top, #fcfcfc, #dedede);
   background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
   background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
-  padding: 0 8px;
+  padding: 8px;
-  line-height: 30px;
 }
 .openerp .oe_form header ul {
   display: inline-block;
@@ -1951,6 +1952,7 @@
   min-width: 650px;
   max-width: 860px;
   margin: 0 auto;
+  padding: 16px 0 48px;
 }
 .openerp .oe_form div.oe_form_configuration div.oe_horizontal_separator {
   margin: 25px 0 10px 0;
@@ -1962,141 +1964,135 @@
 .openerp .oe_form div.oe_form_configuration label {
   min-width: 150px;
 }
-.openerp ul.oe_form_steps {
+.openerp ul.oe_form_steps, .openerp ul.oe_form_steps_clickable {
-  height: 30px;
+  display: inline-block;
-  padding: 0;
+  padding-right: 18px;
-  margin: 0;
-  text-shadow: 0 1px 1px white;
 }
-.openerp ul.oe_form_steps img {
+.openerp ul.oe_form_steps li, .openerp ul.oe_form_steps_clickable li {
-  vertical-align: top;
+  display: inline-block;
-  margin-left: 8px;
+  margin-right: -20px;
+  background-color: #fcfcfc;
+  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);
 }
-.openerp ul.oe_form_steps li {
+.openerp ul.oe_form_steps li:first-child .label, .openerp ul.oe_form_steps_clickable li:first-child .label {
-  border-right: none;
-  padding: 0;
-  margin: 0;
-  float: left;
-  vertical-align: top;
-  height: 30px;
-  padding: 0 0 0 12px;
-}
-.openerp ul.oe_form_steps li:first-child {
   border-left: 1px solid #cacaca;
+  padding-left: 14px;
 }
-.openerp ul.oe_form_steps li:last-child {
+.openerp ul.oe_form_steps li:last-child, .openerp ul.oe_form_steps_clickable li:last-child {
-  margin-right: 12px;
-  padding-right: 12px;
   border-right: 1px solid #cacaca;
 }
-.openerp ul.oe_form_steps li a {
+.openerp ul.oe_form_steps li:last-child .label, .openerp ul.oe_form_steps_clickable li:last-child .label {
+  padding-right: 14px;
+}
+.openerp ul.oe_form_steps li:last-child .arrow, .openerp ul.oe_form_steps_clickable li:last-child .arrow {
+  display: none;
+}
+.openerp ul.oe_form_steps li .label, .openerp ul.oe_form_steps_clickable li .label {
   color: #4c4c4c;
-}
+  text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede;
-.openerp ul.oe_form_steps li a:hover {
+  padding: 7px;
-  color: black;
+  display: inline-block;
-}
+  padding-left: 24px;
-.openerp ul.oe_form_steps .oe_form_steps_active {
-  font-weight: bold;
-  color: #b33630;
-}
-.openerp ul.oe_form_steps_clickable {
-  height: 30px;
   margin: 0;
-  padding: 0;
+  position: relative;
-  text-shadow: 0 1px 1px #cacaca;
+  z-index: 10;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
+}
+.openerp ul.oe_form_steps li .arrow, .openerp ul.oe_form_steps_clickable li .arrow {
+  width: 17px;
+  display: inline-block;
+  vertical-align: top;
   overflow: hidden;
+  margin-left: -5px;
+}
+.openerp ul.oe_form_steps li .arrow span, .openerp ul.oe_form_steps_clickable li .arrow span {
+  position: relative;
+  z-index: 11;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  margin-left: -12px;
+  margin-top: 3px;
+  box-shadow: -1px 1px 2px rgba(255, 255, 255, 0.2), inset -1px 1px 1px rgba(0, 0, 0, 0.2);
+  background-color: #dedede;
+  background: -moz-linear-gradient(135deg, #dedede, #fcfcfc);
+  background: -o-linear-gradient(135deg, #fcfcfc, #dedede);
+  background: -webkit-gradient(linear, left top, right bottom, from(#fcfcfc), to(#dedede));
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+}
+.openerp ul.oe_form_steps li.oe_active, .openerp ul.oe_form_steps_clickable li.oe_active {
+  background-color: #729fcf;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
+  background-image: -webkit-linear-gradient(top, #729fcf, #3465a4);
+  background-image: -moz-linear-gradient(top, #729fcf, #3465a4);
+  background-image: -ms-linear-gradient(top, #729fcf, #3465a4);
+  background-image: -o-linear-gradient(top, #729fcf, #3465a4);
+  background-image: linear-gradient(to bottom, #729fcf, #3465a4);
+}
+.openerp ul.oe_form_steps li.oe_active .arrow span, .openerp ul.oe_form_steps_clickable li.oe_active .arrow span {
+  background-color: #3465a4;
+  background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
+  background: -o-linear-gradient(135deg, #729fcf, #3465a4);
+  background: -webkit-gradient(linear, left top, right bottom, from(#729fcf), to(#3465a4));
+}
+.openerp ul.oe_form_steps li.oe_active .label, .openerp ul.oe_form_steps_clickable li.oe_active .label {
+  color: white;
+  text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
 }
 .openerp ul.oe_form_steps_clickable li {
-  border-right: none;
-  padding: 0 0 0 12px;
-  position: relative;
-  float: left;
-  vertical-align: top;
-  height: 30px;
-  color: white;
-}
-.openerp ul.oe_form_steps_clickable li:after {
-  content: " ";
-  width: 0;
-  height: 0;
-  border-top: 21px solid transparent;
-  border-bottom: 21px solid transparent;
-  border-left: 5px solid #807fb4;
-  position: absolute;
-  top: 50%;
-  margin-top: -21px;
-  left: 100%;
-  z-index: 2;
-}
-.openerp ul.oe_form_steps_clickable li:hover:after {
-  border-left: 5px solid #807fb4;
-}
-.openerp ul.oe_form_steps_clickable li:before {
-  content: " ";
-  width: 0;
-  height: 0;
-  border-top: 21px solid transparent;
-  border-bottom: 21px solid transparent;
-  border-left: 5px solid white;
-  position: absolute;
-  top: 50%;
-  margin-top: -21px;
-  margin-left: 2px;
-  left: 100%;
-  z-index: 2;
-}
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_active {
-  font-weight: bold;
-  text-shadow: 0 1px 1px #999999;
-  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
-  background-color: #dc5f59;
-  background: -webkit-linear-gradient(top, #dc5f59, #b33630);
-  color: white;
-}
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive {
   cursor: pointer;
-  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
-  background-color: #adadcf;
-  background: -webkit-linear-gradient(top, #adadcf, #7c7ba7);
 }
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive div {
+.openerp ul.oe_form_steps_clickable li:hover {
-  padding: 0 30px 0 0;
+  background-color: #e8e8e8;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#cacaca));
+  background-image: -webkit-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -moz-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -ms-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
 }
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive:hover {
+.openerp ul.oe_form_steps_clickable li:hover .label {
-  background: -webkit-linear-gradient(top, #7c7ba7, #adadcf);
+  text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede;
 }
-.openerp ul.oe_form_steps_clickable li div {
+.openerp ul.oe_form_steps_clickable li:hover .arrow span {
-  padding: 0 30px 0 0;
+  background-color: #e8e8e8;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#cacaca));
+  background-image: -webkit-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -moz-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -ms-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
+  background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
 }
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_active:after {
+.openerp ul.oe_form_steps_clickable li .label {
-  content: " ";
+  color: #8a89ba;
-  display: block;
-  width: 0;
-  height: 0;
-  border-top: 21px solid transparent;
-  border-bottom: 21px solid transparent;
-  border-left: 5px solid #b33630;
-  position: absolute;
-  top: 50%;
-  margin-top: -21px;
-  left: 100%;
-  z-index: 2;
 }
-.openerp ul.oe_form_steps_clickable li.oe_form_steps_active:before {
+.openerp ul.oe_form_steps_clickable li.oe_active:hover {
-  content: " ";
+  background-color: #4c85c2;
-  display: block;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#4c85c2), to(#284d7d));
-  width: 0;
+  background-image: -webkit-linear-gradient(top, #4c85c2, #284d7d);
-  height: 0;
+  background-image: -moz-linear-gradient(top, #4c85c2, #284d7d);
-  border-top: 21px solid transparent;
+  background-image: -ms-linear-gradient(top, #4c85c2, #284d7d);
-  border-bottom: 21px solid transparent;
+  background-image: -o-linear-gradient(top, #4c85c2, #284d7d);
-  border-left: 5px solid white;
+  background-image: linear-gradient(to bottom, #4c85c2, #284d7d);
-  position: absolute;
+}
-  top: 50%;
+.openerp ul.oe_form_steps_clickable li.oe_active:hover .label {
-  margin-top: -21px;
+  text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
-  margin-left: 2px;
+}
-  left: 100%;
+.openerp ul.oe_form_steps_clickable li.oe_active:hover .arrow span {
-  z-index: 2;
+  background-color: #284d7d;
+  background: -moz-linear-gradient(135deg, #284d7d, #4c85c2);
+  background: -o-linear-gradient(135deg, #4c85c2, #284d7d);
+  background: -webkit-gradient(linear, left top, right bottom, from(#4c85c2), to(#284d7d));
 }
 .openerp .oe_form .oe_subtotal_footer {
   width: 1% !important;

addons/web/static/src/css/base.sass

@@ -88,6 +88,18 @@ $sheet-max-width: 860px
     -ms-box-sizing: #{$type}-box
     box-sizing: #{$type}-box
 
+@mixin skew-gradient($startColor: #555, $endColor: #333)
+    background-color: $endColor
+    background: -moz-linear-gradient(135deg, $endColor, $startColor)
+    background: -o-linear-gradient(135deg, $startColor, $endColor)
+    background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor))
+
+@mixin transform($transform)
+    -moz-transform: $transform
+    -webkit-transform: $transform
+    -o-transform: $transform
+    -ms-transform: $transform
+
 // Transforms the (readable) text of an inline element into an mmlicons icon,
 // allows for actual readable text in-code (and in readers?) with iconic looks
 @mixin text-to-icon($icon-name, $color: #404040)
@@ -142,13 +154,14 @@ $sheet-max-width: 860px
     color: #4c4c4c
     font-size: 13px
     background: white
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5)
     // }}}
     //Placeholder style{{{
     \:-moz-placeholder
-        color: $facets-border !important
+        color: $tag-border !important
         font-style: italic !important
     \::-webkit-input-placeholder
-        color: $facets-border !important
+        color: $tag-border !important
         font-style: italic !important
     //}}}
     // Tag reset {{{
@@ -161,7 +174,7 @@ $sheet-max-width: 860px
         font-weight: bold
         background-color: #f0f0f0
         th
-            border-right: 1px dotted $facets-border
+            border-right: 1px dotted $tag-border
             &:last-child
                 border-right: none
     th, td
@@ -196,7 +209,7 @@ $sheet-max-width: 860px
     a.button:link, a.button:visited, button, input[type='submit'], .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button
         display: inline-block
         border: 1px solid #ababab
-        color: #404040
+        color: #4c4c4c
         margin: 0
         padding: 3px 12px
         font-size: 13px
@@ -557,7 +570,7 @@ $sheet-max-width: 860px
         top: 26px
         left: 0
         z-index: 1
-        border: 1px solid $facets-border
+        border: 1px solid $tag-border
         background: white
         padding: 4px 0
         min-width: 140px
@@ -837,7 +850,7 @@ $sheet-max-width: 860px
         display: none
         width: 220px
         background: #f0eeee
-        border-right: 1px solid $facets-border
+        border-right: 1px solid $tag-border
         text-shadow: 0 1px 1px white
         padding-bottom: 16px
     a.oe_logo
@@ -1008,6 +1021,9 @@ $sheet-max-width: 860px
             .oe_header_row:last-child
                 td
                     padding-top: 0
+            .oe_header_row:first-child
+                td
+                    padding-top: 8px
             .oe_view_manager_sidebar
                 margin: 0px auto
                 text-align: center
@@ -1278,7 +1294,7 @@ $sheet-max-width: 860px
             background-color: white
             min-width: 100%
             display: none
-            border: 1px solid $facets-border
+            border: 1px solid $tag-border
             text-align: left
             @include radius(4px)
             @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
@@ -1485,11 +1501,9 @@ $sheet-max-width: 860px
         .oe_form .oe_form_field_date
             width: auto
     .oe_form_nosheet
-        margin: 8px
+        margin: 16px
-    .oe_form_nosheet > header
+        > header
-        margin-top: -8px
+            margin: -16px -16px 0 -16px
-        margin-left: -8px
-        margin-right: -8px
     // }}}
     // FormView.custom tags and classes {{{
     .oe_form
@@ -1497,8 +1511,8 @@ $sheet-max-width: 860px
             position: relative
             border-bottom: 1px solid #cacaca
             @include vertical-gradient(#fcfcfc, #dedede)
-            padding: 0 8px
+            padding: 8px
-            line-height: 30px
+            //line-height: 30px
             ul
                 display: inline-block
                 float: right
@@ -1506,6 +1520,7 @@ $sheet-max-width: 860px
             min-width: 650px
             max-width: $sheet-max-width
             margin: 0 auto
+            padding: 16px 0 48px
         div.oe_form_configuration
             div.oe_horizontal_separator 
                 margin: 25px 0 10px 0
@@ -1514,122 +1529,78 @@ $sheet-max-width: 860px
                 max-width: 650px
             label
                 min-width: 150px
-    ul.oe_form_steps
+                
-        height: 30px
+
-        padding: 0
+    ul.oe_form_steps, ul.oe_form_steps_clickable
-        margin: 0
+        display: inline-block
-        text-shadow: 0 1px 1px white
+        padding-right: 18px
-        img
+        li 
-            vertical-align: top
+            display: inline-block
-            margin-left: 8px
+            margin-right: -20px
-        li
+            @include vertical-gradient(#fcfcfc, #dedede)
-            border-right: none
+            &:first-child .label
-            padding: 0
-            margin: 0
-            float: left
-            vertical-align: top
-            height: 30px
-            padding: 0 0 0 12px
-            &:first-child
                 border-left: 1px solid #cacaca
+                padding-left: 14px
             &:last-child
-                margin-right: 12px
-                padding-right: 12px
                 border-right: 1px solid #cacaca
-            a
+                .label
+                    padding-right: 14px
+                .arrow
+                    display: none
+            .label 
                 color: #4c4c4c
-                &:hover
+                text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede
-                    color: black
+                padding: 7px
-        .oe_form_steps_active
+                display: inline-block
-            font-weight: bold
+                padding-left: 24px
-            color: #b33630
+                margin: 0
-    ul.oe_form_steps_clickable
+                position: relative
-        height: 30px
+                z-index: 10
-        margin: 0
+            .arrow
-        padding: 0
+                width: 17px
-        text-shadow: 0 1px 1px #cacaca
+                display: inline-block
-        box-shadow: 0 0 1px rgba(0,0,0,0.5)
+                vertical-align: top
-        overflow: hidden
+                overflow: hidden
-        li
+                margin-left: -5px
-            border-right: none
+                span 
-            padding: 0 0 0 12px
+                    position: relative
-            position: relative
+                    z-index: 11
-            float: left
+                    width: 24px
-            vertical-align: top
+                    height: 24px
-            height: 30px
+                    display: inline-block
-            color: white
+                    margin-left: -12px
-            &:after
+                    margin-top: 3px
-                content: " "
+                    box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2)
-                width: 0
+                    @include skew-gradient(#fcfcfc, #dedede)
-                height: 0
+                    @include radius(3px)
-                border-top: 21px solid transparent
+                    @include transform(rotate(45deg))
-                border-bottom: 21px solid transparent
+        li.oe_active
-                border-left: 5px solid #807fb4
+            @include vertical-gradient(#729fcf, #3465a4)
-                position: absolute
+            .arrow span 
-                top: 50%
+                @include skew-gradient(#729fcf, #3465a4)
-                margin-top: -21px
+            .label
-                left: 100%
-                z-index: 2
-            &:hover:after
-                border-left: 5px solid #807fb4
-            &:before
-                content: " "
-                width: 0
-                height: 0
-                border-top: 21px solid transparent
-                border-bottom: 21px solid transparent
-                border-left: 5px solid white
-                position: absolute
-                top: 50%
-                margin-top: -21px
-                margin-left: 2px
-                left: 100%
-                z-index: 2
-            &.oe_form_steps_active
-                font-weight: bold
-                text-shadow: 0 1px 1px #999999
-                box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)
-                background-color: #dc5f59
-                background: -webkit-linear-gradient(top, #dc5f59, #b33630)
                 color: white
-            &.oe_form_steps_inactive
+                text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
-                cursor: pointer
+
-                box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25)
+    ul.oe_form_steps_clickable
-                background-color: #adadcf
+        li
-                background: -webkit-linear-gradient(top, #adadcf, #7c7ba7)
+            cursor: pointer
-                div
+            &:hover 
-                    padding: 0 30px 0 0
+                @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
-            &.oe_form_steps_inactive:hover
+                .label
-                background: -webkit-linear-gradient(top, #7c7ba7, #adadcf)
+                    text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede
-            div
+                .arrow span 
-                padding: 0 30px 0 0            
+                    @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
-            &.oe_form_steps_active:after
+            .label
-                content: " "
+                color: $link-color
-                display: block
+        li.oe_active
-                width: 0
+            &:hover 
-                height: 0
+                @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
-                border-top: 21px solid transparent
+                .label
-                border-bottom: 21px solid transparent
+                    text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
-                border-left: 5px solid #b33630
+                .arrow span 
-                position: absolute
+                    @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
-                top: 50%
+
-                margin-top: -21px
-                left: 100%
-                z-index: 2
-            &.oe_form_steps_active:before
-                content: " "
-                display: block
-                width: 0
-                height: 0
-                border-top: 21px solid transparent
-                border-bottom: 21px solid transparent
-                border-left: 5px solid white
-                position: absolute
-                top: 50%
-                margin-top: -21px
-                margin-left: 2px
-                left: 100%
-                z-index: 2
     .oe_form .oe_subtotal_footer
         width: 1% !important
         td.oe_form_group_cell
@@ -1663,7 +1634,7 @@ $sheet-max-width: 860px
             background: white
             min-height: 330px
             padding: 16px
-            border: 1px solid $facets-border
+            border: 1px solid $tag-border
             @include box-shadow(0 0 10px rgba(0,0,0,0.3))
             .ui-tabs
                 margin: 0 -16px
@@ -2098,7 +2069,7 @@ $sheet-max-width: 860px
             border-bottom: 2px solid #cacaca
         .treeview-tr, .treeview-td
             cursor: pointer
-            border-right: 1px dotted $facets-border
+            border-right: 1px dotted $tag-border
             vertical-align: top
             text-align: left
             border-bottom: 1px solid #cfcccc

addons/web/static/src/js/view_form.js

@@ -4790,7 +4790,7 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
         if (this.clickable) {
             this.$element.addClass("oe_form_steps_clickable");
             $('.oe_form_steps_arrow').remove();
-            var elemts = this.$element.find('.oe_form_steps_button');
+            var elemts = this.$element.find('li');
             _.each(elemts, function(element){
                 $item = $(element);
                 if ($item.attr("data-id") != self.selected_value) {

addons/web/static/src/xml/base.xml

@@ -1085,6 +1085,8 @@
 <t t-name="FieldStatus">
     <ul class="" t-att-style="widget.node.attrs.style"/>
 </t>
+
+
 <t t-name="FieldStatus.content">
     <t t-set="size" t-value="widget.to_show.length"/>
     <t t-foreach="_.range(size)" t-as="i">
@@ -1099,6 +1101,19 @@
         </li>
     </t>
 </t>
+
+
+<t t-name="FieldStatus.content">
+    <t t-set="size" t-value="widget.to_show.length"/>
+    <t t-foreach="_.range(size)" t-as="i">
+        <li t-att-class="widget.to_show[i][0] === widget.selected_value ? 'oe_active' : ''" t-att-data-id="widget.to_show[i][0]">
+            <span class="label">
+                <t t-esc="widget.to_show[i][1]"/>
+            </span>
+            <span class="arrow"><span></span></span>
+        </li>
+    </t>
+</t>
 <t t-name="FieldBinaryImage">
     <span class="oe_form_field oe_form_field_image" t-att-style="widget.node.attrs.style">
         <div class="oe_form_field_image_controls oe_edit_only">