[FIX] Fixed styling of the stagesbar.

bzr revid: vta@openerp.com-20120808121654-79zztekljxzawpna

1 files changed, 106 insertions, 66 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 86f52d40cec..6eeb5e333c5 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1940,112 +1940,152 @@
 .openerp .oe_form div.oe_form_configuration label {
   min-width: 150px;
 }
-.openerp ul.oe_form_steps {
+
+.openerp ul.oe_form_steps_clickable {
   height: 30px;
-  padding: 0;
   margin: 0;
-  text-shadow: 0 1px 1px white;
-  /*background: #dfdfdf;*/
+  padding: 0;
+  text-shadow: 0 1px 1px #cacaca;
+  box-shadow: 0 0 1px rgba(0,0,0,0.5);
   overflow: hidden;
 }
-.openerp ul.oe_form_steps img {
-  vertical-align: top;
-  margin-left: 8px;
-}
-.openerp ul.oe_form_steps li {
-  border-right: none;
-  padding: 0px;
-  margin: 0;
-  float: left;
-  vertical-align: top;
-  height: 30px;
-  padding: 0 0 0 12px;
-}
-.openerp ul.oe_form_steps li:first-child {
-  padding-left: 12px;
-  border-left: 1px solid #cacaca;
-}
-.openerp ul.oe_form_steps li:last-child {
-  margin-right: 12px;
-  /*padding-right: 12px;*/
-  border-right: 1px solid #cacaca;
-}
-.openerp ul.oe_form_steps li {
-  color: #4c4c4c;
+.openerp ul.oe_form_steps_clickable li {
   text-decoration: none;
-  padding: 0 0 0 30px;  
+  padding: 0 0 0 30px;
   position: relative;
   display: block;
   float: left;
   height: 30px;
-  background-color: #8a89ba;
   color: white;
 }
-.openerp ul.oe_form_steps li span {
-  display:block;
-  margin-left: 10px;
+.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 li a:hover {
-  color: black;
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_inactive {
+  display: block;
+  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 li:after {
+.openerp ul.oe_form_steps_clickable li div {
+  padding: 0 30px 0 0;
+}
+.openerp ul.oe_form_steps_clickable .oe_form_steps_inactive:hover {
+  background: -webkit-linear-gradient(top, #7c7ba7, #adadcf);
+}
+.openerp ul.oe_form_steps_clickable li:after {
   content: " ";
-  display: :block;
+  display: block;
   width: 0;
   height: 0;
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  border-left: 30px solid #8a89ba;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid #807fb4;
   position: absolute;
   top: 50%;
-  margin-top: -50px;
+  margin-top: -21px;
   left: 100%;
   z-index: 2;
 }
-.openerp ul.oe_form_steps li:before {
+.openerp ul.oe_form_steps_clickable li:hover:after {
+  border-left: 5px solid #8a89ba;
+}
+.openerp ul.oe_form_steps_clickable li:before {
   content: " ";
-  display: :block;
+  display: block;
   width: 0;
   height: 0;
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  border-left: 30px solid #eeeeee;
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid white;
   position: absolute;
   top: 50%;
-  margin-top: -50px;
+  margin-top: -21px;
   margin-left: 2px;
   left: 100%;
-  z-index: 1;
-}
-.openerp ul.oe_form_steps li:hover {
-  background: #807fb4;
-}
-.openerp ul.oe_form_steps li:hover:after {
-  border-left-color: #807fb4;
+  z-index: 2;
 }
-.openerp ul.oe_form_steps li.oe_form_steps_active {
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_active {
   font-weight: bold;
-  /*color: #b33630;*/
   text-shadow: 0 1px 1px #999999;
-  /*background-color: #dc5f59;*/
-  background-color: #b33630;
+  background: -webkit-linear-gradient(top, #dc5f59, #b33630);
   color: white;
 }
-.openerp ul.oe_form_steps li.oe_form_steps_active:after {
-  content: " ";
-  display: :block;
+.openerp ul.oe_form_steps_clickable li.oe_form_steps_active:after {
+  content: "";
+  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 {
+  content: "";
+  display: block;
   width: 0;
   height: 0;
-  border-top: 50px solid transparent;
-  border-bottom: 50px solid transparent;
-  /*border-left: 30px solid #dc5f59;*/
-  border-left: 30px solid #b33630;  
+  border-top: 21px solid transparent;
+  border-bottom: 21px solid transparent;
+  border-left: 5px solid white;  
   position: absolute;
   top: 50%;
-  margin-top: -50px;
+  margin-top: -21px;
+  margin-left: 2px;
   left: 100%;
   z-index: 2;
 }
+
+.openerp ul.oe_form_steps {
+  height: 30px;
+  padding: 0;
+  margin: 0;
+  text-shadow: 0 1px 1px white;
+}
+.openerp ul.oe_form_steps img {
+  vertical-align: top;
+  margin-left: 8px;
+}
+.openerp ul.oe_form_steps li {
+  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;
+}
+.openerp ul.oe_form_steps li:last-child {
+  margin-right: 12px;
+  padding-right: 12px;
+  border-right: 1px solid #cacaca;
+}
+.openerp ul.oe_form_steps li a {
+  color: #4c4c4c;
+}
+.openerp ul.oe_form_steps li a:hover {
+  color: black;
+}
+.openerp ul.oe_form_steps .oe_form_steps_active {
+  font-weight: bold;
+  color: #b33630;
+}
+
+
 .openerp .oe_form .oe_subtotal_footer {
   width: 1% !important;
 }