diff options
Diffstat (limited to 'addons/web/static/src/less')
31 files changed, 2907 insertions, 500 deletions
diff --git a/addons/web/static/src/less/bootstrap_overridden.less b/addons/web/static/src/less/bootstrap_overridden.less new file mode 100644 index 00000000000..39df64ac86e --- /dev/null +++ b/addons/web/static/src/less/bootstrap_overridden.less @@ -0,0 +1,103 @@ +// ------------------------------------------------------------------ +// Bootstrap variables +// ------------------------------------------------------------------ + +//== Grid +@grid-gutter-width: @odoo-horizontal-padding*2; + +//== Colors +@brand-primary: @odoo-brand-primary; + +//== Titles +@font-size-h1: @odoo-font-size-base + 13px; +@font-size-h2: @odoo-font-size-base + 7px; +@font-size-h3: @odoo-font-size-base + 3px; +@font-size-h4: @odoo-font-size-base + 2px; +@font-size-h5: @odoo-font-size-base + 1px; +@font-size-h6: @odoo-font-size-base; + +//== Scaffolding +@body-bg: @odoo-brand-secondary; +@text-color: @odoo-main-text-color; +@link-color: @odoo-brand-optional; +@link-hover-decoration: none; + +//== Typography +@font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; +@font-size-base: @odoo-font-size-base; +@headings-font-weight: bold; + +//== Components +@component-active-bg: @gray-lighter; +@component-active-color: @odoo-brand-optional; + +//== Badges +@badge-bg: @odoo-brand-optional; +@badge-color: white; +@badge-line-height: @line-height-base; +@badge-font-weight: normal; + +//== Breadcrumbs +@breadcrumb-active-color: #777777; +@breadcrumb-bg: @odoo-control-panel-background-color; +@breadcrumb-color: #777777; +@breadcrumb-padding-horizontal: 0; +@breadcrumb-padding-vertical: 0; + +//== Buttons +@btn-default-bg: white; +@btn-default-border: #cccccc; +@btn-default-color: @odoo-main-text-color; +@btn-primary-bg: @odoo-brand-optional; +@btn-primary-border: @odoo-brand-optional; +@btn-primary-color: white; + +//== Modals +@modal-sm: 300px; +@modal-md: 650px; +@modal-lg: 980px; +@modal-inner-padding: @odoo-horizontal-padding; +@modal-title-padding: @odoo-horizontal-padding; + +//== Navs +@nav-link-padding: 10px 15px; +@nav-pills-border-radius: 0; +@nav-pills-active-link-hover-color: white; +@nav-pills-active-link-hover-bg: @odoo-brand-optional; +@nav-tabs-active-link-hover-bg: white; + +//== Navbar +@navbar-height: @odoo-navbar-height - 2; +@navbar-margin-bottom: 0; +@navbar-inverse-bg: #222222; +@navbar-inverse-link-color: #9d9d9d; +@navbar-inverse-link-hover-bg: #222222; +@navbar-inverse-toggle-hover-bg: #222222; +@navbar-border-radius: 0; + +//== Tables +@table-bg-accent: #efeff8; // FIXME: expose + + +// ------------------------------------------------------------------ +// Bootstrap components rules (non exposed features variables) +// ------------------------------------------------------------------ + +//== Badges +.badge { + margin: 1px 2px 1px 0; + padding-top: 0; + padding-bottom: 0; +} + +//== Buttons +.btn-icon { + .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); +} + +//== Printing improvements +@media print { + .table-responsive { + overflow-x: initial; + } +} diff --git a/addons/web/static/src/less/control_panel.less b/addons/web/static/src/less/control_panel.less new file mode 100644 index 00000000000..e2635af43d4 --- /dev/null +++ b/addons/web/static/src/less/control_panel.less @@ -0,0 +1,74 @@ +.o_control_panel { + .o-webclient-padding(@top: 10px, @bottom: 10px); + background-color: @odoo-control-panel-background-color; + border-bottom: 1px solid @odoo-main-color-muted; + .breadcrumb { + font-size: 18px; + margin: 0px; + > li > a { + color: @odoo-brand-optional; + cursor: pointer; + &:hover { + color: darken(@odoo-brand-optional, 10%); + text-decoration: none; + } + } + } + + // Sidebar + .o_cp_sidebar { + padding-right: 10px; + + .o_hidden_input_file { + position: relative; + input.o_form_input_file { + position: absolute; + top: 1px; + opacity: 0; + width: 100%; + height: 26px; + } + .o_form_binary_form span { + padding: 3px 25px; + color: @btn-default-color; + } + .o_form_binary_form:hover { + background-color: @table-bg-hover; + } + } + .o_sidebar_delete_attachment { + padding: 0px; + position: absolute; + top: 5px; + right: 10px; + } + } + + // Pager + .o_cp_pager { + text-align: center; + padding-left: 5px; + .user-select(none); + } + + // View Switcher + .o_cp_switch_buttons { + padding-left: 5px; + } +} + +.o_x2m_control_panel { + .o_cp_buttons > div { + margin-top: 5px; + } +} + +// Pager input (to edit pager values) +.o_pager_value > input { + display: inline-block; + width: 60px; + text-align: right; + &:focus { + outline: none; + } +} diff --git a/addons/web/static/src/less/control_panel_layout.less b/addons/web/static/src/less/control_panel_layout.less new file mode 100644 index 00000000000..92f8397bca4 --- /dev/null +++ b/addons/web/static/src/less/control_panel_layout.less @@ -0,0 +1,70 @@ +@breadcrumb-height: 30px; + +.o_control_panel { + .o-flex-display(); + .o-flex-flow(row, wrap); + + .breadcrumb { + width: 50%; + + > li { + .o_text_overflow; + max-width: 90%; + display: inline-block; + } + } + + &.o_breadcrumb_full { + .breadcrumb { + width: 100%; + } + } + + .o_cp_searchview { + width: 50%; + min-height: @breadcrumb-height; + } + + .btn.o_enable_searchview { + width: 10%; + margin-left: 2%; + padding: 0px; + } + + .o_cp_left { + width: 50%; + margin-top: 5px; + .o-flex-display(); + .o-justify-content(space-between); + } + + .o_cp_right { + width: 50%; + margin-top: 5px; + .o-flex-display(); + + .o_cp_pager { + margin: auto 0 auto auto; + } + } +} + +.o_x2m_control_panel { + .o-flex-display(); + .o-flex-flow(row, wrap); + + .o_cp_buttons { + .o-flex-display(); + margin-right: auto; + } + .o_cp_pager { + .o-flex-display(); + margin-left: auto; + } +} + +@media print { + .o_control_panel { + display: none; + } +} diff --git a/addons/web/static/src/less/data_export.less b/addons/web/static/src/less/data_export.less new file mode 100644 index 00000000000..3f596bea27d --- /dev/null +++ b/addons/web/static/src/less/data_export.less @@ -0,0 +1,107 @@ +.o_web_client .o_export { + + .o-flex(0, 1, 1000px); + .o-flex-display(); + .o-flex-flow(column, nowrap); + + > p, > .row { + .o-flex(0, 0, auto); + } + + label { + vertical-align: top; + font-weight: normal; + } + + .o_import_compat, .o_export_format { + display: inline-block; + + > div { + margin-left: 5px; + .o-inline-flex-display(); + .o-align-items(center); + + > label, > input { + margin: 0 0 0 5px; + } + } + } + + .o_export_panel { + .o-flex(1, 0, 0); + position: relative; + + > div { + height: 100%; + .o-flex-display(); + .o-flex-flow(column, nowrap); + .o-justify-content(center); + + &.o_left_panel { // Needed because of chrome + .o-position-absolute(@top: 0, @bottom: 0, @left: 0, @right: 57%); + } + &.o_center_panel { // Needed because of chrome + .o-position-absolute(@top: 0, @bottom: 0, @left: 43%, @right: 43%); + } + &.o_right_panel { // Needed because of chrome + .o-position-absolute(@top: 0, @bottom: 0, @left: 57%, @right: 0); + } + + > h4, > div { + .o-flex(0, 0, auto); + } + + > button { + .o-flex(0, 0, auto); + margin-top: 10px; + } + + .o_left_field_panel, .o_fields_list { + border: 1px solid @odoo-brand-lightsecondary; + overflow: auto; + .o-flex(1, 0, 0); + } + + .o_export_tree_item { + cursor: pointer; + position: relative; + padding-left: 20px; + .user-select(none); + + &.o_selected > .o_tree_column { + background-color: @odoo-brand-primary; + color: white; + } + + .o_expand_parent { + .o-position-absolute(@top: 4px, @left: 5px); + } + .o_tree_column { + display: block; + + &.o_required { + border-bottom: 2px solid @odoo-main-text-color; + } + } + + &:focus { + outline: none; + } + } + + .o_save_list, .o_exported_lists { + .o-flex-display(); + .o-align-items(baseline); + + > label, > button { + margin: 0 0 5px; + .o-flex(0, 0, auto); + } + > input, > select { + width: 0; + .o-flex(1, 0, auto); + } + } + } + } +} diff --git a/addons/web/static/src/less/datepicker.less b/addons/web/static/src/less/datepicker.less new file mode 100644 index 00000000000..271cd357d15 --- /dev/null +++ b/addons/web/static/src/less/datepicker.less @@ -0,0 +1,59 @@ +@odoo-datepicker-week-color: #8f8f8f; +@odoo-datepicker-week-bg-color: lighten(@odoo-datepicker-week-color, 30%); + +.o_datepicker { + position: relative; + + .o_datepicker_input { + width: 100%; + } + + .o_datepicker_button { + .o-position-absolute(2px, 4px); + cursor: pointer; + &:after { + .o-caret-down; + } + } +} + +.datepicker { + .table-condensed { + > thead { + color: white; + background-color: @odoo-brand-primary; + + > tr { + &:first-child { + th:hover { + color: white; + background-color: darken(@odoo-brand-primary, 10%); + } + } + + &:last-child { + color: @odoo-datepicker-week-color; + background-color: @odoo-datepicker-week-bg-color; + } + > th { + border-radius: 0; + } + } + } + + > tbody { + > tr { + > td { + &.active, .active { + background-color: @odoo-brand-optional; + border-radius: 100px; + } + + &.today:before { + border-bottom-color: @odoo-brand-optional; + } + } + } + } + } +} diff --git a/addons/web/static/src/less/debug_manager.less b/addons/web/static/src/less/debug_manager.less new file mode 100644 index 00000000000..74d20dda43a --- /dev/null +++ b/addons/web/static/src/less/debug_manager.less @@ -0,0 +1,8 @@ +.modal { + .o_debug_manager { + position: relative; + list-style: none; + margin: 2px 10px 2px 0; + float: left; + } +} diff --git a/addons/web/static/src/less/dropdown.less b/addons/web/static/src/less/dropdown.less new file mode 100644 index 00000000000..5cc6ddbe759 --- /dev/null +++ b/addons/web/static/src/less/dropdown.less @@ -0,0 +1,79 @@ +.li-a-padding { + padding: 3px @odoo-dropdown-hpadding; +} + +.ui-autocomplete { // Copy style of bootstrap dropdown + background-image: none; + background-color: @dropdown-bg; + border: 1px solid @dropdown-border; + font-family: @font-family-serif; + font-size: @font-size-base; + padding: 5px 0px; + box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176); + + .ui-menu-item { + padding: 0; + > a { + display: block; + color: @dropdown-link-color; + + .li-a-padding + } + + &.ui-state-focus { + background-image: none; + background-color: @odoo-brand-primary; + border: none; + font-weight: normal; + margin: 0; + } + &.o_m2o_dropdown_option { + padding-left: 20px; + > a { + color: @odoo-brand-primary; + } + } + } +} + +.dropdown-menu { + .o_inline_dropdown { + position: relative; + + &> .dropdown-menu { + top: 0; + left: 100%; + } + &:hover > .dropdown-menu { + display: block; + } + } +} + +.dropdown-menu-mixin { + .open .dropdown-menu > li { + position: relative; // to allow absolute positionning inside the li + > a { + &:focus, &:active, &:focus:active { + outline: none; + } + + .li-a-padding; + } + + &.dropdown-header { + .li-a-padding; + color: @odoo-main-text-color; + + @media (max-width: @screen-xs-max) { + color: white; + text-decoration: underline; + } + } + } +} + +.dropdown-menu-mixin(); +.navbar-nav { + .dropdown-menu-mixin(); +} diff --git a/addons/web/static/src/less/dropdown_extra.less b/addons/web/static/src/less/dropdown_extra.less new file mode 100644 index 00000000000..ec38e6d5292 --- /dev/null +++ b/addons/web/static/src/less/dropdown_extra.less @@ -0,0 +1,63 @@ +.ui-autocomplete .ui-menu-item { + &.ui-state-focus { + background-color: @odoo-brand-primary; + } + &.o_m2o_dropdown_option > a { + color: @odoo-brand-primary; + } + &.ui-state-focus > a, + &.ui-state-focus.o_m2o_dropdown_option > a { + color: white; + } +} + +@tag-border: #afafb6; +.oe_dropdown, .oe_dropdown_toggle { + position: relative; + cursor: pointer; +} +.oe_dropdown_toggle { + color: #2B2B2B; + font-weight: normal; +} +.oe_dropdown_menu { + display: none; + position: absolute; + z-index: 3; + margin: 0; + border: 1px solid @tag-border; + background: white; + padding: 4px 0; + min-width: 140px; + text-align: left; + box-shadow: 0 1px 4px rgba(0,0,0,0.3); + &.oe_opened { + display: block; + } + > li { + list-style-type: none; + float: none; + display: block; + position: relative; + margin: 0; + padding: 2px 8px; + &:hover { + .o-vertical-gradient(#f0f0fa, #eeeef6); + box-shadow: none; + } + > a { + white-space: nowrap; + display: block; + color: #4c4c4c; + text-decoration: none; + &:hover { + text-decoration: none; + } + } + } +} + +// Buttons used as dropdown toggler +.o_dropdown_toggler_btn { + .btn-default; +} diff --git a/addons/web/static/src/less/enterprise_compatibility.less b/addons/web/static/src/less/enterprise_compatibility.less deleted file mode 100644 index 71dc441abbd..00000000000 --- a/addons/web/static/src/less/enterprise_compatibility.less +++ /dev/null @@ -1,467 +0,0 @@ -// ------------------------------------------------------------------ -// Odoo -// ------------------------------------------------------------------ - -// This file is necessary to make the community edition of the Odoo web -// client compatible with the enterprise edition. - -// The problem is that we have two web clients in parallel, and every -// addons should behave properly with both. - -@brand-primary: @odoo-brand-primary; - -.oe-view-manager { - background-color: @odoo-webclient-background-color !important; -} - -.o_kanban_view { - background-color: @odoo-webclient-background-color; - - .o_kanban_config i, .o_kanban_quick_add i { - color: @odoo-main-text-color !important; - &:hover { - background-color: darken(@odoo-webclient-background-color, 10%) !important; - } - } - .o_column_title, .o_kanban_title, .o_kanban_add_column, .o_column_unfold { - color: @odoo-main-text-color !important; - } - - .o_column_folded { - background-color: darken(@odoo-webclient-background-color, 5%) !important; - border-color: darken(@odoo-webclient-background-color, 10%) !important; - } - - .o_column_quick_create { - background-color: darken(@odoo-webclient-background-color, 10%) !important; - } - - &.o_kanban_grouped .o_kanban_group .o_kanban_header { - margin-bottom: 2px; // For the buttons not to overlap first record's box shaddow on hover - } -} - -.oe_list { - background-color: white !important; -} - -// Buttons and links -@link-hover-decoration: none; -.btn, .btn-group > .btn { - &:hover, &:active, &:focus, &:active:focus { - outline: none; - } -} -.btn-icon { - .btn-default; -} -.oe_button { - .btn-default; - &.oe_highlight, &.btn-primary { - .btn-primary; - } - &.oe_link, &.btn-link { - .btn-link; - } -} -.oe_highlight { - .btn-primary; -} -.oe_link { - .btn-link; -} - -.openerp .oe_avatar { - float: left; -} - -.openerp .oe_button_box { - float: right; -} - - -// Pager input (to edit pager values) -.o_pager_value > input { - width: 60px; - text-align: right; - &:focus { - outline: none; - } -} - -.oe_form_field_one2many, .oe_form_field_many2many { - .oe-view-manager { - background-color: white; - - .o_kanban_view { - background-color: white; - - .o_kanban_record { - box-shadow: none; - } - } - } -} - -// Buttons containing only an icon -.o_icon_button { - background-color: transparent; - border: 0; - padding: 0; - outline: none; -} - -// Stars -.o_priority { - display: inline-block; - padding: 0; - margin: 0; - vertical-align: middle; - > .o_priority_star { - display: inline-block; - font-size: 1.35em; - &:hover, &:focus { - text-decoration: none; - outline: none; - } - - + .o_priority_star { - padding-left: 5px; - } - - &.fa-star-o { - color: @odoo-main-color-muted; - } - &.fa-star { - color: gold; - } - } -} - -.oe_title { - .o_priority > .o_priority_star { - font-size: inherit; - } -} - -.o_text_overflow { - display: block; - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; // To update display context changed by overflow:hidden -} - -.oe-x2m-control-panel { - background-color: white; -} - -div.o_checkbox { - display: inline-block; - vertical-align: sub; - > input + span { - display: none; - } -} - -.openerp .oe_formview { - .oe_button_box { - .oe_stat_button { - text-align: left; - - .o_button_icon { - width: 30%; - display: inline-block; - vertical-align: middle; - } - - .o_stat_info { // contains the value and text - display: inline-block; - vertical-align: middle; - max-width: 70%; - line-height: 1.2; - - .o_stat_value { - .o_text_overflow; - font-weight: 700; - color: @odoo-brand-primary; - } - .o_stat_text { - .o_text_overflow; - font-size: small; - - .o_stat_value { - display: inline; - } - } - } - - // Some buttons only display text and directly use the WidgetButton template instead of StatInfo - > span { - .o_stat_info; // layout - font-size: small; - white-space: normal; // text on several lines if needed - } - } - - &, & + .oe_avatar { - + .oe_title { - width: 400px; - } - } - } - - .oe_avatar { - > img { - max-width: 90px; - max-height: 90px; - } - - + .oe_title { - padding-left: 95px; - } - } - - .o_row { - > * { - width: auto!important; // oe_inline - } - > div { - display: inline-block; - + div { - margin-left: 5px; - } - } - } - - .oe_form label { - font-size: 13px; - } - - .oe_form_group .oe_form_group_cell:not(.oe_form_group_cell_label) label { - font-weight: normal; - } - - .o_form_field_many2manytags { - .o-inline-flex-display(); - .o-flex-flow(row, wrap); - .o-align-items(flex-start); - - .badge { - cursor: pointer; - .o-flex(0, 0, auto); - margin: 0 3px 3px 0; - color: #FFF; - font-size: 12px; - .o_delete { - cursor: pointer; - } - > ul { - @colored-tag-width: 45px; - width: 5*@colored-tag-width + 3px; - > li { - float: left; - color: black; - > span { - border-radius: 6px; - width: @colored-tag-width; - height: 30px; - display: inline-block; - border: 2px solid white; - cursor: pointer; - padding: 0; - - &:hover { - opacity: 0.8; - } - } - } - > li:last-child { - margin-top: 7px; - cursor: auto; - } - } - } - - padding: 0; - > .oe_form_field_many2one { - padding: 0; - } - } - - &.oe_form_editable .o_form_field_many2manytags { - border: 1px solid #CCC; - border-radius: 3px; - - &.o_form_field_empty { - display: none; - } - - > .oe_form_field { - .o-flex(1, 0, 100px); - - input { - border: none; - } - } - } - - .o_address_format { - width: 100%; - - > .oe_form_field { - width: auto; - display: block; - } - - > .o_address_street, > .o_address_country { - clear: left; - width: 100%; - } - > .o_address_city, > .o_address_state, > .o_address_zip { - float: left; - margin-right: 2%; - } - > .o_address_zip { - margin-right: 0; - } - &.o_zip_city { - > .o_address_zip { - margin-right: 2%; - } - > .o_address_city { - margin-right: 0; - } - > .o_address_state { - clear: left; - margin-right: 0; - } - } - &.o_city_state { - > .o_address_state { - margin-right: 0; - } - > .o_address_zip { - clear: left; - margin-right: 0; - } - } - } - &.oe_form_editable .o_address_format { - > .o_address_city { - width: 38%; - } - > .o_address_state { - width: 33%; - } - > .o_address_zip { - width: 25%; - } - &.o_zip_city { - > .o_address_zip { - width: 38%; - } - > .o_address_city { - width: 60%; - } - > .o_address_state { - width: 100%; - } - } - &.o_city_state { - > .o_address_city { - width: 50%; - } - > .o_address_state { - width: 48%; - } - > .o_address_zip { - width: 100%; - } - } - } -} - -// Many2many tags -.o_form_field_many2manytags { - .o_tag_color_0 { - background-color: #4D4D4D; - } - .o_tag_color_1 { - background-color: #61BD4F; - } - .o_tag_color_2 { - background-color: #F2D600; - } - .o_tag_color_3 { - background-color: #FFAB4A; - } - .o_tag_color_4 { - background-color: #EB5A46; - } - .o_tag_color_5 { - background-color: #A24689; - } - .o_tag_color_6 { - background-color: #0079BF; - } - .o_tag_color_7 { - background-color: #00C2E0; - } - .o_tag_color_8 { - background-color: #4CD98E; - } - .o_tag_color_9 { - background-color: #FF80CE; - } - .o_tag_color_10 { - background-color: #B6BBBF; - } -} - -// Search options dropdowns -.o-search-options-dropdown-custom-li() { - margin: 3px 25px; - width: auto; - max-width: 250px; - -} -// Open and closed carets in dropdowns -.o_closed_menu { - position: relative; - a:before { - .o-caret-right; - .o-position-absolute(@top: 50%, @left: 12px); - margin-top: (-@caret-width-base); - } -} -.o_open_menu { - position: relative; - a:before { - .o-caret-down; - .o-position-absolute(@top: 50%, @left: 9px); - margin-top: (-@caret-width-base); - } -} - -// Favorites Menu -> Add to my dashboard -.o_favorites_menu { - .o_add_to_dashboard_input { - .form-control(); - } - .o_add_to_dashboard_button { - .btn(); - .btn-default(); - } -} - -// Because the `web_planner` module has to work with Odoo community and enterprise without -// code duplication, fine-tune the display of it in the community webclient here -#PlannerDialog { - top: 35px; - -webkit-box-shadow: 0 3px 9px #666666; - box-shadow: 0 3px 9px #666666; - padding-bottom: 44px; -} - diff --git a/addons/web/static/src/less/fonts.less b/addons/web/static/src/less/fonts.less new file mode 100644 index 00000000000..c6b19a2ba2f --- /dev/null +++ b/addons/web/static/src/less/fonts.less @@ -0,0 +1,37 @@ +// ------------------------------------------------------------------ +// Lato +// ------------------------------------------------------------------ +@lato-font-path: '../fonts/lato'; + +.lato-font(@type, @weight, @style) { + @font-face { + font-family: 'Lato'; + src: url('@{lato-font-path}/Lato-@{type}-webfont.eot'); + src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'), + url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'), + url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'), + url('@{lato-font-path}/Lato-@{type}-webfont.svg#Lato') format('svg'); + font-weight: @weight; + font-style: @style; + } + + @font-face { + font-family: 'Lato-@{type}'; + src: url('@{lato-font-path}/Lato-@{type}-webfont.eot'); + src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'), + url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'), + url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'), + url('@{lato-font-path}/Lato-@{type}-webfont.svg#Roboto') format('svg'); + } +} + +.lato-font-pair(@type, @weight) { + .lato-font('@{type}', @weight, normal); + .lato-font('@{type}Ita', @weight, italic); +} + +.lato-font-pair('Hai', 100); +.lato-font-pair('Lig', 300); +.lato-font-pair('Reg', 400); +.lato-font-pair('Bol', 700); +.lato-font-pair('Bla', 900); diff --git a/addons/web/static/src/less/form_view.less b/addons/web/static/src/less/form_view.less new file mode 100644 index 00000000000..d534976ee1c --- /dev/null +++ b/addons/web/static/src/less/form_view.less @@ -0,0 +1,468 @@ +.o_form_view { + background-color: @odoo-view-background-color; + + // Utility classes (+ oe_edit_only, oe_read_only, o_label_nowrap, o_text_overflow) + .o_form_invisible, .o_form_field_empty { + display: none!important; + } + .oe_form_box_info { + .bg-info; + .o-webclient-padding(@top: 5px, @bottom: 5px); + > p { + margin: auto; + } + } + .oe_text_center { + text-align: center; + } + .oe_link { + .btn-link; + } + .oe_grey { + opacity: 0.5; + } + + // Readonly specific rules + &.o_form_readonly { + .oe_edit_only { + .o_form_invisible; + } + + .o_form_uri { // FIXME maybe global? + display: inline-block; + + color: @odoo-main-text-color; + &:first-line { + color: @link-color; + } + &:hover { + color: darken(@odoo-main-text-color, 1%); // hack required on chrome + &:first-line { + color: darken(@link-color, 15%); + } + } + } + } + + // Editable specific rules + &.o_form_editable { + .oe_read_only { + .o_form_invisible; + } + + .o_form_field_many2manytags { + .o-input(); + + > .o_form_field { + .o-flex(1, 0, 100px); + max-width: 100%; + + > .o_form_input_dropdown > .o_form_input { + border-style: none!important; + } + } + } + + .o_form_field_monetary { + .o-input(); + .o-align-items(baseline); + + > .o_form_input { + border-style: none!important; + width: 100px; + .o-flex(1, 0, auto); + } + } + } + + // Button box + .oe_button_box { + .oe_stat_button { + &:not(:hover) .o_stat_info > .o_hover { + display: none !important; + } + &:hover .o_stat_info > .o_not_hover { + display: none !important + } + } + } + + // Title + .oe_title { + .o_priority > .o_priority_star { + font-size: inherit; + } + } + + // Groups + .o_group { + &.o_label_nowrap { + .o_form_label { + white-space: nowrap; + } + } + + .o_form_label { + font-weight: normal; + } + .o_td_label .o_form_label { + font-weight: bold; + margin-right: 0px; + } + } + &.oe_form_configuration { + .o_group .o_form_label { + white-space: nowrap; + } + } + + // Separators + .o_horizontal_separator { + font-size: @font-size-h2; + margin: @odoo-form-spacing-unit 0; + &:empty { + height: @odoo-form-spacing-unit * 2; + } + } + + // Labels + .o_form_label { + font-size: @font-size-base; // The label muse have the same size whatever their position + line-height: @line-height-base; + margin-right: @odoo-form-spacing-unit; + &.o_form_invalid { + color: @brand-danger; + } + } + + // Tags + .o_form_field_many2manytags { + .badge { + cursor: pointer; + color: white; + font-size: 12px; + border: 0; + + > ul { + @colored-tag-width: 45px; + width: 5*@colored-tag-width + 3px; + > li { + float: left; + color: black; + > span { + border-radius: 6px; + width: @colored-tag-width; + height: 30px; + display: inline-block; + border: 2px solid white; + cursor: pointer; + padding: 0; + + &:hover { + opacity: 0.8; + } + } + } + > li:last-child { + margin-top: 7px; + cursor: auto; + } + } + } + } + + .o_form_invalid { + &.o_form_input, .o_form_input, &.o_form_textarea, .o_form_textarea { + border-color: @brand-danger; + } + } + + // Boolean + .o_form_field_boolean { + margin: 0 @odoo-form-spacing-unit 0 0; + } + + // Numbers + .o_form_field_number { + white-space: nowrap; + } + + // Radio buttons + .o_form_field_radio .o_form_radio { + outline: none; + } + + // Translate icon + .o_field_translate { + padding: 0; + display: none; + cursor: pointer; + width: 12px; + vertical-align: top; + &::before { // seems to be useful for some old browser + position: relative; + } + &.o_translate_active { + display: inline-block; + } + } + + // Dropdowns input (many2one, ...) + .o_form_input_dropdown { + .o-flex(1, 0, auto); + position: relative; + + > input { + padding-right: 15px; + cursor: pointer; + } + + .o_dropdown_button { + pointer-events: none; + &:after { + .o-caret-down; + } + } + } + + // Many2many tags + .badge .o_delete { + cursor: pointer; + } + + // Image + .o_form_field_image { + position: relative; + + .o_form_image_controls { + .o-position-absolute(0, 0); + width: 100%; + + color: white; + background-color: @odoo-brand-optional; + opacity: 0; + transition: opacity ease 400ms; + + > .fa { + margin: 5px; + cursor: pointer; + } + } + + &:hover .o_form_image_controls { + opacity: 0.8; + } + } + + // Input loading/file + .o_form_binary_progress, .o_hidden_input_file .o_form_input_file { + display: none; + } + + // Timezone widget warning + .o_tz_warning { + color: @brand-danger; + cursor: pointer; + } + + // One2Many Kanban views + .o_form_field .o_kanban_view.o_kanban_ungrouped { + padding: 0; + .o_kanban_record { + box-shadow: none; + } + } + + // One2Many List views + .o_form_field .o_list_view { + margin-bottom: 10px; + + > tfoot > tr > td { + padding: 3px; + color: @odoo-main-text-color; + } + } + &.o_form_readonly .o_form_field .o_list_view .o_row_handle { + display: none; // Hide the handler in non-edit mode + } + + // Percent pie field + .o_form_field_percent_pie { + .o_pie { + position: relative; + border-radius: 100%; + overflow: hidden; + background-color: @odoo-brand-optional; + + &:after { // Outside pie border to go over border-radius irregularities + content: " "; + .o-position-absolute(0, 0); + width: 100%; + height: 100%; + border-radius: 100%; + } + + .o_mask { + .o-position-absolute(0, 0); + .o-transform-origin(0); + width: 50%; + height: 100%; + background-color: @odoo-view-background-color; + &.o_full { + background-color: inherit; + } + } + + .o_pie_value { + .o-flex-display(); + .o-justify-content(center); + .o-align-items(center); + + border-radius: 100%; + + font-weight: 700; + color: @odoo-brand-primary; + } + } + } + + // Attachments + .oe_attachment { + display: inline-block; + border: 1px solid @odoo-brand-lightsecondary; + margin: 0 @odoo-form-spacing-unit @odoo-form-spacing-unit 0; + padding: @odoo-form-spacing-unit; + } + + // Specific style classes + .o_group.o_inner_group.oe_subtotal_footer { + > tbody > tr > td { + padding: 0; + + &.o_td_label { + text-align: right; + } + + .o_form_label { + padding-right: 20px; + + min-width: 0; + white-space: nowrap; + &:after { + content: ":"; + } + } + + .o_form_field { + text-align: right; + width: 100%; + } + } + + .oe_subtotal_footer_separator { + width: 100%; + text-align: right; + border-top: 1px solid @odoo-brand-secondary; + font-weight: bold; + font-size: 1.3em; + } + } + + .o_address_format { + width: 100%; + .o_address_street, .o_address_country { + .o-flex-display; + } + + .o_address_city { + margin-right: 2%; + } + .o_address_state { + margin-right: 2%; + } + &.o_zip_city { + .o_address_zip { + margin-right: 2%; + } + .o_address_city { + margin-right: 0; + } + .o_address_state { + display: block; + margin-right: 0; + } + } + &.o_city_state { + .o_address_state { + margin-right: 0; + } + .o_address_zip { + display: block; + margin-right: 0; + } + } + > span.o_form_field { + width: auto; + } + } + &.o_form_editable .o_address_format { + input.o_address_city { + width: 38%; + } + div.o_address_state { + width: 33%; + } + input.o_address_zip { + width: 25%; + } + &.o_zip_city { + .o_address_zip { + width: 38%; + } + .o_address_city { + width: 60%; + } + .o_address_state { + width: 100%; + } + } + &.o_city_state { + .o_address_city { + width: 50%; + } + .o_address_state { + width: 48%; + } + .o_address_zip { + width: 100%; + } + } + } +} + +// Overriden style when form view in modal +.modal .modal-dialog { + .o_form_view { + .o_form_sheet { + box-shadow: none; + width: 100%; + margin: 0 auto; + max-width: none; + } + } + + .o_form_invisible { + display: none!important; + } +} + +// FIXME bootstrap modal : 1050 +.ui-autocomplete { + z-index: 1051; +} + +// Buttons in ControlPanel +.o_control_panel .o_form_buttons_view > button:first-child { + float: left; // Unfortunately needed for the bounce effect + margin-right: 4px; +} diff --git a/addons/web/static/src/less/form_view_extra.less b/addons/web/static/src/less/form_view_extra.less new file mode 100644 index 00000000000..300724e2819 --- /dev/null +++ b/addons/web/static/src/less/form_view_extra.less @@ -0,0 +1,265 @@ +.o_form_view { + .o_form_sheet_bg { + background: url(/web/static/src/img/form_sheetbg.png); + border-bottom: 1px solid #ddd; + .o_form_sheet { + border: 1px solid #c8c8d3; + box-shadow: 0 4px 20px rgba(0,0,0,0.15); + } + } + + // Header containing status/workflow buttons + > header { + border-bottom: 1px solid #cacaca; + .o-vertical-gradient(#fcfcfc, #dedede); + > button:not(.btn-primary):not(.btn-link):not(.oe_highlight) { + .btn-default; + } + } + &.o_form_nosheet > header { + margin: -16px -16px 0 -16px; + } + ul.oe_form_status, ul.oe_form_status_clickable { + display: inline-block; + margin: 0; + padding: 0 18px 0 0; + li { + display: inline-block; + list-style-type: none; + // It is probably a bad idea to modify this margin + margin: 0 -18px 0 0; + padding: 0; + height: 30px; + .o-vertical-gradient(#fcfcfc, #dedede); + &:first-child > .label { + border-left: 1px solid #cacaca; + padding-left: 14px; + } + &:last-child { + border-right: 1px solid #cacaca; + > .label { + padding-right: 14px; + } + > .arrow { + display: none; + } + } + > .label { + color: #4c4c4c; + text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede; + padding: 7px; + display: inline-block; + padding-left: 24px; + margin: 0; + position: relative; + // Customize for statusbar label + line-height: normal; + font-size: 100%; + font-weight: normal; + // End of customize + } + > .arrow { + width: 17px; + height: 30px; + display: inline-block; + vertical-align: top; + overflow: hidden; + margin-left: -5px; + span { + position: relative; + width: 24px; + height: 24px; + display: inline-block; + margin-left: -12px; + margin-top: 3px; + border-radius: 3px; + box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2); + .o-skew-gradient(#fcfcfc, #dedede); + .o-transform(rotate(45deg)); + } + } + } + ul.oe_dropdown_menu { + display: none; + padding: 0; + min-width: 0; + &.oe_opened { + display: block; + } + li { + margin: 0; + width: 100%; + span.label { + padding-left: 14px; + } + } + } + li.oe_active { + .o-vertical-gradient(lighten(@odoo-brand-primary, 15%), darken(@odoo-brand-primary, 15%)); + > .arrow span { + .o-skew-gradient(lighten(@odoo-brand-primary, 15%), darken(@odoo-brand-primary, 15%)); + } + > .label { + color: white; + text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4; + } + } + } + ul.oe_form_status_clickable { + li { + cursor: pointer; + &:hover { + .o-vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%)); + > .label { + text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede; + } + > .arrow span { + .o-vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%)); + } + } + > .label { + color: @link-color; + } + } + li.oe_active { + &:hover { + .o-vertical-gradient(@odoo-brand-primary, darken(@odoo-brand-primary, 30%)); + > .label { + text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4; + } + > .arrow span { + .o-skew-gradient(@odoo-brand-primary, darken(@odoo-brand-primary, 30%)); + } + } + } + } + + // Button box + .oe_button_box { + .oe_stat_button { + border-radius: 0; + border-color: #ccc; + background: white; + outline: none; + &:hover { + background-color: #e6e6e6; + } + .o_button_icon { + color: #7C7BAD; + font-size: 24px; + } + + .o_stat_info { // contains the value and text + .o_stat_value { + .o-text-overflow(block); + font-weight: 700; + color: @odoo-brand-primary; + } + .o_stat_text { + .o-text-overflow(block); + font-size: small; + + .o_stat_value { + display: inline; + } + } + } + + // Some buttons only display text and directly use the WidgetButton template instead of StatInfo + > span { + font-size: small; + white-space: normal; // text on several lines if needed + } + } + } + + // Avatar + .oe_avatar > img { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); + border: none; + } + + // Groups + .o_group { + .o_td_label { + border-right: 1px solid #ddd; + } + } + + // All required form fields + .o_form_required { + &.o_form_input, .o_form_input, &.o_form_textarea, .o_form_textarea { + background-color: #D2D2FF; + } + } + + .o_form_field.o_form_field_many2one .o_external_button { + padding: 0; + margin-left: 2px; + font-size: 19px; + color: #7C7BAD; + border: none; + &:hover { + background-color: transparent; + } + } + + // Dropdowns input carret + .o_form_input_dropdown .o_dropdown_button { + .o-position-absolute(2px, 4px); + } + + // Separators + .o_horizontal_separator { + color: @odoo-brand-optional; + font-weight: bold; + } + + // Translate icon + .o_field_translate { + margin-left: -15px; + } + + // Percent pie field + .o_form_field_percent_pie { + @pie-dimension: 34px; + @pie-ring-width: 4px; + + .o_pie { + width: @pie-dimension; + height: @pie-dimension; + margin-left: 5px; + + &:after { // Outside pie border to go over border-radius irregularities + border: 1px solid @odoo-brand-primary; + } + + .o_pie_value { + .o-position-absolute(@pie-ring-width, @pie-ring-width); + width: @pie-dimension - 2 * @pie-ring-width; + height: @pie-dimension - 2 * @pie-ring-width; + border: 1px solid white; + background-color: white; + } + } + } + + // Specific style classes + .o_group.o_inner_group.oe_subtotal_footer { + .oe_subtotal_footer_separator { + border-top: 1px solid #cacaca; + } + .o_td_label { + border-right: none; + } + } +} + +// Overriden style when form view in modal +.modal .modal-dialog { + .o_form_view { + .o_form_sheet_bg, .o_form_sheet { + border: none; + } + } +} diff --git a/addons/web/static/src/less/form_view_layout.less b/addons/web/static/src/less/form_view_layout.less new file mode 100644 index 00000000000..e6aa989ca12 --- /dev/null +++ b/addons/web/static/src/less/form_view_layout.less @@ -0,0 +1,298 @@ +.o_form_view { + .oe_inline { + width: auto!important; + @media (min-width: @screen-xs-min) { + &.o_inner_group { + width: 1px!important; + } + } + } + .oe_left { + .oe_inline; + float: left!important; + } + .oe_right { + .oe_inline; + float: right!important; + } + + @media (min-width: @screen-xs-min) { + .o_row { + &, &.o_form_field { // Some field may want to use o_row as root and these rules must prevalue + .o-flex-display(); + width: auto!important; + } + + .o-align-items(baseline); + min-width: 50px; + margin: 0 -@odoo-form-spacing-unit/2; + + > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule + .o-flex(0, 0, auto); + width: auto!important; + margin-right: @odoo-form-spacing-unit/2; + margin-left: @odoo-form-spacing-unit/2; + } + + > .o_row { + margin: 0; + } + > .btn { + padding-top: 0; + padding-bottom: 0; + } + > .o_form_field_boolean { + .o-align-self(center); + } + } + + .o_row .o_form_field_many2one, .o_form_field_many2one.oe_inline { + &.o_with_button:not(:last-child) { // If invisible element as last child, this line has no effect but that's not very important + margin-right: (35px + (@odoo-form-spacing-unit/2)); + } + } + } + + .o_row > div > .o_form_field { + width: 100%; + } + + // Readonly specific rules + &.o_form_readonly { + .o_row { + display: inline-block; + > div { + display: inline-block; + } + } + } + + // Editable specific rules + &.o_form_editable { + @media (min-width: @screen-xs-min) { + .o_row { + > .o_form_field, > div { + .o-flex(1, 1, auto); + width: 0!important; // 3rd flex argument does not work with input (must be auto and real width 0) + + &.o_form_field_boolean, &.o_priority { + .o-flex(0, 0, auto); + width: auto!important; + } + } + } + } + + .oe_title { + max-width: @container-sm - (2 * @odoo-horizontal-padding); + } + } + + // Title + .oe_title { + > h1, > h2, > h3 { + width: 100%; // Needed because inline-block when is a hx.o_row + margin-top: 0; + margin-bottom: 0; + line-height: inherit; + } + } + + // Groups + .o_group { + display: inline-block; + width: 100%; + margin: 10px 0; + + // o_group contains nested groups + .o-generate-groups(@odoo-form-group-cols); + .o-generate-groups(@n, @i: 1) when (@i =< @n) { + .o_group_col_@{i} { + display: inline-block; + width: floor(100% / 12 * @i); + vertical-align: top; + } + .o-generate-groups(@n, @i + 1); + } + + &.o_inner_group { + display: inline-table; + + > tbody > tr > td { + &.o_td_label { + width: 0%; + padding: 0 15px 0 0; + min-width: 150px; + } + vertical-align: top; + + span, .o_form_field_boolean, .oe_avatar, .o_form_uri { + &.o_form_field { + width: auto; + } + } + } + } + + .o_form_field { + width: 100%; + + > .btn { + .o-flex(0, 0, auto); + padding: 0 10px; + } + } + } + + // Notebooks + .o_notebook { + clear: both; // For the notebook not to have alongside floating elements + margin-top: @odoo-form-spacing-unit * 2; + } + + // Labels + .o_form_label { + margin: 0; + } + + // Form fields + .o_form_field { + display: inline-block; + margin-bottom: @odoo-form-spacing-unit; + } + + // Block fields + .note-editor, .oe_form_field_html, .oe_form_field_html_text, .oe_form_field_text, .o_view_manager_content { + display: block; + } + + // Flex fields + .o_form_field_many2one, .o_form_field_radio, .o_form_field_many2manytags, .o_form_field_percent_pie, .o_form_field_monetary, .o_form_field_binary_file { + .o-inline-flex-display(); + > span, > button { + .o-flex(0, 0, auto); + } + } + + .o_form_field, .btn { + .o_form_field { + margin-bottom: 0px; + } + } + + // Input in field + .o_form_field { + .o_form_input_dropdown { + width: 100%; + } + .o_form_input { + display: inline-block; + } + } + + // Textarea + .o_form_textarea { + white-space: pre-wrap; + width: 100%; + &.oe_inline { + width: 100%!important; + @media (min-width: @screen-xs-min) { + width: 45%!important; + } + } + } + + // Radio buttons + .o_form_field_radio { + .o_radio_item { + .o-flex(0, 0, auto); + .o-flex-display(); + .o-align-items(center); + + > input { + .o-flex(0, 0, auto); + margin: 0 @odoo-form-spacing-unit 0 0; + } + > label { + margin: 0; + } + } + + &.o_horizontal { + .o_radio_item { + margin-right: @odoo-form-spacing-unit * 2; + } + } + + &.o_vertical { + .o-flex-flow(column, nowrap); + .o_radio_item { + margin-bottom: @odoo-form-spacing-unit; + } + } + } + + // One2Many, Many2Many outside of group + .o_form_field { + &.o_view_manager_content, &.o_form_field_one2many, &.o_form_field_many2many { + width: 100%; + > div { + width: 100%; + } + } + } + + // Many2many tags + .o_form_field_many2manytags { + .o-flex-flow(row, wrap); + .o-align-items(baseline); + .badge { + .o-flex(0, 0, auto); + > .o_badge_text { + .o-text-overflow(inline-block); + max-width: 200px; + } + } + } + + // Percent pie + .o_form_field_percent_pie { + .o-align-items(center); + > .o_pie { + margin-right: 10px; + } + } + + // Kanban selection + .o_form_sheet > .o_kanban_selection { + float: right; + } + + // Specific style classes + .o_group.o_inner_group.oe_subtotal_footer { + .oe_right; + } +} + +// Overriden style when form view in modal +.modal .modal-dialog { + .o_form_view { + .o_form_sheet_bg { + padding: 0; + } + .oe_chatter { + display: none; + } + } + &:not(.modal-lg) .o_form_view { + .o_group { + width: 100%; + } + } +} + +@media print { + .oe_button_box { + display: none !important; + } +} diff --git a/addons/web/static/src/less/form_view_layout_extra.less b/addons/web/static/src/less/form_view_layout_extra.less new file mode 100644 index 00000000000..0845977ef4d --- /dev/null +++ b/addons/web/static/src/less/form_view_layout_extra.less @@ -0,0 +1,125 @@ +@sheet-max-width: 860px; +@sheet-min-width: 650px; +@sheet-padding: 16px; + +.o_form_view { + &.o_form_nosheet { + padding: 16px; + &.oe_form_nomargin { + margin: 0; + } + } + .o_form_sheet_bg { + position: relative; + padding: @sheet-padding 0; + .o_form_sheet { + min-width: @sheet-min-width; + max-width: @sheet-max-width; + min-height: 330px; + background: white; + padding: 16px; + margin: 0 auto; + .ui-tabs { + margin: 0 -16px; + } + .oe_notebook_page { + padding: 0 16px; + } + } + } + + // Header containing status/workflow buttons + > header { + padding-left: 14px; + .clearfix(); + ul:not(.oe_tooltip_technical):not(.oe_dropdown_menu) { + display: inline-block; + float: right; + } + > button { + margin: 0 2px; + } + > span { + margin-left: 4px; + } + } + + // Button box + .oe_button_box { + width: 400px; + text-align: right; + float: right; + .oe_stat_button { + text-align: left; + width: 132px !important; + height: 40px; + margin: 0px -1px -1px 0px; + padding: 0; + > div { + text-align: left; + padding: 0; + line-height: 120%; + vertical-align: middle; + } + .o_button_icon { + display: inline-block; + width: 30%; + padding: 0px 3px; + width: 37px; + text-align: center; + vertical-align: middle; + } + + .o_stat_info { // contains the value and text + display: inline-block; + max-width: 70%; + line-height: 1.2; + } + + // Some buttons only display text and directly use the WidgetButton template instead of StatInfo + > span { + .o_stat_info; // layout + } + } + + &, & + .oe_avatar { + + .oe_title { + width: 400px; + } + } + } + + // Groups + .o_group { + .o_td_label + td { + padding: 2px 36px 2px 8px; + } + .o_form_field.o_text_overflow { + width: 1px!important; // hack to make the table layout believe it is a small element (so that the table does not grow too much) ... + min-width: 100%; // ... but in fact it takes the whole table space + } + } + + // Avatar + .oe_avatar { + float: left; + > img { + max-height: 90px; + max-width: 90px; + margin-bottom: 10px; + } + + .oe_title { + padding-left: 95px; + margin-left: 5px; + } + } + + // Chatter + .oe_chatter { + display: block; + min-width: @sheet-min-width + 2* @sheet-padding; + max-width: @sheet-max-width + 2* @sheet-padding; + margin: 0 auto; + padding: 16px 16px 48px; + } +} diff --git a/addons/web/static/src/less/graph_view.less b/addons/web/static/src/less/graph_view.less new file mode 100644 index 00000000000..c0d460ab3f1 --- /dev/null +++ b/addons/web/static/src/less/graph_view.less @@ -0,0 +1,18 @@ +.o_graph { + height: 100%; + + .o_graph_svg_container { + height: 100%; + overflow: auto; + svg { + background-color: @odoo-view-background-color; + } + } +} + +// ------------------------------------------------------------------ +// Control panel buttons +// ------------------------------------------------------------------ +.o_graph_measures_list { + .o-selected-li; +}
\ No newline at end of file diff --git a/addons/web/static/src/less/list_view.less b/addons/web/static/src/less/list_view.less new file mode 100644 index 00000000000..a8b4130269c --- /dev/null +++ b/addons/web/static/src/less/list_view.less @@ -0,0 +1,220 @@ +@odoo-list-group-header-color: lighten(@odoo-list-grey, 10%); +.o_list_view { + cursor: pointer; + background-color: @odoo-view-background-color; + margin-bottom: 0px; + + &.table { + td, th { + vertical-align: middle; + } + } + + thead { + color: @odoo-main-text-color; + background-color: #eee; + border-bottom: 1px solid #cacaca; + > tr > th { + border-left: 1px solid #dfdfdf; + &:not(.o_column_sortable):hover { + cursor: default; + } + } + } + + tfoot { + cursor: default; + color: @odoo-list-footer-color; + background-color: @odoo-list-footer-bg-color; + font-weight: @odoo-list-footer-font-weight; + border-top: 2px solid #cacaca; + border-bottom: 1px solid #cacaca; + } + + .o_column_sortable { + .user-select(none); // Prevent unwanted selection while sorting + + &.o-sort-up:after { + font-family: FontAwesome; + margin-left: 5px; + content: "\f0d7"; + } + &.o-sort-down:after { + font-family: FontAwesome; + margin-left: 5px; + content: "\f0d8"; + } + } + + .o_list_record_selector { + width: 1px; // to prevent the column to expand + > input { + margin-left: 3px; + .hidden-xs(); + } + } + + .o_list_record_delete { + width: 13px; + } + + .o_handle_cell { + width: 1px; // to prevent the column to expand + .o_row_handle { + cursor: ns-resize; + } + } + + // Decoration of the row + .text-bf { + font-weight: bold; + } + .text-it { + font-style: italic; + } + .text-muted { + color: lighten(@text-muted, 10%); + } + + // Grouped list views + tbody > tr.o_group_header { + .o-vertical-gradient(#fcfcfc, #dedede); + + .o_group_name { + white-space: nowrap; + } + .o_group_pager { + cursor: text; + .user-select(none); + text-align: right; + .o_pager_previous, .o_pager_next { + background-color: @odoo-list-group-header-color; + &:hover { + background-color: darken(@odoo-list-group-header-color, 10%); + } + } + } + } + tbody + tbody { + border-top: none; // Override bootstrap for grouped list views + } + + .o_list_number { + text-align: right; + white-space: nowrap; + } + .o_list_text { + white-space: pre-wrap; + } +} + +.o_list_editable { + position: relative; + + .o_temp_visible { + opacity: 0; + display: block!important; + } + + .o_list_view { + .o_row_edition > td { + visibility: hidden; // Hide row's content during edition + &.o_list_record_selector, &.o_list_record_delete, &.o_list_button { + visibility: visible; + } + + &.o_readonly { + visibility: visible; + color: transparent; + } + } + } + + .o_form_view.o_list_editable_form { + padding: 0; + > .o_form_field { + padding: 0; + position: absolute; + white-space: nowrap; + &.o_form_textarea { + white-space: pre-wrap; + } + .o_form_field, .badge { // Many2Many tags + display: block; + float: left; + white-space: normal; + max-width: 100%; // Fix a chrome bug where badge would not break on multiple lines + } + + &.o_readonly { + background-color: transparent; + padding: 5px; + } + } + > .o_field_translate { + position: absolute; + width: 16px; // to have some space on the right + } + .o_form_input_dropdown { + height: 100%; + } + .o_form_input { + height: 100%; + padding-left: 5px; + padding-right: 5px; + } + .o_form_input, .o_form_textarea, .o_form_field_many2manytags, .o_form_field_monetary { + border-style: solid; + } + .o_form_field_monetary .o_form_input { + width: 0; + } + .o_checkbox { + padding: 7px 0 0 5px; + background: transparent; + } + .o_form_textarea { + min-width: 0; + } + .o_with_button .o_form_input_dropdown { + width: 1%; // Hack so that the sibling button is not overlapped + } + .o_form_input_dropdown, .o_datepicker { + > .o_form_input { + padding-right: 15px; // To prevent caret overlapping + } + > .o_dropdown_button, .o_datepicker_button { + .o-position-absolute(20%, 5px); + } + } + .o_form_field > .o_external_button { + padding: 0; + background-color: inherit; + margin-left: 3px; + } + .o_row_handle { + visibility: hidden; // Hide sequence when editing + } + .o_form_field_boolean { + width: auto!important; // Override the width computed in JS (needed for Chrome) + } + .o_form_field_number { + text-align: right; + } + } +} + +// Buttons in ControlPanel +.o_list_buttons { + .o_list_button_save, .o_list_button_discard { + display: none; + } + &.o-editing { // for list view editable + .o_list_button_add { + display: none + } + .o_list_button_save, .o_list_button_discard { + display: inline-block + } + } +} diff --git a/addons/web/static/src/less/modal.less b/addons/web/static/src/less/modal.less index 9ff0453c4dd..bca950796fc 100644 --- a/addons/web/static/src/less/modal.less +++ b/addons/web/static/src/less/modal.less @@ -3,6 +3,10 @@ .modal-content { border-radius: 0; + .modal-header .o_subtitle { + margin-left: 10px; + } + .modal-body { &.o_act_window { padding: 0; @@ -20,7 +24,7 @@ } } - .oe-view-manager-content { + .o_view_manager_content { position: static; // Reset position for view managers in modals (default value: absolute) } } diff --git a/addons/web/static/src/less/navbar.less b/addons/web/static/src/less/navbar.less index 8dcacd1c45c..50015db9955 100644 --- a/addons/web/static/src/less/navbar.less +++ b/addons/web/static/src/less/navbar.less @@ -1,6 +1,5 @@ .o_main_navbar { - position: relative; height: @odoo-navbar-height; border: 1px solid @odoo-navbar-inverse-link-hover-bg; background-color: @odoo-brand-primary; @@ -66,12 +65,6 @@ left: auto; right: 0; } - .o_user_menu { - float: right; - .oe_topbar_avatar { - height: 15px; - } - } } } @@ -150,13 +143,6 @@ } } } - - .o_menu_brand { - float: none; - margin: 0; - border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg; - color: transparent; - } } } diff --git a/addons/web/static/src/less/pivot_view.less b/addons/web/static/src/less/pivot_view.less new file mode 100644 index 00000000000..2fa6e1a6f44 --- /dev/null +++ b/addons/web/static/src/less/pivot_view.less @@ -0,0 +1,79 @@ +.o_pivot { + height: 100%; + overflow: auto; + + // Inform the user that he may click on a cell to be redirected to a list view of the + // items corresponding to the clicked cell + &.o_enable_linking { + .o_pivot_cell_value:hover { + color: @odoo-brand-optional; + cursor: pointer; + } + } + + table { + background-color: @odoo-view-background-color; + width: auto; // bootstrap override + + th { + font-weight: normal; // bootstrap override + background-color: lighten(@odoo-brand-secondary, 40%); + } + + .o-pivot-header-cell() { + background-color: lighten(@odoo-brand-secondary, 40%); + cursor: pointer; + white-space: nowrap; + .user-select(none); + &:hover { + background-color: lighten(@odoo-brand-secondary, 30%); + } + } + + .o_pivot_measure_row { + .o-pivot-header-cell; + } + + .o_pivot_header_cell_closed { + .o-pivot-header-cell; + &::before { + font-family: FontAwesome; + content: ""; + margin-right: 8px; + } + } + + .o_pivot_header_cell_opened { + .o-pivot-header-cell; + &::before { + font-family: FontAwesome; + content: ""; + margin-right: 8px; + } + } + + .o_pivot_measure_row_sorted_asc::after { + .o-caret-down; + margin-left: 5px; + } + + .o_pivot_measure_row_sorted_desc::after { + .o-caret-up; + margin-left: 5px; + } + } + + .o_pivot_field_selection::after { + .o-caret-right; + position: absolute; + right: 6px; + top: 9px; + } +} + +// ------------------------------------------------------------------ +// Control panel buttons +// ------------------------------------------------------------------ +.o_pivot_measures_list { + .o-selected-li; +}
\ No newline at end of file diff --git a/addons/web/static/src/less/progress_bar.less b/addons/web/static/src/less/progress_bar.less new file mode 100644 index 00000000000..25a89d15ecf --- /dev/null +++ b/addons/web/static/src/less/progress_bar.less @@ -0,0 +1,36 @@ +.o_progressbar { + + > div { + display: inline-block; + } + + .o_progressbar_title { + white-space: nowrap; + padding-right: 10px; + } + + .o_progress { + width: 100px; + height: 15px; + vertical-align: middle; + + border: 1px solid lighten(@odoo-brand-secondary, 25%); + overflow: hidden; + + background-color: white; + &.o_progress_overflow { + background-color: @odoo-brand-secondary; + } + + .o_progressbar_complete { + background-color: @odoo-brand-optional; + height: 100%; + } + } + + .o_progressbar_value { + width: 100px; + white-space: nowrap; + padding-left: 10px; + } +} diff --git a/addons/web/static/src/less/search_view.less b/addons/web/static/src/less/search_view.less new file mode 100644 index 00000000000..a34905cb929 --- /dev/null +++ b/addons/web/static/src/less/search_view.less @@ -0,0 +1,209 @@ +.o-search-options-dropdown-custom-li() { + margin: 3px 25px; + width: auto; + max-width: 250px; +} + +.o_searchview { + .o-flex-display(); + .o-flex-flow(row, wrap); + .o-align-items(flex-end); + position: relative; + padding: 0 20px 1px 0; + + .o_searchview_facet { + @o-searchview-facet-remove-width: 18px; + + .o-flex(0, 0, auto); + max-width: 100%; + .o-flex-display(); + position: relative; + margin: 1px 3px 0 0; + + .o_searchview_facet_label { + .o-flex(0, 0, auto); + .o-text-overflow(); + padding: 0 3px; + color: white; + + .o-flex-display(); + .o-align-items(center); + } + + .o_facet_values { + padding: 0 @o-searchview-facet-remove-width 0 5px; + .o_facet_values_sep { + font-style: italic; + } + } + .o_facet_remove { + .o-flex(0, 0, auto); + .o-flex-display(); + .o-justify-content(center); + .o-align-items(center); + .o-position-absolute(0, 0, 0); + width: @o-searchview-facet-remove-width; + cursor: pointer; + } + } + + .o_searchview_input { + width: 100px; + .o-flex(1, 0, auto); + } + + .o_searchview_more { + font-size: 16px; + cursor: pointer; + } + + .o_searchview_autocomplete { + .o-position-absolute(100%, @left: auto); + width: 100%; + + li { + padding-left: 25px; + position: relative; + &.o-indent { + padding-left: 50px; + } + a { + display: inline-block; + padding-left: 0px; + padding-right: 0px; + &:hover { + background-color: inherit; + } + &.o-expand, &.o-expanded { // caret + .o-position-absolute(@left: 6px); + padding: 3px; + } + &.o-expand:before { + .o-caret-right; + } + &.o-expanded:before { + .o-caret-down; + } + } + } + } +} + +// Searchview and Sidebar dropdowns +// FIXME: move me out of here +.o_dropdown { + white-space: nowrap; // prevent the arrow from going under the dropdown when too little space + .dropdown-toggle:first-child { + // apply the padding to the first element so that when the `favorites` menu goes under + // the `filters` menu, they're still aligned + padding-right: 10px; + } + + display: inline-block; + cursor: pointer; + .user-select(none); // Prevent text selection when toggling the dropdowns + > a { // dropdown togglers + color: @odoo-main-text-color; + &:hover { + text-decoration: none; + font-weight: bold; + color: darken(@odoo-main-text-color, 10%); + } + } + &.open > a { + font-weight: bold; + color: darken(@odoo-main-text-color, 10%); + } +} + +// Searchview dropdowns +.o_search_options { + // Open and closed carets in dropdowns + .o_closed_menu { + position: relative; + a:before { + .o-caret-right; + .o-position-absolute(@top: 50%, @left: 10px); + margin-top: (-@caret-width-base); + } + } + .o_open_menu { + position: relative; + a:before { + .o-caret-down; + .o-position-absolute(@top: 50%, @left: 10px); + margin-top: (-@caret-width-base); + } + } + + // Filters + .o_filters_menu { + .o-selected-li; + + .o_filter_condition { + .o-search-options-dropdown-custom-li; + margin-bottom: 8px; + .o_or_filter { // or between conditions + display: none; // hidden for the first condition + .o-position-absolute(@top: 7px, @left: -18px); + } + } + .o_filter_condition + .o_filter_condition { + .o_or_filter { + display: block; // displayed from second condition + } + } + .o_searchview_extended_prop_op { + margin: 3px 0px; // vertical gap between selects + } + .o_searchview_extended_prop_value { // date fields: datepicker position + .datepickerbutton { + .o-position-absolute(3px, -20px); + cursor: pointer; + } + } + .o_searchview_extended_delete_prop { // delete condition button position + .o-position-absolute(3px, -18px); + cursor: pointer; + } + .o_add_filter_menu { // apply and add buttons + display: none; // Needed by the webclient + .o-search-options-dropdown-custom-li; + } + } + + // Group By + .o_group_by_menu { + .o-selected-li; + + .divider {display: none;} // hide the divider by default (no group) + .o_add_group { // add button + display: none; // Needed by the webclient + .o-search-options-dropdown-custom-li; + } + } + + // Favorites + .o_favorites_menu { + .o-selected-li; + + .divider {display: none;} // hide the divider by default (no favorite) + .o-searchview-custom-private, .o-searchview-custom-public { + .o-remove-filter { + .o-position-absolute(50%, 12px); + margin-top: -6px; + cursor: pointer; + } + } + .o-searchview-custom-public a:after { + font-family: FontAwesome; + content: "\f0c0"; + margin-left: 5px; + font-weight: normal; + } + .o_save_name { // save button + display: none; // hidden by default + .o-search-options-dropdown-custom-li; + } + } +} diff --git a/addons/web/static/src/less/search_view_extra.less b/addons/web/static/src/less/search_view_extra.less new file mode 100644 index 00000000000..0ef7b8dd1dd --- /dev/null +++ b/addons/web/static/src/less/search_view_extra.less @@ -0,0 +1,44 @@ +.o_searchview { + background-color: white; + border: 1px solid #ccc; + border-radius: @border-radius-base; + padding: 1px 25px 3px 5px; + + .o_searchview_facet { + border: 1px solid @gray-light; + background: lighten(@odoo-brand-primary, 35%); + + .o_searchview_facet_label { + background-color: @gray-light; + } + + .o_facet_remove { + color: @gray-light; + &:hover { + color: @gray; + } + } + } + + .o_searchview_input { + border: none; + padding: 4px 0 0 0; + } + .o_searchview_more { + .o-position-absolute(@top: 6px, @right: 5px); + } + .o_searchview_autocomplete li.o-selection-focus { + background-color: @odoo-brand-primary; + > a { + color: white; + } + } +} + +// Search options: inputs and selects style +.o_search_options { + input[type="text"], select { + .form-control(); + } + +} diff --git a/addons/web/static/src/less/tooltip.less b/addons/web/static/src/less/tooltip.less new file mode 100644 index 00000000000..dad63e374fa --- /dev/null +++ b/addons/web/static/src/less/tooltip.less @@ -0,0 +1,57 @@ + +.tooltip { + padding: 0; + margin: 0; + opacity: 1; + + .tooltip-inner { + background-color: @odoo-tooltip-background-color; + color: @odoo-tooltip-color; + border-radius: @border-radius-base; + box-shadow: 0px 0px 1px 1px @odoo-brand-secondary; + + padding: 5px; + + text-align: left; + + .oe_tooltip_string { + background-color: @odoo-brand-primary; + color: white; + font-weight: bold; + padding: 5px; + } + .oe_tooltip_help { + white-space: pre-line; + padding: 5px 5px 0; + } + .oe_tooltip_technical { + padding: 0; + margin: 5px 0 5px 20px; + list-style-type: circle; + + .oe_tooltip_technical_title { + font-weight: bold; + } + } + } + + .tooltip-arrow { + -moz-transform: scale(0.9999); + } + &.top, &.top-left, &.top-right { + .tooltip-arrow { + border-top-color: @odoo-tooltip-arrow-color!important; + } + } + &.bottom, &.bottom-left, &.bottom-right { + .tooltip-arrow { + border-bottom-color: @odoo-tooltip-arrow-color!important; + } + } + &.left .tooltip-arrow { + border-left-color: @odoo-tooltip-arrow-color!important; + } + &.right .tooltip-arrow { + border-right-color: @odoo-tooltip-arrow-color!important; + } +} diff --git a/addons/web/static/src/less/tree_view.less b/addons/web/static/src/less/tree_view.less new file mode 100644 index 00000000000..681cfb33c80 --- /dev/null +++ b/addons/web/static/src/less/tree_view.less @@ -0,0 +1,50 @@ +.o_treeview_table { + width: 100%; + background-color: white; + border-collapse: collapse; + + thead { + color: @odoo-main-text-color; + background-color: @odoo-list-grey; + > tr > th { + padding: 10px; + } + } + + tbody { + > tr { + border: 1px solid @odoo-list-grey; + &:hover { + background-color: lighten(@odoo-list-grey, 15%); + } + > td { + border: 1px solid @odoo-list-grey; + cursor: pointer; + height: 40px; + padding: 0 4px; + &.oe_number { + text-align: right; + } + } + } + .treeview-tr, .treeview-td { + &.o_treeview_first > span { + padding-left: 16px; + } + } + .treeview-tr.o_treeview_first { + position: relative; + &:before { + position: absolute; + top: 13px; + .o-caret-right(6px); + } + } + .o_open .treeview-tr.o_treeview_first { + &:before { + top: 16px; + .o-caret-down(6px); + } + } + } +}
\ No newline at end of file diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less index 302f79edf03..836ae6453dc 100644 --- a/addons/web/static/src/less/utils.less +++ b/addons/web/static/src/less/utils.less @@ -116,14 +116,6 @@ background-size: @size; } -// Background gradient -.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) { - background-repeat: repeat-x; - background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); - background-image: -o-linear-gradient(@deg, @start-color, @end-color); - background-image: linear-gradient(@deg, @start-color, @end-color); -} - // ------------------------------------------------------------------ // Dropdowns // ------------------------------------------------------------------ @@ -221,3 +213,40 @@ text-overflow: ellipsis; vertical-align: top; // To update display context changed by overflow:hidden } + +// ------------------------------------------------------------------ +// Gradients +// ------------------------------------------------------------------ +.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) { + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); + background-image: -o-linear-gradient(@deg, @start-color, @end-color); + background-image: linear-gradient(@deg, @start-color, @end-color); +} +.o-vertical-gradient(@startColor: #555, @endColor: #333) { + background-color: mix(@startColor, @endColor); + background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); + background-image: -webkit-linear-gradient(top, @startColor, @endColor); + background-image: -moz-linear-gradient(top, @startColor, @endColor); + background-image: -ms-linear-gradient(top, @startColor, @endColor); + background-image: -o-linear-gradient(top, @startColor, @endColor); + background-image: linear-gradient(to bottom, @startColor, @endColor); +} +.o-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)); + background: -ms-linear-gradient(top, @startColor, @endColor); +} + +// ------------------------------------------------------------------ +// Transform +// ------------------------------------------------------------------ +.o-transform(@transform) { + -webkit-transform: @transform; + -moz-transform: @transform; + -ms-transform: @transform; + -o-transform: @transform; + transform: @transform; +} diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less index 4bea799e5ec..5a8120d0d97 100644 --- a/addons/web/static/src/less/variables.less +++ b/addons/web/static/src/less/variables.less @@ -1,28 +1,50 @@ @odoo-font-size-base: 13px; -@odoo-font-size-base-touch: 15px; // Colors -@odoo-brand-primary: #337ab7; -@odoo-brand-optional: @odoo-brand-primary; -@odoo-brand-secondary: #8f8f8f; +@odoo-brand-primary: #7c7bad; +@odoo-brand-optional: #7c7bad; +@odoo-brand-secondary: #f0eeee; @odoo-brand-lightsecondary: #e2e2e0; +@odoo-color-pink: #a24689; @odoo-main-color-muted: #a8a8a8; -@odoo-main-text-color: #555555; +@odoo-main-text-color: #4c4c4c; @odoo-view-background-color: white; @odoo-shadow-color: #303030; -@odoo-webclient-background-color: #F0EEEE; + +@odoo-webclient-background-color: @odoo-brand-secondary; +@odoo-control-panel-background-color: @odoo-webclient-background-color; +@odoo-form-lightsecondary: #ccc; @odoo-list-grey: @odoo-brand-lightsecondary; +@odoo-list-footer-color: @odoo-main-text-color; +@odoo-list-footer-bg-color: #eee; +@odoo-list-footer-font-weight: bold; + +@odoo-tooltip-background-color: black; +@odoo-tooltip-color: white; +@odoo-tooltip-arrow-color: black; + // Layout @screen-xs-min: 475px; @screen-xxs-max: (@screen-xs-min - 1); @odoo-form-group-cols: 12; +@odoo-form-spacing-unit: 5px; @odoo-horizontal-padding: 16px; +@odoo-innergroup-rpadding: 45px; +@odoo-dropdown-hpadding: 25px; + +@border-radius-base: 3px; -// Compatibility -@odoo-navbar-height: 46px; +@odoo-sheet-vpadding: 24px; + +@odoo-avatar-size: 90px; + +@odoo-statusbar-height: 36px; +@odoo-statusbar-arrow-width: @odoo-statusbar-height/3; + +@odoo-label-font-size-factor: 0.8; +@odoo-navbar-height: 34px; @odoo-navbar-inverse-link-hover-bg: darken(@odoo-brand-primary, 10%); -@odoo-dropdown-hpadding: 25px; diff --git a/addons/web/static/src/less/views.less b/addons/web/static/src/less/views.less new file mode 100644 index 00000000000..7a4deca60ff --- /dev/null +++ b/addons/web/static/src/less/views.less @@ -0,0 +1,72 @@ +// -------------------------------------------------------------------------- +// This file contains rules applying on elements shared between views +// -------------------------------------------------------------------------- + +// Many2many tags +.o_form_field_many2manytags { + .o_tag_color_0 { + background-color: #B6BBBF; + } + .o_tag_color_1 { + background-color: #61BD4F; + } + .o_tag_color_2 { + background-color: #F2D600; + } + .o_tag_color_3 { + background-color: #FFAB4A; + } + .o_tag_color_4 { + background-color: #EB5A46; + } + .o_tag_color_5 { + background-color: #A24689; + } + .o_tag_color_6 { + background-color: #0079BF; + } + .o_tag_color_7 { + background-color: #00C2E0; + } + .o_tag_color_8 { + background-color: #4CD98E; + } + .o_tag_color_9 { + background-color: #FF80CE; + } + .o_tag_color_10 { + background-color: #4D4D4D; + } +} + +// Stars +.o_priority { + display: inline-block; + padding: 0; + margin: 0; + vertical-align: middle; + > .o_priority_star { + display: inline-block; + font-size: 1.35em; + &:hover, &:focus { + text-decoration: none; + outline: none; + } + + + .o_priority_star { + padding-left: 5px; + } + + &.fa-star-o { + color: @odoo-main-color-muted; + } + &.fa-star { + color: gold; + } + } +} + +// No content helper +.oe_view.oe_cannot_create .oe_view_nocontent_create { + display: none; +} diff --git a/addons/web/static/src/less/views_extra.less b/addons/web/static/src/less/views_extra.less new file mode 100644 index 00000000000..ad6f4c83017 --- /dev/null +++ b/addons/web/static/src/less/views_extra.less @@ -0,0 +1,33 @@ +// No content helper +.oe_view_nocontent { + padding: 15px; + margin-top: 0; + color: #777777; + font-size: 125%; + max-width: 700px; + .oe_view_nocontent_create { + margin-top: 0; + padding-top: 35px; + color: #4c4c4c; + &:before { + content: ""; + display: inline-block; + position: absolute; + width: 70px; + height: 80px; + margin-left: -70px; + margin-top: -50px; + background: transparent url(/web/static/src/img/view_empty_arrow.png) no-repeat 0px 0px; + } + } + > p { + padding-left: 78px; + } + .oe_empty_custom_dashboard { + background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0; + margin-top: -15px; + padding: 100px 0 0 137px; + min-height: 327px; + margin-left: -15px; + } +} diff --git a/addons/web/static/src/less/notification.less b/addons/web/static/src/less/webclient.less index 0c910dbc5c5..2f9878fbdc3 100644 --- a/addons/web/static/src/less/notification.less +++ b/addons/web/static/src/less/webclient.less @@ -1,3 +1,29 @@ +// ------------------------------------------------------------------ +// Typography +// ------------------------------------------------------------------ +a { + color: @odoo-brand-optional; + &:hover { + color: darken(@odoo-brand-optional, 10%); + } +} + +// ------------------------------------------------------------------ +// General +// ------------------------------------------------------------------ +.o_web_client { + background-color: @odoo-webclient-background-color; +} +.o_text_overflow { + .o-text-overflow(); +} +.o_hidden { + display: none!important; +} + +// ------------------------------------------------------------------ +// Misc. widgets +// ------------------------------------------------------------------ @notification-error-bg-color: #F16567; @notification-info-bg-color: #FCFBEA; .o_notification_manager { @@ -5,7 +31,7 @@ max-width: 100%; .o-position-absolute(@navbar-height, 0px); - z-index: 50; // same as debug manager. Fixme: expose a variable + z-index: 1100; // Bootstrap modal z-index is 1050 .o_notification { padding: 0; @@ -49,3 +75,15 @@ } } } + +// Buttons +.o_icon_button { + background-color: transparent; + border: 0; + padding: 0; + outline: none; +} + +.oe_highlight { + .btn-primary; +} diff --git a/addons/web/static/src/less/webclient_extra.less b/addons/web/static/src/less/webclient_extra.less new file mode 100644 index 00000000000..094670bf0ca --- /dev/null +++ b/addons/web/static/src/less/webclient_extra.less @@ -0,0 +1,65 @@ +// ------------------------------------------------------------------ +// Checkboxes +// ------------------------------------------------------------------ +div.o_checkbox { + display: inline-block; + vertical-align: sub; + > input + span { + display: none; + } +} + +// ------------------------------------------------------------------ +// Inputs and selects +// ------------------------------------------------------------------ +.o-input() { + border: 1px solid @odoo-form-lightsecondary; + border-radius: @border-radius-base; + padding: 2px 4px; + color: #1f1f1f; +} +input[type="text"], input[type="password"], input[type="number"], textarea, select { + .o-input(); + + width: 100%; + outline: none; + display: block; +} +select { + background: white; +} + +// ------------------------------------------------------------------ +// Loading +// ------------------------------------------------------------------ +.o_loading { + position: fixed; + top: 0; + right: 50%; + padding: 4px 12px; + background-color: @odoo-color-pink; + color: white; + text-align: center; + border-top: none; + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; +} + +// ------------------------------------------------------------------ +// Planner +// ------------------------------------------------------------------ +// Because the `web_planner` module has to work with Odoo community and enterprise without +// code duplication, fine-tune the display of it in the community webclient here +#PlannerDialog { + top: 35px; + box-shadow: 0 3px 9px #666666; + padding-bottom: 44px; +} + +// ------------------------------------------------------------------ +// User menu in navbar +// ------------------------------------------------------------------ +#oe_main_menu_navbar .oe_user_menu_placeholder .o_user_menu .oe_topbar_name { + .o-text-overflow(); + max-width: 150px; +} diff --git a/addons/web/static/src/less/webclient_layout.less b/addons/web/static/src/less/webclient_layout.less new file mode 100644 index 00000000000..2dab3042aba --- /dev/null +++ b/addons/web/static/src/less/webclient_layout.less @@ -0,0 +1,156 @@ +@odoo-submenu-width: 220px; + +.o_web_client { + .o-flex-display(); + .o-flex-flow(column, nowrap); + overflow: hidden; + + .navbar { + .o-flex(0, 0, auto); + + li > a { + padding: 4px 8px; + margin-top: 2px; + font-size: 13px; + } + + .oe_topbar_avatar { + max-height: 18px; + width: 18px; + } + } + + > .o_main { + .o-flex(1, 1, auto); + .o-flex-display(); + + .o_sub_menu { + .o-flex(0, 0, @odoo-submenu-width); + .o-flex-display(); + .o-flex-flow(column, nowrap); + border-right: 1px solid #afafb6; + + .o_sub_menu_logo { + .o-flex(0, 0, auto); + text-align: center; + position: relative; + + > img { + margin: 14px 0; + } + + .oe_logo_edit { + position: absolute; + top: 1px; + width: 100%; + padding: 4px; + margin: 14px 0; + display: none; + color: #eee; + background: rgba(37,37,37,0.9); + } + &:hover .oe_logo_edit_admin { + display: block; + } + } + + .o_sub_menu_content { + .o-flex(1, 1, auto); + height:100%; + overflow-y: auto; + + .oe_secondary_menu_section { + font-weight: bold; + margin-left: 8px; + color: @odoo-brand-optional; + } + .oe_secondary_submenu { + margin: 3px 0px 10px; + line-height: 1.1em; + >li:not(.active) > a { + color: @odoo-main-text-color; + } + > li > a { + padding: 4px 4px 4px 18px; + > .badge { + margin-top: -1px; + } + } + .oe_secondary_submenu { + > li > a { + padding-left: 30px; + } + .oe_secondary_submenu > li > a { + padding-left: 42px; + } + } + .oe_menu_text { + .o-text-overflow(); + max-width: 85%; + margin-top: 1px; + } + .oe_menu_toggler:before { + display: inline-block; + width: 0; + height: 0; + content: "&darr"; + opacity: 0.5; + text-indent: -99999px; + vertical-align: top; + margin-left: -12px; + margin-top: 4px; + margin-right: 4px; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + border-left: 4px solid #4c4c4c; + } + .oe_menu_opened:before { + margin-top: 6px; + margin-left: -16px; + margin-right: 4px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #4c4c4c; + } + } + } + + .o_sub_menu_footer { + .o-flex(0, 0, auto); + text-align: center; + + > a { + font-weight: bold; + > span { + color: @odoo-color-pink; + } + } + } + } + + .o_main_content { + .o-flex(1, 1, auto); + .o-flex-display(); + .o-flex-flow(column, nowrap); + + .o_control_panel { + .o-flex(0, 0, auto); + } + .o_content { + .o-flex(1, 1, auto); + height: 100%; + overflow: auto; + position: relative; + + .o_view_manager_content { + .o-position-absolute(0, 0, 0, 0); // Get the 100% height of its flex parent + height: 100%; + + .o_view_manager_content { + position: static; // Reset position for nested view managers + } + } + } + } + } +} |