diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css index a39838070cb..b9eb6fed93b 100644 --- a/addons/web/static/src/css/base.css +++ b/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-left: -8px; - margin-right: -8px; + margin: -16px -16px 0 -16px; } .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; - line-height: 30px; + padding: 8px; } .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 { - height: 30px; - padding: 0; - margin: 0; - text-shadow: 0 1px 1px white; +.openerp ul.oe_form_steps, .openerp ul.oe_form_steps_clickable { + display: inline-block; + padding-right: 18px; } -.openerp ul.oe_form_steps img { - vertical-align: top; - margin-left: 8px; +.openerp ul.oe_form_steps li, .openerp ul.oe_form_steps_clickable li { + display: inline-block; + 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 { - 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 { +.openerp ul.oe_form_steps li:first-child .label, .openerp ul.oe_form_steps_clickable li:first-child .label { border-left: 1px solid #cacaca; + padding-left: 14px; } -.openerp ul.oe_form_steps li:last-child { - margin-right: 12px; - padding-right: 12px; +.openerp ul.oe_form_steps li:last-child, .openerp ul.oe_form_steps_clickable li:last-child { 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; -} -.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 ul.oe_form_steps_clickable { - height: 30px; + text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede; + padding: 7px; + display: inline-block; + padding-left: 24px; margin: 0; - padding: 0; - text-shadow: 0 1px 1px #cacaca; - box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); + position: relative; + z-index: 10; +} +.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 { - padding: 0 30px 0 0; +.openerp ul.oe_form_steps_clickable li:hover { + 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 { - background: -webkit-linear-gradient(top, #7c7ba7, #adadcf); +.openerp ul.oe_form_steps_clickable li:hover .label { + text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede; } -.openerp ul.oe_form_steps_clickable li div { - padding: 0 30px 0 0; +.openerp ul.oe_form_steps_clickable li:hover .arrow span { + 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 { - 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 .label { + color: #8a89ba; } -.openerp ul.oe_form_steps_clickable li.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; +.openerp ul.oe_form_steps_clickable li.oe_active:hover { + background-color: #4c85c2; + background-image: -webkit-gradient(linear, left top, left bottom, from(#4c85c2), to(#284d7d)); + background-image: -webkit-linear-gradient(top, #4c85c2, #284d7d); + background-image: -moz-linear-gradient(top, #4c85c2, #284d7d); + background-image: -ms-linear-gradient(top, #4c85c2, #284d7d); + background-image: -o-linear-gradient(top, #4c85c2, #284d7d); + background-image: linear-gradient(to bottom, #4c85c2, #284d7d); +} +.openerp ul.oe_form_steps_clickable li.oe_active:hover .label { + text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4; +} +.openerp ul.oe_form_steps_clickable li.oe_active:hover .arrow span { + 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; diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass index f1d1f2e9f1f..befb68b42db 100644 --- a/addons/web/static/src/css/base.sass +++ b/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 - .oe_form_nosheet > header - margin-top: -8px - margin-left: -8px - margin-right: -8px + margin: 16px + > header + margin: -16px -16px 0 -16px // }}} // 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 - line-height: 30px + padding: 8px + //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 - margin: 0 - text-shadow: 0 1px 1px white - img - vertical-align: top - margin-left: 8px - li - border-right: none - padding: 0 - margin: 0 - float: left - vertical-align: top - height: 30px - padding: 0 0 0 12px - &:first-child + + + ul.oe_form_steps, ul.oe_form_steps_clickable + display: inline-block + padding-right: 18px + li + display: inline-block + margin-right: -20px + @include vertical-gradient(#fcfcfc, #dedede) + &:first-child .label 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 - color: black - .oe_form_steps_active - font-weight: bold - color: #b33630 - ul.oe_form_steps_clickable - height: 30px - margin: 0 - padding: 0 - text-shadow: 0 1px 1px #cacaca - box-shadow: 0 0 1px rgba(0,0,0,0.5) - overflow: hidden - li - border-right: none - padding: 0 0 0 12px - position: relative - float: left - vertical-align: top - height: 30px - color: white - &: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 - &: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) + text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede + padding: 7px + display: inline-block + padding-left: 24px + margin: 0 + position: relative + z-index: 10 + .arrow + width: 17px + display: inline-block + vertical-align: top + overflow: hidden + margin-left: -5px + 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) + @include skew-gradient(#fcfcfc, #dedede) + @include radius(3px) + @include transform(rotate(45deg)) + li.oe_active + @include vertical-gradient(#729fcf, #3465a4) + .arrow span + @include skew-gradient(#729fcf, #3465a4) + .label color: white - &.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) - div - padding: 0 30px 0 0 - &.oe_form_steps_inactive:hover - background: -webkit-linear-gradient(top, #7c7ba7, #adadcf) - div - padding: 0 30px 0 0 - &.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 - &.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 + text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4 + + ul.oe_form_steps_clickable + li + cursor: pointer + &:hover + @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%)) + .label + text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede + .arrow span + @include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%)) + .label + color: $link-color + li.oe_active + &:hover + @include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%)) + .label + text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4 + .arrow span + @include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%)) + .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 diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js index 208ee3c0edb..e2a254773ae 100644 --- a/addons/web/static/src/js/view_form.js +++ b/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) { diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index ee5183d8e5c..8e6f7ffc3cb 100644 --- a/addons/web/static/src/xml/base.xml +++ b/addons/web/static/src/xml/base.xml @@ -1085,6 +1085,8 @@