diff options
93 files changed, 1095 insertions, 1081 deletions
diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss index de562759e11..938bc058af2 100644 --- a/addons/account/static/src/scss/account_dashboard.scss +++ b/addons/account/static/src/scss/account_dashboard.scss @@ -1,7 +1,7 @@ .o_kanban_view.o_kanban_dashboard.o_account_kanban { &.o_kanban_ungrouped .o_account_dashboard_header { - margin: (0 - $o-kanban-record-margin) ($o-kanban-record-margin - $odoo-horizontal-padding) $o-kanban-record-margin; + margin: (0 - $o-kanban-record-margin) ($o-kanban-record-margin - $o-horizontal-padding) $o-kanban-record-margin; } .o_account_dashboard_header { @@ -11,10 +11,10 @@ width: 100%; height: auto; // cancel o_form_view height 100%, which hides the help tip message at the bottom of the screen min-height: 0%; // cancel o_form_view min-height 100%, which hides the help tip message at the bottom of the screen - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; .o_form_statusbar { - padding-right: $odoo-horizontal-padding; + padding-right: $o-horizontal-padding; } h4 { @@ -52,8 +52,8 @@ } &:last-of-type { - margin-left: $odoo-horizontal-padding; - padding-left: $odoo-horizontal-padding*.5; + margin-left: $o-horizontal-padding; + padding-left: $o-horizontal-padding*.5; border-left: 1px solid $gray-lighter-dark; } } diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss index e068040784d..1b87a6363a6 100644 --- a/addons/account/static/src/scss/account_journal_dashboard.scss +++ b/addons/account/static/src/scss/account_journal_dashboard.scss @@ -6,17 +6,17 @@ } .o_kanban_card_settings { - padding-top: $odoo-horizontal-padding/2; - padding-bottom: $odoo-horizontal-padding/2; + padding-top: $o-horizontal-padding/2; + padding-bottom: $o-horizontal-padding/2; border-top: 1px solid; - border-color: $odoo-brand-lightsecondary; + border-color: $o-brand-lightsecondary; } .o_dashboard_star { font-size: 12px; &.fa-star-o { - color: $odoo-main-color-muted; + color: $o-main-color-muted; &:hover { color: gold; } @@ -27,7 +27,7 @@ } .o_dashboard_graph { - margin-bottom: -$odoo-horizontal-padding/2; + margin-bottom: -$o-horizontal-padding/2; } } @@ -58,7 +58,7 @@ } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: $odoo-brand-primary; + // stroke: $o-brand-primary; line { display: none; @@ -72,13 +72,13 @@ g.nv-linesWrap { g.nv-group.nv-series-0 { fill-opacity: 0.3 !important; - fill: $odoo-brand-primary !important; - stroke: $odoo-brand-primary !important; + fill: $o-brand-primary !important; + stroke: $o-brand-primary !important; .nv-point { visibility: hidden; r: 3; - stroke: $odoo-brand-primary !important; + stroke: $o-brand-primary !important; fill: white; stroke-width: 2; } @@ -99,11 +99,11 @@ g.nv-group.nv-series-0 { g.past { opacity: 0.5; - fill: $odoo-brand-primary !important; + fill: $o-brand-primary !important; } g.future { opacity: 0.5; - fill: $odoo-brand-optional !important; + fill: $o-brand-optional !important; } } } diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss index 5d3e8ec3810..204337c5808 100644 --- a/addons/account/static/src/scss/account_reconciliation.scss +++ b/addons/account/static/src/scss/account_reconciliation.scss @@ -1,11 +1,3 @@ -$actionColWidth: 15px; -$mainTableBordersPadding: 3px; -$lightBorder: 1px solid #bbb; -$accountingBorder: 1px solid #000; -$initialLineBackground: #f0f0f0; -$infoColor: #44c; - - .o_reconciliation { h1 { width: 48%; @@ -18,7 +10,7 @@ $infoColor: #44c; &.statement_name { @include o-text-overflow; &.editable:hover { - outline: 1px dashed $odoo-brand-optional; + outline: 1px dashed $o-brand-optional; outline-offset: -1px; cursor: pointer; } @@ -51,7 +43,7 @@ $infoColor: #44c; .o_view_noreconciliation { max-width: none; padding: 0 10%; - color: $odoo-main-color-muted; + color: $o-main-color-muted; font-size: 125%; } @@ -110,16 +102,16 @@ $infoColor: #44c; cursor: pointer; } tr.already_reconciled { - color: $infoColor; + color: $o-account-info-color; } tr.invalid { text-decoration: line-through; } thead td { - border-top: $lightBorder; + border-top: $o-account-light-border; padding-top: 4px; padding-bottom: 5px; - background-color: $initialLineBackground; + background-color: $o-account-initial-line-background; } tfoot td { color: #bbb; @@ -182,7 +174,7 @@ $infoColor: #44c; td { padding-top: 10px; text-align: center; - color: $infoColor; + color: $o-account-info-color; } } @@ -231,7 +223,7 @@ $infoColor: #44c; content: "\f067"; } .match_controls { - padding: 0 0 5px ($actionColWidth+$mainTableBordersPadding); + padding: 0 0 5px ($o-account-action-col-width+$o-account-main-table-borders-padding); .filter { width: 240px; @@ -254,7 +246,7 @@ $infoColor: #44c; } .show_more { display: inline-block; - margin-left: ($actionColWidth+$mainTableBordersPadding); + margin-left: ($o-account-action-col-width+$o-account-main-table-borders-padding); margin-top: 5px; } } @@ -262,7 +254,7 @@ $infoColor: #44c; /* Create view */ .create { > div { - margin: 0 $actionColWidth; + margin: 0 $o-account-action-col-width; padding: 10px; overflow: auto; border: 1px solid #ddd; @@ -294,7 +286,7 @@ $infoColor: #44c; .add_line_container { text-align: center; clear: both; - color: $infoColor; + color: $o-account-info-color; cursor: pointer; } } diff --git a/addons/account/static/src/scss/variables.scss b/addons/account/static/src/scss/variables.scss new file mode 100644 index 00000000000..b83890b01a1 --- /dev/null +++ b/addons/account/static/src/scss/variables.scss @@ -0,0 +1,5 @@ +$o-account-action-col-width: 15px !default; +$o-account-main-table-borders-padding: 3px !default; +$o-account-light-border: 1px solid #bbb !default; +$o-account-initial-line-background: #f0f0f0 !default; +$o-account-info-color: #44c !default; diff --git a/addons/account/views/account.xml b/addons/account/views/account.xml index 45ca15f14bd..d8153c82871 100644 --- a/addons/account/views/account.xml +++ b/addons/account/views/account.xml @@ -1,5 +1,11 @@ <?xml version="1.0" encoding="utf-8"?> <odoo> + <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers"> + <xpath expr="//link" position="before"> + <link rel="stylesheet" type="text/scss" href="/account/static/src/scss/variables.scss"/> + </xpath> + </template> + <template id="assets_backend" name="account assets" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <link rel="stylesheet" href="/account/static/src/css/account_bank_and_cash.css"/> diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss index defbd1efbd6..a74eec477db 100644 --- a/addons/calendar/static/src/scss/calendar.scss +++ b/addons/calendar/static/src/scss/calendar.scss @@ -9,7 +9,7 @@ } &.needsAction { - background-color: $odoo-brand-secondary; + background-color: $o-brand-secondary; } &.declined { @@ -46,7 +46,7 @@ width: 50%; margin: 30px auto 0; @include o-webclient-padding($top: 10px, $bottom: 10px); - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; .o_logo { width: 15%; diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss index df173a9ab70..46cf2e629cc 100644 --- a/addons/event/static/src/scss/event.scss +++ b/addons/event/static/src/scss/event.scss @@ -10,7 +10,7 @@ @include o-flex(1, 1, 25%); text-align: center; color: white; - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; padding: 8px; .o_day { diff --git a/addons/google_calendar/static/src/scss/google_calendar.scss b/addons/google_calendar/static/src/scss/google_calendar.scss index 2f7346ec29c..1ee8feef473 100644 --- a/addons/google_calendar/static/src/scss/google_calendar.scss +++ b/addons/google_calendar/static/src/scss/google_calendar.scss @@ -8,5 +8,5 @@ img.calendar_img_tuto { margin: 0 0 10px 50px; - border: 2px solid $odoo-brand-secondary; + border: 2px solid $o-brand-secondary; } diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss index 8473920ea65..d54b105ca1c 100644 --- a/addons/hr_attendance/static/src/scss/hr_attendance.scss +++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss @@ -14,7 +14,7 @@ } #oe_hr_attendance_status { - color: $odoo-brand-secondary; + color: $o-brand-secondary; &.oe_hr_attendance_status_green { color: $brand-success; } diff --git a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss index c1b2f4b7d51..e211654d5e0 100644 --- a/addons/hr_org_chart/static/src/scss/hr_org_chart.scss +++ b/addons/hr_org_chart/static/src/scss/hr_org_chart.scss @@ -1,26 +1,10 @@ -$o-org-chart-bg: white; -$o-org-chart-border-color: $odoo-brand-secondary; - -$o-org-chart-entry-v-gap: 6px; -$o-org-chart-entry-pic-size: 46px; -$o-org-chart-entry-line-w: 1px; -$o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); - - -// MIXINS -@mixin o-org-chart-line { - content: ''; - background-color: $o-org-chart-bg; - border: 0px solid $o-org-chart-entry-border-color; -} - // MOBILE LAYOUT CUSTOMIZATIONS @media screen and (max-width: $screen-xs-max) { #o_employee_right { .o_org_chart_title { font-size: 20px; padding: 5px 0; - border-bottom: 1px solid $o-org-chart-border-color; + border-bottom: 1px solid $o-hr-org-chart-border-color; } } } @@ -38,7 +22,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); @include o-flex(0, 1, 35%); margin-left: 2%; padding-left: 2%; - border-left: 1px solid $o-org-chart-border-color; + border-left: 1px solid $o-hr-org-chart-border-color; .o_org_chart_title { color: $gray-light @@ -61,7 +45,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); } #o_employee_right { - $tmp-gap-base: $o-org-chart-entry-pic-size*0.7; + $tmp-gap-base: $o-hr-org-chart-entry-pic-size*0.7; // ORGANIGRAM LINES .o_field_widget, .o_org_chart_group_up, .o_org_chart_group_down { @@ -70,21 +54,21 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); .o_org_chart_group_up { &:before { - @include o-org-chart-line; - border-left-width: $o-org-chart-entry-line-w; - height: calc(100% + #{$o-org-chart-entry-pic-size*0.5}) ; + @include o-hr-org-chart-line; + border-left-width: $o-hr-org-chart-entry-line-w; + height: calc(100% + #{$o-hr-org-chart-entry-pic-size*0.5}) ; @include o-position-absolute( - $top: $o-org-chart-entry-pic-size*0.1 + 5px, - $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5 + $top: $o-hr-org-chart-entry-pic-size*0.1 + 5px, + $left: $o-hr-org-chart-entry-pic-size*0.5 - $o-hr-org-chart-entry-line-w*0.5 ); } .o_org_chart_entry:last-of-type { &:before { - @include o-org-chart-line; - border-width: 0 0 $o-org-chart-entry-line-w $o-org-chart-entry-line-w; - @include size(($o-org-chart-entry-pic-size*0.5) - ($o-org-chart-entry-v-gap*2), $o-org-chart-entry-pic-size*0.5 + $o-org-chart-entry-v-gap*2 ); + @include o-hr-org-chart-line; + border-width: 0 0 $o-hr-org-chart-entry-line-w $o-hr-org-chart-entry-line-w; + @include size(($o-hr-org-chart-entry-pic-size*0.5) - ($o-hr-org-chart-entry-v-gap*2), $o-hr-org-chart-entry-pic-size*0.5 + $o-hr-org-chart-entry-v-gap*2 ); @include o-position-absolute( - $left: $o-org-chart-entry-pic-size*0.5 - $o-org-chart-entry-line-w*0.5, + $left: $o-hr-org-chart-entry-pic-size*0.5 - $o-hr-org-chart-entry-line-w*0.5, $top: 100% ); } @@ -103,23 +87,23 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); margin-left: $tmp-gap-base; &:before { - @include o-org-chart-line; - border-left-width: $o-org-chart-entry-line-w; + @include o-hr-org-chart-line; + border-left-width: $o-hr-org-chart-entry-line-w; height: 100%; @include o-position-absolute( - $top: $o-org-chart-entry-v-gap*-1, - $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5 + $top: $o-hr-org-chart-entry-v-gap*-1, + $left: $tmp-gap-base*-0.5 + $o-hr-org-chart-entry-pic-size*0.1 + $o-hr-org-chart-entry-line-w*0.5 ); } .o_org_chart_entry { &:before { - @include o-org-chart-line; - border-top-width: $o-org-chart-entry-line-w; + @include o-hr-org-chart-line; + border-top-width: $o-hr-org-chart-entry-line-w; @include size($tmp-gap-base, 0); @include o-position-absolute( - $left: $tmp-gap-base*-0.5 + $o-org-chart-entry-pic-size*0.1 + $o-org-chart-entry-line-w*0.5, - $top: $o-org-chart-entry-pic-size*0.5 + $left: $tmp-gap-base*-0.5 + $o-hr-org-chart-entry-pic-size*0.1 + $o-hr-org-chart-entry-line-w*0.5, + $top: $o-hr-org-chart-entry-pic-size*0.5 ); } @@ -131,7 +115,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); } &.o_org_chart_more { - margin-top: $o-org-chart-entry-v-gap; + margin-top: $o-hr-org-chart-entry-v-gap; &:before { top: 15px; @@ -142,7 +126,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); // ORGANIGRAM DESIGN .o_org_chart_entry { - margin-bottom: $o-org-chart-entry-v-gap; + margin-bottom: $o-hr-org-chart-entry-v-gap; overflow: visible; margin-top: 0; @@ -158,11 +142,11 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); cursor: pointer; margin-right: 5px; color: $gray-light; - background: $o-org-chart-bg; + background: $o-hr-org-chart-bg; border: 1px solid $gray-light; &:hover { - color: $odoo-brand-optional; - border-color: $odoo-brand-optional; + color: $o-brand-optional; + border-color: $o-brand-optional; } &:focus { outline: none; @@ -178,9 +162,9 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); } .media-object { - @include square($o-org-chart-entry-pic-size*0.8); - margin: $o-org-chart-entry-pic-size*0.1; - box-shadow: 0 0 0 $o-org-chart-entry-line-w darken($o-org-chart-bg, 20%); + @include square($o-hr-org-chart-entry-pic-size*0.8); + margin: $o-hr-org-chart-entry-pic-size*0.1; + box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w darken($o-hr-org-chart-bg, 20%); background-size: cover; background-position: center center; @@ -197,8 +181,8 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); } &:hover { - border-color: $o-org-chart-entry-border-color; - color:$odoo-brand-optional; + border-color: $o-hr-org-chart-entry-border-color; + color:$o-brand-optional; } } } @@ -220,11 +204,11 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); &:hover { .media-object { - box-shadow: 0 0 0 $o-org-chart-entry-line-w*2 rgba($odoo-brand-optional, 0.6); + box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-optional, 0.6); } .media-body > a { .media-heading { - color: $odoo-brand-optional; + color: $o-brand-optional; } strong { color: lighten($gray-light, 5%); @@ -235,7 +219,7 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); &.o_org_chart_entry_self { &:not(:first-child) { - margin-top: $o-org-chart-entry-v-gap*1.5; + margin-top: $o-hr-org-chart-entry-v-gap*1.5; } strong { @@ -243,10 +227,10 @@ $o-org-chart-entry-border-color: darken($o-org-chart-bg, 25%); } .media-object { - @include square($o-org-chart-entry-pic-size); + @include square($o-hr-org-chart-entry-pic-size); margin: 0; - border: $o-org-chart-entry-line-w*2 solid $odoo-brand-optional; - box-shadow: inset 0 0 0 $o-org-chart-entry-line-w*2 white; + border: $o-hr-org-chart-entry-line-w*2 solid $o-brand-optional; + box-shadow: inset 0 0 0 $o-hr-org-chart-entry-line-w*2 white; } .media-body { diff --git a/addons/hr_org_chart/static/src/scss/variables.scss b/addons/hr_org_chart/static/src/scss/variables.scss new file mode 100644 index 00000000000..9abf85776b3 --- /dev/null +++ b/addons/hr_org_chart/static/src/scss/variables.scss @@ -0,0 +1,14 @@ +$o-hr-org-chart-bg: white !default; +$o-hr-org-chart-border-color: $o-brand-secondary !default; + +$o-hr-org-chart-entry-v-gap: 6px !default; +$o-hr-org-chart-entry-pic-size: 46px !default; +$o-hr-org-chart-entry-line-w: 1px !default; +$o-hr-org-chart-entry-border-color: darken($o-hr-org-chart-bg, 25%) !default; + +// MIXINS +@mixin o-hr-org-chart-line { + content: ''; + background-color: $o-hr-org-chart-bg; + border: 0px solid $o-hr-org-chart-entry-border-color; +} diff --git a/addons/hr_org_chart/views/hr_templates.xml b/addons/hr_org_chart/views/hr_templates.xml index 50b6087e4ec..b7ed3215ae8 100644 --- a/addons/hr_org_chart/views/hr_templates.xml +++ b/addons/hr_org_chart/views/hr_templates.xml @@ -1,5 +1,11 @@ <?xml version="1.0" encoding="utf-8"?> <odoo> + <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers"> + <xpath expr="//link" position="before"> + <link rel="stylesheet" type="text/scss" href="/hr_org_chart/static/src/scss/variables.scss"/> + </xpath> + </template> + <template id="assets_backend" name="hr_org_chart_assets_backend" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <link rel="stylesheet" type="text/scss" href="/hr_org_chart/static/src/scss/hr_org_chart.scss"/> diff --git a/addons/im_livechat/static/src/scss/copy_clipboard.scss b/addons/im_livechat/static/src/scss/copy_clipboard.scss index db206941685..13bbef7b256 100644 --- a/addons/im_livechat/static/src/scss/copy_clipboard.scss +++ b/addons/im_livechat/static/src/scss/copy_clipboard.scss @@ -4,7 +4,7 @@ border-radius: 5px; border: 1px solid $btn-primary-border; font-size: $font-size-small; - color: $odoo-brand-optional; + color: $o-brand-optional; font-weight: $badge-font-weight; text-align: center; .o_clipboard_button { diff --git a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss index b9d31dc05b8..18ab6c31ef8 100644 --- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss +++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss @@ -1,16 +1,7 @@ -// bootstrap variables and vendor prefixes needed to embed im_livechat in external pages -$gray-light: lighten(#000, 46.7%); // #777 -$gray-lighter: lighten(#000, 93.5%); // #eee -$screen-xs-max: 767px; -$navbar-height: 44px; + .text-muted { color: $gray-light; } -@mixin box-sizing($boxmodel) { - -webkit-box-sizing: $boxmodel; - -moz-box-sizing: $boxmodel; - box-sizing: $boxmodel; -} .o_chat_window { &,* { diff --git a/addons/im_livechat/views/im_livechat_channel_templates.xml b/addons/im_livechat/views/im_livechat_channel_templates.xml index 54c7c7319f2..e85293c943a 100644 --- a/addons/im_livechat/views/im_livechat_channel_templates.xml +++ b/addons/im_livechat/views/im_livechat_channel_templates.xml @@ -149,7 +149,6 @@ <script type="text/javascript" src="/mail/static/src/js/document_viewer.js"></script> <script type="text/javascript" src="/im_livechat/static/src/js/im_livechat.js"></script> <t t-call="web._assets_helpers"/> - <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link> <link rel="stylesheet" type="text/scss" href="/im_livechat/static/src/scss/im_livechat_bootstrap.scss"/> <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"></link> <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/thread.scss"></link> diff --git a/addons/lunch/static/src/scss/lunch.scss b/addons/lunch/static/src/scss/lunch.scss index 2e4fc9b22a5..9e36f20dbd8 100644 --- a/addons/lunch/static/src/scss/lunch.scss +++ b/addons/lunch/static/src/scss/lunch.scss @@ -7,7 +7,7 @@ padding: 5px 0; + .o_lunch_vignette { - border-top: 1px solid $odoo-brand-lightsecondary; + border-top: 1px solid $o-brand-lightsecondary; } } } diff --git a/addons/mail/static/src/scss/chat_window.scss b/addons/mail/static/src/scss/chat_window.scss index 8d43b2b9013..93ab8248b6b 100644 --- a/addons/mail/static/src/scss/chat_window.scss +++ b/addons/mail/static/src/scss/chat_window.scss @@ -1,22 +1,17 @@ -$o-chat-window-bg: #FAFAFA; -$o-chat-window-width: 325px; -$o-mail-chatter-gap: 10px; // has to be defined here as this file is both in - // backend and other assets (livechat) -$o-chat-header-height: 46px; -$o-chat-window-zindex: $zindex-modal + 1; +$o-mail-chat-window-zindex: $zindex-modal + 1 !default; .o_chat_window { @include o-flex-display; @include o-flex-flow(column, nowrap); position: fixed; - width: $o-chat-window-width; + width: $o-mail-chat-window-width; max-width: 100%; height: 400px; max-height: 100%; font-size: 12px; - background-color: $o-chat-window-bg; + background-color: $o-mail-chat-window-bg; border-radius: 6px 6px 0 0; - z-index: $o-chat-window-zindex; + z-index: $o-mail-chat-window-zindex; box-shadow: -5px -5px 10px rgba(black, 0.18); @media (max-width: $screen-xs-max) { @@ -39,11 +34,11 @@ $o-chat-window-zindex: $zindex-modal + 1; padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap; border-radius: 3px 3px 0 0; border-bottom: 1px solid $gray-lighter-dark; - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; padding: 8px; @media (max-width: $screen-xs-max) { - height: $o-chat-header-height; + height: $o-mail-chat-header-height; padding-top: 12px; border-radius: 0px; .o_chat_title { @@ -82,7 +77,7 @@ $o-chat-window-zindex: $zindex-modal + 1; .o_thread_date_separator { margin: 0px 0px 15px 0px; .o_thread_date { - background-color: $o-chat-window-bg; + background-color: $o-mail-chat-window-bg; } } .o_thread_message { @@ -119,7 +114,7 @@ $o-chat-window-zindex: $zindex-modal + 1; .o_total_unread_counter { @include o-position-absolute(-10px, 0, auto, auto); - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; padding: 0 2px; font-size: smaller; } @@ -129,7 +124,7 @@ $o-chat-window-zindex: $zindex-modal + 1; } > ul { - max-width: $o-chat-window-width; + max-width: $o-mail-chat-window-width; padding: 0; > li.o_chat_header { @@ -139,7 +134,7 @@ $o-chat-window-zindex: $zindex-modal + 1; border-top: 1px solid white; } &:hover { - background-color: darken($odoo-brand-primary, 10%); + background-color: darken($o-brand-primary, 10%); } } } diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss index ba863a5c664..314eb9b8bac 100644 --- a/addons/mail/static/src/scss/chatter.scss +++ b/addons/mail/static/src/scss/chatter.scss @@ -10,19 +10,19 @@ } .o_chatter_topbar { - height: $odoo-statusbar-height; + height: $o-statusbar-height; position: relative; margin: $grid-gutter-width*0.5 0 0; padding: 0; @include o-flex-display; > .btn { - height: $odoo-statusbar-height + 1; + height: $o-statusbar-height + 1; border: 1px solid transparent; } > .o_followers { - height: $odoo-statusbar-height + 1; + height: $o-statusbar-height + 1; border-bottom: 1px solid transparent; @include o-flex(1,1,auto); } @@ -35,7 +35,7 @@ border-bottom-color: $gray-lighter-dark; &.o_active { - color: $odoo-brand-primary; + color: $o-brand-primary; background-color: $gray-lighter; border-color: $gray-lighter-dark; border-width: 1px 1px 0; diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss index b19cde9fb2c..477a7e536e1 100644 --- a/addons/mail/static/src/scss/composer.scss +++ b/addons/mail/static/src/scss/composer.scss @@ -75,7 +75,7 @@ } @media (max-width: $screen-xs-max) { .o_composer_button_send { - color: $odoo-brand-optional; + color: $o-brand-optional; } } } @@ -95,13 +95,13 @@ // Both inline and not-inline design. Mini-composer disabled. &:not(.o_chat_mini_composer) { - padding: $mail-thread-avatar-size*0.5; - padding-left: $grid-gutter-width*0.5 + $mail-thread-avatar-size + $o-mail-chatter-gap; + padding: $o-mail-thread-avatar-size*0.5; + padding-left: $grid-gutter-width*0.5 + $o-mail-thread-avatar-size + $o-mail-chatter-gap; border: 1px solid $gray-lighter-dark; border-top: none; .o_chatter_avatar { - @include o-position-absolute(0, $left: -$mail-thread-avatar-size - $o-mail-chatter-gap); + @include o-position-absolute(0, $left: -$o-mail-thread-avatar-size - $o-mail-chatter-gap); } .o_chatter_composer_info, .o_composer_suggested_partners { @@ -193,7 +193,7 @@ border-radius: 0 3px 3px 0; // Make the button appear as the same size as the subject input padding: 10px $padding-base-horizontal; - border: 1px solid darken($odoo-brand-optional, 5%); + border: 1px solid darken($o-brand-optional, 5%); border-left-width: 0; } } @@ -296,7 +296,7 @@ $o-mail-attachment-margin: 5px; @include o-text-overflow(block); a { - @include o-hover-text-color($default-color: $odoo-main-text-color, $hover-color: $headings-color); + @include o-hover-text-color($default-color: $o-main-text-color, $hover-color: $headings-color); } } @@ -423,7 +423,7 @@ $o-mail-attachment-margin: 5px; } } .o_modal_fullscreen { - z-index: $o-chat-window-zindex + 1; + z-index: $o-mail-chat-window-zindex + 1; .o_viewer_content { position: relative; diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss index 58473d6ad40..de129eaee4c 100644 --- a/addons/mail/static/src/scss/discuss.scss +++ b/addons/mail/static/src/scss/discuss.scss @@ -1,7 +1,6 @@ // ------------------------------------------------------------------ // Layout // ------------------------------------------------------------------ -$mail-chat-sidebar-width: 250px; .o_mail_chat { @include o-position-absolute(0, 0, 0, 0); @@ -14,7 +13,7 @@ $mail-chat-sidebar-width: 250px; color: white; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); @include o-flex-display; - border-bottom: 1px solid $odoo-main-color-muted; + border-bottom: 1px solid $o-main-color-muted; .o_mail_request_permission { @include o-flex-display; @@ -38,19 +37,19 @@ $mail-chat-sidebar-width: 250px; } .o_mail_chat_sidebar { - width: $mail-chat-sidebar-width; + width: $o-mail-chat-sidebar-width; height: 100%; float: left; overflow: auto; - padding: $odoo-horizontal-padding 0; + padding: $o-horizontal-padding 0; @media (min-width: $screen-lg-min) { - width: $mail-chat-sidebar-width + 50px; + width: $o-mail-chat-sidebar-width + 50px; } .o_mail_sidebar_title { @include o-flex-display; - padding: 6px $odoo-horizontal-padding 0 $odoo-horizontal-padding; + padding: 6px $o-horizontal-padding 0 $o-horizontal-padding; align-items: center; justify-content: space-between; h4 { @@ -67,7 +66,7 @@ $mail-chat-sidebar-width: 250px; .o_mail_chat_channel_item { @include o-flex-display; width: 100%; - padding: 2px $odoo-horizontal-padding 2px ($odoo-horizontal-padding + 12px); // compensate icon + padding: 2px $o-horizontal-padding 2px ($o-horizontal-padding + 12px); // compensate icon .o_channel_name { @include o-flex(1, 1, auto); @@ -87,7 +86,7 @@ $mail-chat-sidebar-width: 250px; } &.o_mail_chat_title_main { - padding: $padding-base-vertical $odoo-horizontal-padding; + padding: $padding-base-vertical $o-horizontal-padding; margin-bottom: 2px; } } @@ -98,7 +97,7 @@ $mail-chat-sidebar-width: 250px; .o_mail_add_channel { width: 100%; - padding: 5px ($odoo-horizontal-padding + 23px); // compensate icon + padding: 5px ($o-horizontal-padding + 23px); // compensate icon position: relative; > input { @@ -115,14 +114,14 @@ $mail-chat-sidebar-width: 250px; @include o-flex-display; @include o-flex-flow(column, nowrap); height: 100%; - margin-left: $mail-chat-sidebar-width; + margin-left: $o-mail-chat-sidebar-width; position: relative; @media (min-width: $screen-sm-min) { overflow: auto; } @media (min-width: $screen-lg-min) { - margin-left: $mail-chat-sidebar-width + 50px; + margin-left: $o-mail-chat-sidebar-width + 50px; } .o_mail_thread { @@ -151,7 +150,6 @@ $mail-chat-sidebar-width: 250px; // ------------------------------------------------------------------ // Style // ------------------------------------------------------------------ -$sidebar-icon-opacity: 0.7; .o_mail_chat { .o_mail_chat_sidebar { @@ -165,13 +163,13 @@ $sidebar-icon-opacity: 0.7; background-color: darken($gray-dark,2%); .o_mail_partner_unpin, .o_mail_channel_settings { - opacity: $sidebar-icon-opacity; + opacity: $o-mail-sidebar-icon-opacity; } } &.o_active { background-color: $gray-darker; - box-shadow: inset 3px 0 0 $odoo-brand-optional; + box-shadow: inset 3px 0 0 $o-brand-optional; } .o_mail_hash { @@ -188,7 +186,7 @@ $sidebar-icon-opacity: 0.7; > .badge { color: white; - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; font-size: 10px; line-height: 16px; height: 18px; @@ -230,7 +228,7 @@ $sidebar-icon-opacity: 0.7; } .o_add { cursor: pointer; - @include o-hover-opacity($sidebar-icon-opacity, 1); + @include o-hover-opacity($o-mail-sidebar-icon-opacity, 1); @include o-hover-text-color($gray-light, white); } } @@ -244,7 +242,7 @@ $sidebar-icon-opacity: 0.7; .o_thread_message { opacity: 0.5; &.o_thread_selected_message { - padding: 4px $odoo-horizontal-padding; + padding: 4px $o-horizontal-padding; opacity: 1; background-color: lightgray; } @@ -256,7 +254,7 @@ $sidebar-icon-opacity: 0.7; font-size: 1em; position: relative; &.o_user_online { - color: $odoo-brand-optional; + color: $o-brand-optional; } &.o_user_idle { color: $brand-warning; @@ -358,7 +356,7 @@ $sidebar-icon-opacity: 0.7; .o_mail_channel_preview { @include o-flex-display; background-color: $gray-lighter; - color: $odoo-main-text-color; + color: $o-main-text-color; cursor: pointer; overflow: hidden; position: relative; @@ -399,14 +397,14 @@ $sidebar-icon-opacity: 0.7; } .o_last_message_date { @include o-flex(0, 0, auto); - color: $odoo-main-color-muted; + color: $o-main-color-muted; font-weight: 500; } } .o_last_message_preview { width: 100%; max-height: 20px; - color: $odoo-main-color-muted; + color: $o-main-color-muted; @include o-text-overflow; } } @@ -421,7 +419,7 @@ $sidebar-icon-opacity: 0.7; font-weight: 700; } .o_last_message_date { - color: $odoo-brand-optional; + color: $o-brand-optional; } } } @@ -429,7 +427,6 @@ $sidebar-icon-opacity: 0.7; } @media (max-width: $screen-xs-max) { - $o-mail-chatter-mobile-gap: 2%; .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu { border: none; @@ -485,7 +482,7 @@ $sidebar-icon-opacity: 0.7; } &.active > span { - color: $odoo-brand-optional; + color: $o-brand-optional; } } } diff --git a/addons/mail/static/src/scss/extended_chat_window.scss b/addons/mail/static/src/scss/extended_chat_window.scss index 9e0174654b1..774a37c6120 100644 --- a/addons/mail/static/src/scss/extended_chat_window.scss +++ b/addons/mail/static/src/scss/extended_chat_window.scss @@ -17,7 +17,7 @@ } .o_mail_thread { - background-color: $odoo-webclient-background-color; + background-color: $o-webclient-background-color; } .o_chat_composer { diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss index 5b7ff2b886f..573f13e35b2 100644 --- a/addons/mail/static/src/scss/followers.scss +++ b/addons/mail/static/src/scss/followers.scss @@ -91,19 +91,19 @@ font-size: small; .o_partner { - $partner-avatar-size: 24px; position: relative; // required for old design compatibility + > a { max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - height: $partner-avatar-size; - padding: 3px $partner-avatar-size + 8px; + height: $o-mail-partner-avatar-size; + padding: 3px $o-mail-partner-avatar-size + 8px; } > img { @include o-position-absolute; - width: $partner-avatar-size; + width: $o-mail-partner-avatar-size; } .o_remove_follower { @include o-position-absolute(6px, 5px); diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss index 58f00c1f4e5..f835275e873 100644 --- a/addons/mail/static/src/scss/mail_activity.scss +++ b/addons/mail/static/src/scss/mail_activity.scss @@ -150,7 +150,7 @@ padding: 0px 0px; & > li:last-child { - background-color: $odoo-brand-lightsecondary; + background-color: $o-brand-lightsecondary; color: $gray-dark; line-height: 3em; } @@ -166,7 +166,7 @@ &.o_activity_label { line-height: 2.5em; padding: 0px 5px; - background-color: $odoo-brand-lightsecondary; + background-color: $o-brand-lightsecondary; } &.o_schedule_activity { diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss index c06bde1d3f1..fd799cb9cc7 100644 --- a/addons/mail/static/src/scss/systray.scss +++ b/addons/mail/static/src/scss/systray.scss @@ -21,7 +21,7 @@ } .o_notification_counter { @include o-position-absolute($top: 20%, $right: 1px); - background: $odoo-brand-optional; + background: $o-brand-optional; color: white; padding: 0em 0.3em; font-size: 0.7em; @@ -34,7 +34,7 @@ @include o-flex-display; @include o-align-items(center); @include o-justify-content(center); - color: $odoo-main-text-color; + color: $o-main-text-color; height: 50px; } @@ -48,9 +48,9 @@ padding: 5px; } .o_filter_button { - color: $odoo-main-color-muted; + color: $o-main-color-muted; &:hover, &.active { - color: $odoo-brand-optional; + color: $o-brand-optional; } &.active { cursor: default; @@ -130,7 +130,7 @@ left: 0px; right: 0px; background-color: white; - color: $odoo-main-text-color; + color: $o-main-text-color; } } } diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss index 4a2edb68913..0529238a36e 100644 --- a/addons/mail/static/src/scss/thread.scss +++ b/addons/mail/static/src/scss/thread.scss @@ -25,30 +25,30 @@ .o_thread_new_messages_separator { margin-bottom: 15px; - border-bottom: solid lighten($odoo-brand-primary, 15%) 1px; + border-bottom: solid lighten($o-brand-primary, 15%) 1px; text-align: right; .o_thread_separator_label { position: relative; top: 8px; padding: 0 10px; background: white; - color: lighten($odoo-brand-primary, 15%); + color: lighten($o-brand-primary, 15%); font-size: smaller; } } .o_thread_message { @include o-flex-display; - padding: 4px $odoo-horizontal-padding; + padding: 4px $o-horizontal-padding; margin-bottom: 0px; &.o_mail_not_discussion { - background-color: $mail-thread-note; + background-color: rgba($gray-lighter-dark, 0.5); border-bottom: 1px solid $gray-lighter-darker; } .o_thread_message_sidebar { - @include o-flex(0, 0, $mail-thread-avatar-size); + @include o-flex(0, 0, $o-mail-thread-avatar-size); margin-right: 10px; margin-top: 2px; text-align: center; @@ -60,7 +60,7 @@ } .o_thread_message_avatar { - max-width: $mail-thread-avatar-size; + max-width: $o-mail-thread-avatar-size; } .o_thread_message_side_date { margin-left: -5px; @@ -77,17 +77,17 @@ cursor: pointer; opacity: 0; &.fa-star { - opacity: $mail-thread-icon-opacity; + opacity: $o-mail-thread-icon-opacity; color: gold; } } &:hover, &.o_thread_selected_message { .o_thread_message_side_date { - opacity: $mail-thread-side-date-opacity; + opacity: $o-mail-thread-side-date-opacity; } .o_thread_icon { - opacity: $mail-thread-icon-opacity; + opacity: $o-mail-thread-icon-opacity; &:hover { opacity: 1; } @@ -222,6 +222,6 @@ .o_web_client.o_touch_device { .o_mail_thread .o_thread_icon { - opacity: $mail-thread-icon-opacity; + opacity: $o-mail-thread-icon-opacity; } } diff --git a/addons/mail/static/src/scss/variables.scss b/addons/mail/static/src/scss/variables.scss index ce498f2d03e..c3086ce579d 100644 --- a/addons/mail/static/src/scss/variables.scss +++ b/addons/mail/static/src/scss/variables.scss @@ -1,5 +1,12 @@ -// FIXME moved here since scss convertion -$mail-thread-avatar-size: 36px; -$mail-thread-icon-opacity: 0.6; -$mail-thread-side-date-opacity: 0.6; -$mail-thread-note: rgba($gray-lighter-dark, 0.5); +$o-mail-thread-avatar-size: 36px !default; +$o-mail-thread-icon-opacity: 0.6 !default; +$o-mail-thread-side-date-opacity: 0.6 !default; +$o-mail-chat-window-bg: #FAFAFA !default; +$o-mail-chat-window-width: 325px !default; +$o-mail-chatter-gap: 10px !default; +$o-mail-chatter-mobile-gap: 2% !default; +$o-mail-chat-header-height: 46px !default; +$o-mail-attachment-image-size: 100px !default; +$o-mail-sidebar-icon-opacity: 0.7 !default; +$o-mail-chat-sidebar-width: 250px !default; +$o-mail-partner-avatar-size: 24px !default; diff --git a/addons/mail/views/mail_templates.xml b/addons/mail/views/mail_templates.xml index 9c1cb7cddf5..af2bc8b3b75 100644 --- a/addons/mail/views/mail_templates.xml +++ b/addons/mail/views/mail_templates.xml @@ -1,6 +1,12 @@ <?xml version="1.0" encoding="utf-8"?> <odoo> <data> + <template id="_assets_primary_variables" inherit_id="web._assets_primary_variables"> + <xpath expr="//link[last()]" position="after"> + <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"/> + </xpath> + </template> + <template id="assets_backend" name="mail assets" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <script type="text/javascript" src="/mail/static/src/js/many2many_tags_email.js"></script> @@ -27,7 +33,6 @@ <script type="text/javascript" src="/mail/static/src/js/utils.js"></script> <script type="text/javascript" src="/mail/static/src/js/activity.js"></script> - <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link> <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/announcement.scss"/> <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/discuss.scss"/> <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"/> diff --git a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss index 0854637a003..eaac6c4d2dd 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -1,15 +1,15 @@ .o_form_view .o_form_sheet .o_notebook .tab-content .tab-pane .o_mail_body { // cancel padding of form_sheet - margin-top: -$odoo-sheet-cancel-tpadding; - margin-left: -$odoo-sheet-cancel-hpadding; - margin-right: -$odoo-sheet-cancel-hpadding; - margin-bottom: -$odoo-sheet-cancel-bpadding; + margin-top: -$o-sheet-cancel-tpadding; + margin-left: -$o-sheet-cancel-hpadding; + margin-right: -$o-sheet-cancel-hpadding; + margin-bottom: -$o-sheet-cancel-bpadding; } .o_mail_theme_selector { > a { @include o-position-absolute(0, 0, auto, 0); - height: $odoo-navbar-height; + height: $o-navbar-height; line-height: 31px; border-radius: 0; background-color: $o-we-color-darker; @@ -33,7 +33,7 @@ } .dropdown-menu { - @include o-position-absolute($odoo-navbar-height - 1, -1px, -1px, -1px); + @include o-position-absolute($o-navbar-height - 1, -1px, -1px, -1px); margin: 0; border-radius: 0; overflow: auto; @@ -67,7 +67,7 @@ } &.selected > a .o_thumb { - border: 2px solid $odoo-brand-primary; + border: 2px solid $o-brand-primary; background-color: $o-we-color-dark; } } diff --git a/addons/mrp/static/src/scss/mrp_bom_report.scss b/addons/mrp/static/src/scss/mrp_bom_report.scss index b72e7697a89..095d6e05846 100644 --- a/addons/mrp/static/src/scss/mrp_bom_report.scss +++ b/addons/mrp/static/src/scss/mrp_bom_report.scss @@ -1,5 +1,5 @@ .o_mrp_bom_report_page { - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; margin: 16px auto; padding: 24px 16px; .o_mrp_bom_action { diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss index a34693ef5ac..9eeb6a538b5 100644 --- a/addons/portal/static/src/scss/portal.scss +++ b/addons/portal/static/src/scss/portal.scss @@ -328,7 +328,7 @@ img { .o_portal_chatter_message_title { p { font-size:85%; - color:$odoo-main-color-muted; + color:$o-main-color-muted; margin: 0px; } } diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss index 50cbb7b4ac9..919da241023 100644 --- a/addons/project/static/src/scss/project_dashboard.scss +++ b/addons/project/static/src/scss/project_dashboard.scss @@ -66,7 +66,7 @@ outline: 2px solid transparent; box-shadow: 0px 0px 1px 1px #ccc; &.o_selected { - outline-color: $odoo-brand-optional; + outline-color: $o-brand-optional; } > img { @include o-position-absolute($top: 0, $left: 0, $right: 0, $bottom: 0); diff --git a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss index 0e2caa12f72..00d16e8e325 100644 --- a/addons/sale_timesheet/static/src/scss/sale_timesheet.scss +++ b/addons/sale_timesheet/static/src/scss/sale_timesheet.scss @@ -2,7 +2,7 @@ .o_timesheet_plan_sale_timesheet { [type='action'] { - color: $odoo-brand-optional; + color: $o-brand-optional; cursor: pointer; } @@ -82,14 +82,14 @@ text-align: center; } th.o_right_bordered, td.o_right_bordered { - border-right: 2px solid $odoo-brand-optional; + border-right: 2px solid $o-brand-optional; text-align: center; } .o_timesheet_forecast_sale_order{ font-weight: bold; & > td:first-child { - color: $odoo-brand-optional; + color: $o-brand-optional; } } .o_timesheet_forecast_sale_order_line{ diff --git a/addons/sales_team/static/src/scss/sales_team_dashboard.scss b/addons/sales_team/static/src/scss/sales_team_dashboard.scss index ac72624b83a..a57003b8285 100644 --- a/addons/sales_team/static/src/scss/sales_team_dashboard.scss +++ b/addons/sales_team/static/src/scss/sales_team_dashboard.scss @@ -1,8 +1,5 @@ -$dashboard-bg-color: white; .o_kanban_view.o_kanban_dashboard.o_salesteam_kanban { - $sale-table-spacing: 10px; - .o_kanban_record { .o_sales_team_kanban_graph_section { .o_graph_linechart { @@ -27,7 +24,7 @@ $dashboard-bg-color: white; } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: $odoo-brand-primary; + // stroke: $o-brand-primary; line { display: none; diff --git a/addons/stock/static/src/scss/stock_traceability_report.scss b/addons/stock/static/src/scss/stock_traceability_report.scss index 0d144dec6dc..7480521026f 100644 --- a/addons/stock/static/src/scss/stock_traceability_report.scss +++ b/addons/stock/static/src/scss/stock_traceability_report.scss @@ -23,11 +23,11 @@ @media (max-width: $screen-md-min) { overflow-x:scroll; } - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; &.o_stock_reports_no_print { padding-bottom: 125px; - margin: $odoo-horizontal-padding auto; - @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding); + margin: $o-horizontal-padding auto; + @include o-webclient-padding($top: $o-sheet-vpadding, $bottom: $o-sheet-vpadding); .o_stock_reports_level0 { @include o-stock-reports-lines($border-width: 1px, $font-weight: normal, $border-top-style: solid, $border-bottom-style: groove); } diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml index 61eb600204c..a8f0574b68a 100644 --- a/addons/survey/views/survey_templates.xml +++ b/addons/survey/views/survey_templates.xml @@ -10,11 +10,12 @@ <script type="text/javascript" src="/survey/static/src/js/survey.js" /> <script type="text/javascript" src="/survey/static/src/js/tour_test_survey.js"></script> <script type="text/javascript" src="/web/static/src/js/fields/field_utils.js"></script> + + <t t-call="web._assets_frontend_helpers"/> <link href="/web/static/lib/nvd3/nv.d3.css" rel="stylesheet" type="text/css"></link> <link rel="stylesheet" type="text/less" href="/web/static/src/scss/import_bootstrap.scss"/> <link rel="stylesheet" type="text/less" href="/web/static/src/scss/fonts.scss" /> <!-- Some helper classes (like mt- mb-) are required for survey templates --> - <link rel="stylesheet" type="text/less" href="/web/static/src/scss/utils.scss"/> <link rel="stylesheet" type="text/less" href="/web_editor/static/src/scss/web_editor.common.scss"/> <link href="/survey/static/src/css/survey_print.css" rel="stylesheet" type="text/css"/> <link href="/survey/static/src/css/survey_result.css" rel="stylesheet" type="text/css"></link> diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss index 7904e6143e7..7cd25c7e578 100644 --- a/addons/web/static/src/scss/base_settings.scss +++ b/addons/web/static/src/scss/base_settings.scss @@ -1,13 +1,9 @@ -// VARIABLES -$o-base-settings-mobile-tabs-height: 40px; -$o-base-settings-mobile-tabs-overflow-gap: 3%; - // MIXINS @mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) { - padding: $padding-base $odoo-horizontal-padding; + padding: $padding-base $o-horizontal-padding; @media (min-width: $screen-lg-min) { - padding-left: $odoo-horizontal-padding*2;; + padding-left: $o-horizontal-padding*2;; } } @@ -30,7 +26,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .o_panel { @include o-flex-display; @include o-flex-flow(row, wrap); - margin-bottom: $odoo-sheet-vpadding*0.5; + margin-bottom: $o-sheet-vpadding*0.5; width: 100%; .title, .o_setting_search { @@ -89,7 +85,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; @include o-flex-flow(column, nowrap); background: $gray-dark; overflow: auto; - padding-top: $odoo-horizontal-padding*0.5; + padding-top: $o-horizontal-padding*0.5; @media (max-width: $screen-xs-max) { @include o-flex(0, 0, $o-base-settings-mobile-tabs-height); @@ -101,7 +97,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .selected { background-color: $gray-darker; - box-shadow: inset 3px 0 0 $odoo-brand-optional; + box-shadow: inset 3px 0 0 $o-brand-optional; .app_name { color: white; @@ -110,7 +106,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .tab { @include o-flex-display; - padding: 0 $odoo-horizontal-padding*2 0 $odoo-horizontal-padding; + padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding; height: 40px; color: $gray-lighter-darker; font-size: 13px; @@ -142,7 +138,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; &:after { content: ''; - background: $odoo-brand-optional; + background: $o-brand-optional; opacity: 0; @include o-position-absolute(auto, 0, 0, 0); @include size(100%, 3px); @@ -176,7 +172,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .settings { position: relative; @include o-flex(1, 1, 100%); - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; overflow: auto; > .app_settings_block { diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 9a364231415..9701ead0539 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -3,44 +3,53 @@ // ------------------------------------------------------------------ //== Grid -$grid-gutter-width: $odoo-horizontal-padding*2; +$grid-gutter-width: $o-horizontal-padding*2; //== Colors -$brand-primary: $odoo-brand-primary; -$gray-lighter: $odoo-color-silver; +$brand-primary: $o-brand-primary; + +//== Greyscale +$gray-base: #000; +$gray-darker: lighten($gray-base, 13.5%); +$gray-dark: lighten($gray-base, 20%); +$gray: lighten($gray-base, 33.5%); +$gray-light: $o-color-gray-light; +$gray-lighter: $o-color-silver; //== 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; +$font-size-h1: $o-font-size-base + 13px; +$font-size-h2: $o-font-size-base + 7px; +$font-size-h3: $o-font-size-base + 3px; +$font-size-h4: $o-font-size-base + 2px; +$font-size-h5: $o-font-size-base + 1px; +$font-size-h6: $o-font-size-base; //== Scaffolding -$body-bg: $odoo-brand-secondary; -$text-color: $odoo-main-text-color; -$link-color: $odoo-brand-optional; +$body-bg: $o-brand-secondary; +$text-color: $o-main-text-color; +$link-color: $o-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; +$font-size-base: $o-font-size-base; $headings-font-weight: bold; +$line-height-base: $o-line-height-base; //== Components +$border-radius-base: 3px; $component-active-bg: $gray-lighter; -$component-active-color: $odoo-brand-optional; +$component-active-color: $o-brand-optional; //== Badges -$badge-bg: $odoo-brand-optional; +$badge-bg: $o-brand-optional; $badge-color: white; -$badge-line-height: $line-height-base; +$badge-line-height: $o-line-height-base; $badge-font-weight: normal; //== Breadcrumbs $breadcrumb-active-color: #777777; -$breadcrumb-bg: $odoo-control-panel-background-color; +$breadcrumb-bg: $o-control-panel-background-color; $breadcrumb-color: #777777; $breadcrumb-padding-horizontal: 0; $breadcrumb-padding-vertical: 0; @@ -48,16 +57,16 @@ $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-default-color: $o-main-text-color; +$btn-primary-bg: $o-brand-optional; +$btn-primary-border: $o-brand-optional; $btn-primary-color: white; //== Dropdowns $dropdown-bg: white; $dropdown-border: $gray-lighter-dark; $dropdown-divider-bg: $gray-lighter-dark; -$dropdown-link-color: $odoo-main-text-color; +$dropdown-link-color: $o-main-text-color; $dropdown-link-hover-color: $gray-dark; $dropdown-link-hover-bg: $gray-lighter; $dropdown-link-active-color: $component-active-color; @@ -69,8 +78,8 @@ $dropdown-header-color: $gray-light; $modal-sm: 300px; $modal-md: 650px; $modal-lg: 980px; -$modal-inner-padding: $odoo-horizontal-padding; -$modal-title-padding: $odoo-horizontal-padding; +$modal-inner-padding: $o-horizontal-padding; +$modal-title-padding: $o-horizontal-padding; // Change the z-index of the modal-backdrop elements to be equal to the // modal elements' ones. Bootstrap does not support multi-modals, and without @@ -92,11 +101,11 @@ $modal-title-padding: $odoo-horizontal-padding; $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-pills-active-link-hover-bg: $o-brand-optional; $nav-tabs-active-link-hover-bg: white; //== Navbar -$navbar-height: $odoo-navbar-height - 2; +$navbar-height: $o-navbar-height - 2; $navbar-margin-bottom: 0; $navbar-inverse-bg: #222222; $navbar-inverse-link-color: #9d9d9d; @@ -108,61 +117,4 @@ $navbar-border-radius: 0; $table-bg-accent: #efeff8; // FIXME: expose $table-bg-hover: darken($table-bg-accent,5%); -// ------------------------------------------------------------------ -// Bootstrap components rules (non exposed features variables) -// ------------------------------------------------------------------ - -//== Badges -.badge { - margin: 1px 2px 1px 0; - padding-top: 0; - padding-bottom: 0; -} - -//== Buttons -// Mixin to define variations for btn-links and muted btn-links -@mixin o-btn-link-variant($color, $color-active) { - text-transform: none; - @include o-hover-text-color($default-color: $color, $hover-color: $color-active); - - &, &:hover, &:focus, &:active, &.active { - border-color: transparent; - background-color: transparent - } - - &.text-muted, .text-muted { - @include o-hover-opacity; - @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active); - } -} -.btn-icon { - @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); -} -.btn-link { - font-weight: $btn-font-weight; - - &.btn-default { - @include o-btn-link-variant($text-color, $headings-color); - } - &.btn-success, &.text-success { - @include o-btn-link-variant($text-color, $brand-success); - } - &.btn-warning, &.text-warning { - @include o-btn-link-variant($text-color, $brand-warning); - } - &.btn-danger, &.text-danger { - @include o-btn-link-variant($text-color, $brand-danger); - } - &.btn-info, &.text-info { - @include o-btn-link-variant($text-color, darken($brand-info, 20%)); - } -} - -//== Printing improvements -@media print { - .table-responsive { - overflow-x: initial; - } -} - -@icon-font-path: "/web/static/lib/bootstrap/fonts/"; +$icon-font-path: "/web/static/lib/bootstrap/fonts/"; diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss new file mode 100644 index 00000000000..e69de29bb2d --- /dev/null +++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss index 4174db62c6a..447a1a587cc 100644 --- a/addons/web/static/src/scss/control_panel.scss +++ b/addons/web/static/src/scss/control_panel.scss @@ -1,11 +1,10 @@ -$breadcrumb-height: 30px; .o_control_panel { @include o-flex-display; @include o-flex-flow(row, wrap); - border-bottom: 1px solid darken($odoo-control-panel-background-color, 20%); + border-bottom: 1px solid darken($o-control-panel-background-color, 20%); @include o-webclient-padding($top: 10px, $bottom: 10px); - background-color: $odoo-control-panel-background-color; + background-color: $o-control-panel-background-color; > .breadcrumb { width: 50%; @@ -27,7 +26,7 @@ $breadcrumb-height: 30px; > .o_cp_searchview { width: 50%; - min-height: $breadcrumb-height; + min-height: $o-cp-breadcrumb-height; } .btn.o_enable_searchview { @@ -93,7 +92,7 @@ $breadcrumb-height: 30px; } > .o_cp_switch_buttons > .btn:first-child { - margin-left: $odoo-horizontal-padding; + margin-left: $o-horizontal-padding; } } } diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss index 3ce97ea1c8b..aa690cfdb74 100644 --- a/addons/web/static/src/scss/data_export.scss +++ b/addons/web/static/src/scss/data_export.scss @@ -58,7 +58,7 @@ } .o_left_field_panel, .o_fields_list { - border: 1px solid $odoo-brand-lightsecondary; + border: 1px solid $o-brand-lightsecondary; overflow: auto; @include o-flex(1, 1, auto); min-height: 0; @@ -71,7 +71,7 @@ @include user-select(none); &.o_selected > .o_tree_column { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; } @@ -82,7 +82,7 @@ display: block; &.o_required { - border-bottom: 2px solid $odoo-main-text-color; + border-bottom: 2px solid $o-main-text-color; } } diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss index d8650b6b409..d8d4ba1d520 100644 --- a/addons/web/static/src/scss/datepicker.scss +++ b/addons/web/static/src/scss/datepicker.scss @@ -1,5 +1,3 @@ -$odoo-datepicker-week-color: #8f8f8f; -$odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%); .sr-only { position: absolute; @@ -40,19 +38,19 @@ $odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%); .table-condensed { > thead { color: white; - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; > tr { &:first-child { th:hover { color: white; - background-color: darken($odoo-brand-primary, 10%); + background-color: darken($o-brand-primary, 10%); } } &:last-child { - color: $odoo-datepicker-week-color; - background-color: $odoo-datepicker-week-bg-color; + color: $o-datepicker-week-color; + background-color: $o-datepicker-week-bg-color; } > th { border-radius: 0; @@ -64,12 +62,12 @@ $odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%); > tr { > td { &.active, .active { - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; border-radius: 100px; } &.today:before { - border-bottom-color: $odoo-brand-optional; + border-bottom-color: $o-brand-optional; } } } diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss index 1fde477164d..6755bed49e9 100644 --- a/addons/web/static/src/scss/domain_selector.scss +++ b/addons/web/static/src/scss/domain_selector.scss @@ -97,8 +97,8 @@ } > .o_domain_leaf_info { - background: $odoo-brand-lightsecondary; - border: 1px solid darken($odoo-brand-lightsecondary, 10%); + background: $o-brand-lightsecondary; + border: 1px solid darken($o-brand-lightsecondary, 10%); padding: 2px 4px; > .o_field_selector { @@ -172,7 +172,7 @@ display: block; height: $o-domain-animation-bar-height; max-height: 0; - @include o-linear-gradient(45deg, rgba($odoo-brand-optional, 0.4), rgba($odoo-brand-optional, 0.1)); + @include o-linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1)); @include o-transition(max-height, .05s, ease, .05s); } diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss index ed979ae3a00..d0bfd1d2586 100644 --- a/addons/web/static/src/scss/dropdown.scss +++ b/addons/web/static/src/scss/dropdown.scss @@ -1,5 +1,5 @@ %dropdown-li-a-padding { - padding: 3px $odoo-dropdown-hpadding; + padding: 3px $o-dropdown-hpadding; } .ui-autocomplete { // Copy style of bootstrap dropdown @@ -21,7 +21,7 @@ &.ui-state-focus { background-image: none; - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; border: none; font-weight: normal; margin: 0; @@ -29,7 +29,7 @@ &.o_m2o_dropdown_option { padding-left: 20px; > a { - color: $odoo-brand-primary; + color: $o-brand-primary; } } } @@ -64,7 +64,7 @@ &.dropdown-header { @extend %dropdown-li-a-padding; - color: $odoo-main-text-color; + color: $o-main-text-color; @media (max-width: $screen-xs-max) { color: white; diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss index d15496fe0c9..c14144e02d3 100644 --- a/addons/web/static/src/scss/dropdown_extra.scss +++ b/addons/web/static/src/scss/dropdown_extra.scss @@ -1,9 +1,9 @@ .ui-autocomplete .ui-menu-item { &.ui-state-focus { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; } &.o_m2o_dropdown_option > a { - color: $odoo-brand-primary; + color: $o-brand-primary; } &.ui-state-focus > a, &.ui-state-focus.o_m2o_dropdown_option > a { @@ -11,7 +11,6 @@ } } -$tag-border: #afafb6; .oe_dropdown, .oe_dropdown_toggle { position: relative; cursor: pointer; @@ -25,7 +24,7 @@ $tag-border: #afafb6; position: absolute; z-index: 3; margin: 0; - border: 1px solid $tag-border; + border: 1px solid #afafb6; background: white; padding: 4px 0; min-width: 140px; diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss index f28e3ba349c..04c81dab96c 100644 --- a/addons/web/static/src/scss/fields.scss +++ b/addons/web/static/src/scss/fields.scss @@ -112,10 +112,10 @@ // o-kanban-colorpicker without customizing // '&:first-child > a::before' (transparent red-crossed colorpick) @mixin o-tag-colorpicker { - $o-tag-colorpicker-padding-right: $odoo-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion + $o-tag-colorpicker-padding-right: $o-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion max-width: 100%; - padding: 3px $o-tag-colorpicker-padding-right 3px $odoo-dropdown-hpadding; + padding: 3px $o-tag-colorpicker-padding-right 3px $o-dropdown-hpadding; > li { display: inline-block; @@ -136,7 +136,7 @@ &:last-of-type { box-shadow: 0 0 0 0px white; // remove grey border on hide in kanban - color: $odoo-main-text-color; + color: $o-main-text-color; } } } @@ -156,20 +156,20 @@ } } - @for $size from 1 through $odoo-nb-ui-color { + @for $size from 1 through length($o-colors) { .o_tag_color_#{$size - 1} { @if $size == 1 { & { background-color: white; - color: nth($odoo-colors, $size); - box-shadow: inset 0 0 0 2px nth($odoo-colors, $size); + color: nth($o-colors, $size); + box-shadow: inset 0 0 0 2px nth($o-colors, $size); } &::after { - background-color: nth($odoo-colors, $size); + background-color: nth($o-colors, $size); } } @else { &, &::after { - background-color: nth($odoo-colors, $size); + background-color: nth($o-colors, $size); } } } @@ -195,7 +195,7 @@ } &.fa-star-o { - color: $odoo-main-color-muted; + color: $o-main-color-muted; } &.fa-star { color: gold; @@ -209,7 +209,7 @@ font-size: 16px; } i.fa-star-o { - color: $odoo-main-color-muted; + color: $o-main-color-muted; &:hover { color: gold; } @@ -242,7 +242,7 @@ > input { @include o-flex(0, 0, auto); - margin: 0 $odoo-form-spacing-unit 0 0; + margin: 0 $o-form-spacing-unit 0 0; } > label { margin: 0; @@ -251,14 +251,14 @@ &.o_horizontal { .o_radio_item { - margin-right: $odoo-form-spacing-unit * 2; + margin-right: $o-form-spacing-unit * 2; } } &.o_vertical { @include o-flex-flow(column, nowrap); .o_radio_item { - margin-bottom: $odoo-form-spacing-unit; + margin-bottom: $o-form-spacing-unit; } } } @@ -274,7 +274,7 @@ margin-right: 10px; border-radius: 100%; overflow: hidden; - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; &:after { // Outside pie border to go over border-radius irregularities content: " "; @@ -289,7 +289,7 @@ @include o-transform-origin(0); width: 50%; height: 100%; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; &.o_full { background-color: inherit; } @@ -303,7 +303,7 @@ border-radius: 100%; font-weight: 700; - color: $odoo-brand-primary; + color: $o-brand-primary; } } } @@ -326,7 +326,7 @@ width: 100%; color: white; - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; opacity: 0; transition: opacity ease 400ms; @@ -345,7 +345,7 @@ margin: 0px; text-align: center; &.o_select_file_button{ - background: $odoo-brand-optional; + background: $o-brand-optional; } &.o_clear_file_button{ background: $brand-danger; diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss index dd441c07710..7e45291305f 100644 --- a/addons/web/static/src/scss/fields_extra.scss +++ b/addons/web/static/src/scss/fields_extra.scss @@ -43,7 +43,7 @@ margin-left: 5px; &:after { // Outside pie border to go over border-radius irregularities - border: 1px solid $odoo-brand-primary; + border: 1px solid $o-brand-primary; } .o_pie_value { diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss index c5e0207022d..e4dfdca3811 100644 --- a/addons/web/static/src/scss/form_view.scss +++ b/addons/web/static/src/scss/form_view.scss @@ -1,5 +1,5 @@ .o_form_view { - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; // Utility classes .oe_form_box_info { @@ -40,13 +40,13 @@ @include o-align-items(baseline); min-width: 50px; - margin: 0 -$odoo-form-spacing-unit/2; + margin: 0 -$o-form-spacing-unit/2; > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule @include o-flex(0, 0, auto); width: auto!important; - margin-right: $odoo-form-spacing-unit/2; - margin-left: $odoo-form-spacing-unit/2; + margin-right: $o-form-spacing-unit/2; + margin-left: $o-form-spacing-unit/2; } > .o_row { @@ -81,12 +81,12 @@ .o_form_uri { display: inline-block; - color: $odoo-main-text-color; + color: $o-main-text-color; &:first-line { color: $link-color; } &:hover { - color: darken($odoo-main-text-color, 1%); // hack required on chrome + color: darken($o-main-text-color, 1%); // hack required on chrome &:first-line { color: darken($link-color, 15%); } @@ -100,7 +100,7 @@ } .oe_title { - max-width: $container-sm - (2 * $odoo-horizontal-padding); + max-width: $container-sm - (2 * $o-horizontal-padding); } @media (min-width: $screen-xs-min) { @@ -121,10 +121,10 @@ // No sheet &.o_form_nosheet { display: block; - @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding); + @include o-webclient-padding($top: $o-sheet-vpadding, $bottom: $o-sheet-vpadding); .o_form_statusbar { - margin: -$odoo-sheet-vpadding -$odoo-horizontal-padding $odoo-sheet-vpadding -$odoo-horizontal-padding; + margin: -$o-sheet-vpadding -$o-horizontal-padding $o-sheet-vpadding -$o-horizontal-padding; } } @@ -133,7 +133,7 @@ position: relative; > .o_form_sheet { - margin: $odoo-sheet-vpadding auto; + margin: $o-sheet-vpadding auto; } } @@ -142,9 +142,9 @@ position: relative; // Needed for the "More" dropdown @include o-flex-display; @include o-justify-content(space-between); - padding-left: $odoo-horizontal-padding; + padding-left: $o-horizontal-padding; border-bottom: 1px solid $gray-lighter-darker; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; > .o_statusbar_buttons, > .o_statusbar_status { @include o-flex-display; @@ -162,7 +162,7 @@ > .btn { $o-statusbar-buttons-vmargin: 4px; - min-height: $odoo-statusbar-height - 2 * $o-statusbar-buttons-vmargin; + min-height: $o-statusbar-height - 2 * $o-statusbar-buttons-vmargin; margin: $o-statusbar-buttons-vmargin 3px $o-statusbar-buttons-vmargin 0; padding-top: 2px; padding-bottom: 2px; @@ -177,21 +177,21 @@ overflow-x: hidden; // to prevent horizontal scroll due to last arrow > .o_arrow_button { - min-height: $odoo-statusbar-height; + min-height: $o-statusbar-height; font-size: 11px; font-weight: bold; position: relative; - padding-left: $odoo-statusbar-arrow-width*2; + padding-left: $o-statusbar-arrow-width*2; color: $gray; border-width: 0 0 0; border-radius: 0; @include o-transition(all, 0.1s); &:first-child { - padding-right: $odoo-horizontal-padding; // Compensate container padding + padding-right: $o-horizontal-padding; // Compensate container padding } &:last-child { - padding-left: $odoo-horizontal-padding - 1; + padding-left: $o-horizontal-padding - 1; border-left: 1px solid $gray-lighter-darker; } @@ -209,19 +209,19 @@ &:before, &:after { content: " "; display: block; - @include o-position-absolute(0, -$odoo-statusbar-arrow-width + 1); + @include o-position-absolute(0, -$o-statusbar-arrow-width + 1); - border-top: floor($odoo-statusbar-height/2) solid transparent; - border-bottom: ceil($odoo-statusbar-height/2) solid transparent; + border-top: floor($o-statusbar-height/2) solid transparent; + border-bottom: ceil($o-statusbar-height/2) solid transparent; border-right: none; - border-left: $odoo-statusbar-arrow-width solid $odoo-view-background-color; + border-left: $o-statusbar-arrow-width solid $o-view-background-color; @include o-transition(border, 0.2s); -moz-transform: scale(0.9999); // Smooth the triangle on firefox } &:not(.disabled) { &:hover, &:active, &:focus { - color: $odoo-brand-optional; + color: $o-brand-optional; background-color: $gray-lighter; &:after { @@ -231,12 +231,12 @@ } &:before { - right: -$odoo-statusbar-arrow-width; + right: -$o-statusbar-arrow-width; border-left-color: $gray-lighter-dark; } &.btn-primary.disabled { - color: $odoo-brand-primary; + color: $o-brand-primary; font-size: 11px; background-color: $gray-lighter; cursor: default; @@ -266,7 +266,7 @@ > .dropdown-toggle { &:after { @include o-caret-down; - margin-left: $odoo-form-spacing-unit; + margin-left: $o-form-spacing-unit; } } @@ -314,7 +314,7 @@ margin: 10px 0; // o_group contains nested groups - @for $i from 1 through $odoo-form-group-cols { + @for $i from 1 through $o-form-group-cols { .o_group_col_#{$i} { display: inline-block; width: floor(100% / 12 * $i); @@ -378,16 +378,16 @@ // Separators .o_horizontal_separator { font-size: $font-size-h2; - margin: $odoo-form-spacing-unit 0; + margin: $o-form-spacing-unit 0; &:empty { - height: $odoo-form-spacing-unit * 2; + height: $o-form-spacing-unit * 2; } } // Notebooks .o_notebook { clear: both; // For the notebook not to have alongside floating elements - margin-top: $odoo-form-spacing-unit * 2; + margin-top: $o-form-spacing-unit * 2; .nav-tabs > .tab-pane { min-height: 100px; @@ -396,14 +396,14 @@ // Labels .o_form_label { - margin: 0 $odoo-form-spacing-unit 0 0; + margin: 0 $o-form-spacing-unit 0 0; font-size: $font-size-base; // The label muse have the same size whatever their position line-height: $line-height-base; } // Form fields .o_field_widget { - margin-bottom: $odoo-form-spacing-unit; + margin-bottom: $o-form-spacing-unit; } .o_field_widget, .btn { .o_field_widget { @@ -554,7 +554,7 @@ // Boolean .o_field_boolean { - margin: 0 $odoo-form-spacing-unit 0 0; + margin: 0 $o-form-spacing-unit 0 0; } // Timezone widget warning @@ -580,7 +580,7 @@ > tfoot > tr > td { padding: 3px; - color: $odoo-main-text-color; + color: $o-main-text-color; } } &.o_form_readonly .o_field_widget .o_list_view .o_row_handle { @@ -590,9 +590,9 @@ // 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; + border: 1px solid $o-brand-lightsecondary; + margin: 0 $o-form-spacing-unit $o-form-spacing-unit 0; + padding: $o-form-spacing-unit; } &.oe_form_configuration { @@ -653,7 +653,7 @@ label.o_light_label, .o_light_label label { // XXS form view specific rules @mixin form-break-table { display: block; - margin-bottom: $odoo-form-spacing-unit * 4; + margin-bottom: $o-form-spacing-unit * 4; > tbody { display: block; @@ -671,11 +671,11 @@ label.o_light_label, .o_light_label label { width: auto!important; // !important is required to override the width computed in JS &.o_td_label { width: 94%!important; // The label must be on its own line except if the form field is small enough (checkbox) - line-height: $odoo-label-font-size-factor; + line-height: $o-label-font-size-factor; } .o_field_widget { - margin-bottom: $odoo-form-spacing-unit * 2; + margin-bottom: $o-form-spacing-unit * 2; &.o_field_boolean { margin-right: 0; } diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss index f401ecdda56..29c2512c1ab 100644 --- a/addons/web/static/src/scss/form_view_extra.scss +++ b/addons/web/static/src/scss/form_view_extra.scss @@ -1,8 +1,8 @@ -$sheet-max-width: 860px; -$sheet-min-width: 650px; -$sheet-padding: 16px; - .o_form_view { + $sheet-max-width: 860px; + $sheet-min-width: 650px; + $sheet-padding: 16px; + &.o_form_nosheet.oe_form_nomargin { margin: 0; } @@ -75,7 +75,7 @@ $sheet-padding: 16px; .o_stat_value { @include o-text-overflow(block); font-weight: 700; - color: $odoo-brand-primary; + color: $o-brand-primary; } .o_stat_text { @include o-text-overflow(block); @@ -144,7 +144,7 @@ $sheet-padding: 16px; // Separators .o_horizontal_separator { - color: $odoo-brand-optional; + color: $o-brand-optional; font-weight: bold; } diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss index 62e94e926ce..4666d68ae61 100644 --- a/addons/web/static/src/scss/graph_view.scss +++ b/addons/web/static/src/scss/graph_view.scss @@ -3,7 +3,7 @@ height: 100%; overflow: auto; svg { - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; } } } diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss index 9a54bbd8067..2cb35d33a2e 100644 --- a/addons/web/static/src/scss/kanban_column_progressbar.scss +++ b/addons/web/static/src/scss/kanban_column_progressbar.scss @@ -1,10 +1,9 @@ -$o-kanban-counter-header-height: $o-kanban-header-title-height*0.6; @mixin o-kanban-css-filter($class, $accent-color) { // Provide CSS reordering and highlight &.o_kanban_group_show_#{$class} { - $mix-soft: mix($accent-color, $odoo-webclient-background-color, 5%); - $mix-full: mix($accent-color, $odoo-webclient-background-color); + $mix-soft: mix($accent-color, $o-webclient-background-color, 5%); + $mix-full: mix($accent-color, $o-webclient-background-color); &, .o_kanban_header { background-color: $mix-soft; @@ -44,7 +43,7 @@ $o-kanban-counter-header-height: $o-kanban-header-title-height*0.6; // If columns has the progressbar, adapt the layout .o_kanban_view .o_kanban_group.o_kanban_has_progressbar { > .o_kanban_header .o_kanban_header_title { - height: $o-kanban-counter-header-height; + height: $o-kanban-header-title-height*0.6; margin-top: 5px; } diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss index 791b582efd1..3f3b2185b58 100644 --- a/addons/web/static/src/scss/kanban_dashboard.scss +++ b/addons/web/static/src/scss/kanban_dashboard.scss @@ -1,176 +1,3 @@ -// FIXME variables and mixins were moved from kanban_view.scss to here as this -// file is placed before in the assets template (and changing file order may -// break selector priorities). - -$o-kanban-record-margin: $odoo-horizontal-padding/2; -$o-kanban-group-padding: $odoo-horizontal-padding; // Cannot be higher than this - -$o-kanban-default-record-width: 300px; -$o-kanban-small-record-width: 240px; - -$o-kanban-header-title-height: 50px; - -$o-kanban-image-width: 64px; -$o-kanban-inside-vgutter: 8px; -$o-kanban-inside-hgutter: 8px; -$o-kanban-color-border-width: 3px; -$o-kanban-inside-hgutter-mobile: $odoo-horizontal-padding; -$o-kanban-inner-hmargin: 5px; -$o-kanban-progressbar-height: 20px; - -// ------- Kanban grouped mixins ------- -@mixin o-kanban-icon($base-opacity: 0.5) { - display: block; - text-align: center; - color: $odoo-main-text-color; - font-size: $font-size-small; - cursor: pointer; - @include o-hover-opacity($base-opacity); -} -@mixin o-kanban-tag-color { - @for $size from 1 through $odoo-nb-ui-color { - // Note: the first color is supposed to be invisible if there is a color - // field but it is used as a default color when there is no color field - &.o_tag_color_#{$size - 1} span { - background-color: nth($odoo-colors, $size); - } - } -} -@mixin o-kanban-record-color { - @for $size from 2 through $odoo-nb-ui-color { - // Note: the first color is not defined as it is the 'no color' for kanban - .oe_kanban_color_#{$size - 1}::after { - background-color: nth($odoo-colors, $size); - } - } -} -@mixin o-kanban-slim-col { - position: relative; - @include o-flex(0, 0, auto); - margin: 0; - padding: 0 floor($o-kanban-group-padding * 0.7); - cursor: pointer; -} -@mixin o-kanban-header-title { - @include o-flex-display; - @include o-align-items(center); - height: $o-kanban-header-title-height; - line-height: 2.2; - color: $headings-color; -} -@mixin o-kanban-v-title { - @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2)); - @include o-transform-origin(left, bottom, $z: 0); - @include o-transform(rotate(90deg)); - overflow: visible; - white-space: nowrap; - font-size: 15px; -} - -// ------- Kanban records mixins ------- -@mixin o-kanban-record-title($font-size) { - color: $headings-color; - font-size: $font-size; - font-weight: 500; - margin-bottom: 0; - margin-top: 0; -} -@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) { - margin: -1px -1px auto auto; // compensate border - padding: $padding-base/2 $padding-base; - border: 1px solid transparent; - border-bottom: none; - vertical-align: top; - color: $text-color; - - &:hover { - color: $headings-color; - } - &:focus, &:active, &:focus:active { - outline: none; - } -} -@mixin o-kanban-dropdown-open { - position: relative; - background: white; - border-color: $gray-lighter-darker; - z-index: $zindex-dropdown + 1; -} -@mixin o-kanban-dropdown-menu { - @include o-position-absolute($right: -1px); - margin-top: -1px; - border-color: $gray-lighter-darker; -} -@mixin o-kanban-colorpicker { - max-width: 150px; - padding: 3px ($odoo-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $odoo-dropdown-hpadding; - - > li { - display: inline-block; - margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0; - border: 1px solid white; - box-shadow: 0 0 0 1px $gray-lighter-dark; - - > a { - display: block; - - &::after { - content: ""; - display: block; - width: 20px; - height: 15px; - } - } - - // No Color - &:first-child > a { - position: relative; - &::before { - content: ""; - @include o-position-absolute(-2px, $left: 10px); - display: block; - width: 1px; - height: 20px; - @include rotate(45deg); - background-color: red; - } - &::after { - background-color: white; - } - } - } -} - - -// ------- Kanban dashboard variables ------- - -// Since rows and containers are used inside cards, we're -// forced to set the padding relative to the grid system. -$o-kanban-dashboard-hpadding: $grid-gutter-width*0.5; -$o-kanban-dashboard-vpadding: $grid-gutter-width*0.25; - -// Used to manage spacing in complex dropdown menu -$o-kanban-dashboard-dropdown-complex-gap: 5px; - -// Emulate dropdown links -@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $odoo-dropdown-hpadding) { - padding: 0; - - > a { - margin: auto auto auto -$link-padding-gap; - padding: 3px $link-padding-gap; - color: $text-color; - display: block; - - &:hover { - background-color: $gray-lighter-dark; - color: $headings-color; - } - } - &:last-child { - margin-bottom: 5px; - } -} .o_kanban_view.o_kanban_dashboard { // correctly display the no_content_helper in dashboards diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss index 2a27d2500b9..a42962ed8f0 100644 --- a/addons/web/static/src/scss/kanban_examples_dialog.scss +++ b/addons/web/static/src/scss/kanban_examples_dialog.scss @@ -1,7 +1,7 @@ .o_kanban_examples_dialog { @include o-flex-display; padding: 0px; - background: $odoo-color-silver; + background: $o-color-silver; // sidebar .o_kanban_examples_dialog_nav { @@ -15,7 +15,7 @@ > a { padding: 12px 15px; - color: $odoo-main-text-color; + color: $o-main-text-color; border-left: 3px solid transparent; &:focus { outline: none; @@ -23,7 +23,7 @@ } &.active > a { color: $headings-color; - border-left-color: $odoo-brand-optional; + border-left-color: $o-brand-optional; font-weight: bold; } } diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss index 0f7432cfae4..de9ea9a8411 100644 --- a/addons/web/static/src/scss/kanban_view.scss +++ b/addons/web/static/src/scss/kanban_view.scss @@ -372,7 +372,7 @@ } &.o_kanban_dragged { - background-color: $odoo-main-text-color; + background-color: $o-main-text-color; .o_kanban_record { visibility: hidden; @@ -431,7 +431,7 @@ .o_kanban_add_column { display: inline-block; padding: 10px 14px; - background-color: $odoo-color-silver-dark; + background-color: $o-color-silver-dark; } .o_kanban_title { margin-left: 10px; @@ -478,7 +478,7 @@ @include o-flex-flow(row, wrap); @include o-justify-content(flex-start); - padding: $o-kanban-record-margin ($odoo-horizontal-padding - $o-kanban-record-margin); + padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin); .o_kanban_record { @include o-flex(1, 1, auto); diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss index ebb5db45457..ed4e6ad8436 100644 --- a/addons/web/static/src/scss/kanban_view_mobile.scss +++ b/addons/web/static/src/scss/kanban_view_mobile.scss @@ -1,5 +1,3 @@ -$o-kanban-mobile-tabs-height: 40px; - @media (max-width: $screen-xs-max) { .o_kanban_view.o_kanban_grouped { display: block; @@ -21,7 +19,7 @@ $o-kanban-mobile-tabs-height: 40px; &.o_current { font-weight: bold; - border-bottom: 3px solid $odoo-brand-optional; + border-bottom: 3px solid $o-brand-optional; } .o_column_title { white-space: nowrap; diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss index b51cff84599..e23b2585b50 100644 --- a/addons/web/static/src/scss/layout_background.scss +++ b/addons/web/static/src/scss/layout_background.scss @@ -13,19 +13,19 @@ margin-right: 16px; } h3 { - color: $odoo-brand-primary; + color: $o-brand-primary; font-weight: 700; max-width: 300px; } } .o_background_footer { ul { - border-top: 1px solid $odoo-brand-primary; - border-bottom: 1px solid $odoo-brand-primary; + border-top: 1px solid $o-brand-primary; + border-bottom: 1px solid $o-brand-primary; padding: 4px 0; margin: 0 0 4px 0; li { - color: $odoo-brand-primary; + color: $o-brand-primary; } } } @@ -36,7 +36,7 @@ background-repeat: no-repeat; min-height: 900px; thead tr th, h2 { - color: $odoo-brand-primary; + color: $o-brand-primary; } tbody { color: $gray; @@ -57,7 +57,7 @@ border-top: none !important; } tr:last-child td { - color: $odoo-brand-primary; + color: $o-brand-primary; } } #total { diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss index 190e5c6862a..ecbdb02153f 100644 --- a/addons/web/static/src/scss/layout_clean.scss +++ b/addons/web/static/src/scss/layout_clean.scss @@ -10,16 +10,16 @@ } .o_clean_footer { margin: 0 3px; - border-top: 3px solid $odoo-brand-primary; + border-top: 3px solid $o-brand-primary; h4 { - color: $odoo-brand-primary; + color: $o-brand-primary; font-weight: bolder; } .pagenumber { width: 35px; height: 35px; - border: 3px solid $odoo-brand-primary; - background-color: $odoo-brand-optional; + border: 3px solid $o-brand-primary; + background-color: $o-brand-optional; color: white; padding-top: 6px; text-align: center; @@ -27,18 +27,18 @@ } .o_report_layout_clean { h1, h2, h3 { - color: $odoo-brand-optional; + color: $o-brand-optional; font-weight: bolder; } strong { - color: $odoo-brand-primary; + color: $o-brand-primary; } table { thead { - color: $odoo-brand-primary; + color: $o-brand-primary; tr th { text-align: left !important; - border-top: 3px solid $odoo-brand-primary !important; + border-top: 3px solid $o-brand-primary !important; text-transform: uppercase; } tr th:last-child { @@ -54,7 +54,7 @@ border-top: none; } tr:last-child td { - border-bottom: 3px solid $odoo-brand-primary; + border-bottom: 3px solid $o-brand-primary; } tr { td { diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss index 2c69f00e429..36bee4439c6 100644 --- a/addons/web/static/src/scss/list_view.scss +++ b/addons/web/static/src/scss/list_view.scss @@ -1,9 +1,8 @@ -$odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); .o_list_view { position: relative; cursor: pointer; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; margin-bottom: 0px; &.table { @@ -13,7 +12,7 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); } thead { - color: $odoo-main-text-color; + color: $o-main-text-color; border-bottom: 1px solid #cacaca; > tr > th { border-left: 1px solid #dfdfdf; @@ -25,9 +24,9 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); tfoot { cursor: default; - color: $odoo-list-footer-color; - background-color: $odoo-list-footer-bg-color; - font-weight: $odoo-list-footer-font-weight; + color: $o-list-footer-color; + background-color: $o-list-footer-bg-color; + font-weight: $o-list-footer-font-weight; border-top: 2px solid #cacaca; border-bottom: 1px solid #cacaca; } @@ -105,9 +104,9 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); padding-top: 0; padding-bottom: 0; .o_pager_previous, .o_pager_next { - background-color: $odoo-list-group-header-color; + background-color: $o-list-group-header-color; &:hover { - background-color: darken($odoo-list-group-header-color, 10%); + background-color: darken($o-list-group-header-color, 10%); } } } @@ -118,11 +117,11 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); tbody { tr:focus-within { - background-color: $odoo-form-lightsecondary; + background-color: $o-form-lightsecondary; } tr{ .focussed { - background-color: $odoo-form-lightsecondary; + background-color: $o-form-lightsecondary; } } } diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss index e75204f6098..0eec3e60049 100644 --- a/addons/web/static/src/scss/model_field_selector.scss +++ b/addons/web/static/src/scss/model_field_selector.scss @@ -14,8 +14,8 @@ > .o_field_selector_chain_part { padding: 0px 1px; - border: 1px solid darken($odoo-brand-lightsecondary, 10%); - background: $odoo-brand-lightsecondary; + border: 1px solid darken($o-brand-lightsecondary, 10%); + background: $o-brand-lightsecondary; margin-bottom: 1px; } > i { diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss index 8273c30182d..0c3d46945c9 100644 --- a/addons/web/static/src/scss/navbar.scss +++ b/addons/web/static/src/scss/navbar.scss @@ -1,17 +1,17 @@ .o_main_navbar { position: relative; - height: $odoo-navbar-height; - border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg; - background-color: $odoo-brand-primary; + height: $o-navbar-height; + border-bottom: 1px solid $o-navbar-inverse-link-hover-bg; + background-color: $o-brand-primary; color: white; > a, > button { float: left; - height: $odoo-navbar-height; + height: $o-navbar-height; border: none; - padding: 0 $odoo-horizontal-padding - 4px 0 $odoo-horizontal-padding; - line-height: $odoo-navbar-height; + padding: 0 $o-horizontal-padding - 4px 0 $o-horizontal-padding; + line-height: $o-navbar-height; background-color: transparent; text-align: center; color: inherit; @@ -20,7 +20,7 @@ @include user-select(none); &:hover, &:focus { - background-color: $odoo-navbar-inverse-link-hover-bg; + background-color: $o-navbar-inverse-link-hover-bg; color: inherit; } &:focus, &:active, &:focus:active { @@ -36,12 +36,12 @@ color: white; font-size: 22px; font-weight: 500; - line-height: $odoo-navbar-height; + line-height: $o-navbar-height; @media (max-width: $screen-xs-max) { float: none; margin: 0; - border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg; + border-bottom: 1px solid $o-navbar-inverse-link-hover-bg; color: transparent; } } @@ -64,13 +64,13 @@ > a { display: block; - height: $odoo-navbar-height; + height: $o-navbar-height; padding: 0 10px; color: white; - line-height: $odoo-navbar-height; + line-height: $o-navbar-height; &:hover { - background-color: $odoo-navbar-inverse-link-hover-bg; + background-color: $o-navbar-inverse-link-hover-bg; } &:focus, &:active, &:focus:active { @@ -80,7 +80,7 @@ &.o_extra_menu_items { > a { - width: $odoo-navbar-height; + width: $o-navbar-height; text-align: center; } &.open > ul { @@ -88,12 +88,12 @@ > li { > a { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; - border-bottom: 1px solid $odoo-brand-lightsecondary; + border-bottom: 1px solid $o-brand-lightsecondary; &.dropdown-toggle { - background-color: lighten($odoo-brand-primary, 15%); + background-color: lighten($o-brand-primary, 15%); pointer-events: none; // hack to prevent clicking on it because dropdown always opened } } @@ -127,19 +127,19 @@ @for $index from 3 through 5 { > li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} { - padding-left: $odoo-dropdown-hpadding + ($index - 2)*12px; + padding-left: $o-dropdown-hpadding + ($index - 2)*12px; } } } .open .dropdown-toggle { - background-color: $odoo-navbar-inverse-link-hover-bg; + background-color: $o-navbar-inverse-link-hover-bg; } .o_user_menu { margin-left: 6px; > a { - padding-right: $odoo-horizontal-padding; + padding-right: $o-horizontal-padding; } .oe_topbar_avatar { @@ -152,7 +152,7 @@ @include o-transition(height, 200ms, linear); position: relative; - height: $odoo-navbar-height; + height: $o-navbar-height; overflow: hidden; > ul { @@ -186,15 +186,15 @@ } &.o_menu_systray { - @include o-position-absolute(0px, $odoo-navbar-height, auto, $odoo-navbar-height); - height: $odoo-navbar-height; + @include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height); + height: $o-navbar-height; text-align: right; > li { display: inline-block; &.open .dropdown-menu { - @include o-position-absolute($odoo-navbar-height, 0, 0, 0); + @include o-position-absolute($o-navbar-height, 0, 0, 0); position: fixed; width: auto; } diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss index 83b17a4e751..3efddd8eab2 100644 --- a/addons/web/static/src/scss/pivot_view.scss +++ b/addons/web/static/src/scss/pivot_view.scss @@ -5,27 +5,27 @@ // items corresponding to the clicked cell &.o_enable_linking { .o_pivot_cell_value:hover { - color: $odoo-brand-optional; + color: $o-brand-optional; cursor: pointer; } } table { - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; width: auto; // bootstrap override th { font-weight: normal; // bootstrap override - background-color: lighten($odoo-brand-secondary, 40%); + background-color: lighten($o-brand-secondary, 40%); } @mixin o-pivot-header-cell { - background-color: lighten($odoo-brand-secondary, 40%); + background-color: lighten($o-brand-secondary, 40%); cursor: pointer; white-space: nowrap; @include user-select(none); &:hover { - background-color: lighten($odoo-brand-secondary, 30%); + background-color: lighten($o-brand-secondary, 30%); } } diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss new file mode 100644 index 00000000000..b394aeafe26 --- /dev/null +++ b/addons/web/static/src/scss/primary_variables.scss @@ -0,0 +1,92 @@ +/// +/// This file regroups the variables that style odoo components. +/// They are available in every asset bundle. +/// + +// Font sizes +$o-font-size-base: 13px; +$o-line-height-base: 1.428571429; // This is BS default + +// Colors +$o-brand-primary: #7c7bad; +$o-brand-optional: #7c7bad; +$o-brand-secondary: #f0eeee; +$o-brand-lightsecondary: #e2e2e0; +$o-color-silver: #F9F9F9; +$o-color-silver-dark: #E5E5E5; +$o-color-silver-darker: #d9d7d7; +$o-color-gray-light: lighten(#000, 46.7%); // This is BS default + +$o-color-pink: #875A7B; // Enterprise $o-brand-primary +$o-main-color-muted: #a8a8a8; +$o-main-text-color: #4c4c4c; + +$o-view-background-color: white; +$o-shadow-color: #303030; + +$o-form-lightsecondary: #ccc; + +$o-list-footer-bg-color: #eee; +$o-list-footer-font-weight: bold; + +$o-tooltip-background-color: black; +$o-tooltip-color: white; +$o-tooltip-arrow-color: black; +$o-tooltip-text-color: #777777; +$o-tooltip-title-text-color: #4c4c4c; + +// Layout +$screen-xs-min: 475px; +$screen-xl-min: 1534px; + +$o-form-group-cols: 12; +$o-form-spacing-unit: 5px; +$o-horizontal-padding: 16px; +$o-innergroup-rpadding: 45px; +$o-dropdown-hpadding: 20px; + +$o-sheet-vpadding: 24px; + +$o-notification-error-bg-color: #F16567; +$o-notification-info-bg-color: #FCFBEA; + +// Needed for having no spacing between sheet and mail body in mass_mailing: +// Different required cancel paddings between web and web_enterprise +$o-sheet-cancel-tpadding: 0px; + +$o-avatar-size: 90px; + +$o-statusbar-height: 33px; + +$o-label-font-size-factor: 0.8; +$o-navbar-height: 34px; + +$o-nb-calendar-colors: 24; + +$o-base-settings-mobile-tabs-height: 40px; +$o-base-settings-mobile-tabs-overflow-gap: 3%; + +$o-cp-breadcrumb-height: 30px; + +$o-datepicker-week-color: #8f8f8f; + +// Kanban + +$o-kanban-default-record-width: 300px; +$o-kanban-small-record-width: 240px; + +$o-kanban-header-title-height: 50px; + +$o-kanban-image-width: 64px; +$o-kanban-inside-vgutter: 8px; +$o-kanban-inside-hgutter: 8px; +$o-kanban-color-border-width: 3px; +$o-kanban-inner-hmargin: 5px; +$o-kanban-progressbar-height: 20px; + +$o-kanban-mobile-tabs-height: 40px; + +// ------- Kanban dashboard variables ------- + +// Used to manage spacing in complex dropdown menu +$o-kanban-dashboard-dropdown-complex-gap: 5px; diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss index e4322845c45..8aaade8812f 100644 --- a/addons/web/static/src/scss/progress_bar.scss +++ b/addons/web/static/src/scss/progress_bar.scss @@ -14,16 +14,16 @@ height: 15px; vertical-align: middle; - border: 1px solid lighten($odoo-brand-secondary, 25%); + border: 1px solid lighten($o-brand-secondary, 25%); overflow: hidden; background-color: white; &.o_progress_overflow { - background-color: $odoo-brand-secondary; + background-color: $o-brand-secondary; } .o_progressbar_complete { - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; height: 100%; } } diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss index 102b76f02f8..eb6f4ce3c59 100644 --- a/addons/web/static/src/scss/rainbow.scss +++ b/addons/web/static/src/scss/rainbow.scss @@ -1,13 +1,11 @@ /************** rainbow *****************/ -// Variables -$reward-size: 400px; -$reward-size-mobile: 300px; -$reward-text-color: #727880; -$reward-base-time: 1.4s; - -// o_reward .o_reward { + $reward-size: 400px; + $reward-size-mobile: 300px; + $reward-text-color: #727880; + $reward-base-time: 1.4s; + will-change: transform; z-index: $zindex-modal; padding: 50px; diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss index 5f40760c2c6..f2b0f7fd14f 100644 --- a/addons/web/static/src/scss/search_view.scss +++ b/addons/web/static/src/scss/search_view.scss @@ -103,16 +103,16 @@ cursor: pointer; @include user-select(none); // Prevent text selection when toggling the dropdowns > a { // dropdown togglers - color: $odoo-main-text-color; + color: $o-main-text-color; &:hover { text-decoration: none; font-weight: bold; - color: darken($odoo-main-text-color, 10%); + color: darken($o-main-text-color, 10%); } } &.open > a { font-weight: bold; - color: darken($odoo-main-text-color, 10%); + color: darken($o-main-text-color, 10%); } } diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss index 247b188c396..d2098a5f9c3 100644 --- a/addons/web/static/src/scss/search_view_extra.scss +++ b/addons/web/static/src/scss/search_view_extra.scss @@ -6,7 +6,7 @@ .o_searchview_facet { border: 1px solid $gray-light; - background: lighten($odoo-brand-primary, 35%); + background: lighten($o-brand-primary, 35%); .o_searchview_facet_label { background-color: $gray-light; @@ -28,7 +28,7 @@ @include o-position-absolute($top: 6px, $right: 5px); } .o_searchview_autocomplete li.o-selection-focus { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; > a { color: white; } diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss new file mode 100644 index 00000000000..8ab2d5bc322 --- /dev/null +++ b/addons/web/static/src/scss/secondary_variables.scss @@ -0,0 +1,43 @@ +// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used +// for design purposes only (e.g. cards' borders). We avoid to overwrite the +// default $gray-light because it is deeply used by bootstrap to define muted +// elements. +$gray-lighter-dark: $o-color-silver-dark; +$gray-lighter-darker: $o-color-silver-darker; + +$o-webclient-background-color: $o-color-silver; +$o-control-panel-background-color: $o-color-silver; + +$o-list-footer-color: $o-main-text-color; +$o-list-group-header-color: lighten($o-brand-lightsecondary, 10%); + +// UI custom colors for tags, kanban records' colors, ...) +$o-colors: $o-color-gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, + #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8; + +$screen-xxs-max: ($screen-xs-min - 1); +$screen-lg-max: ($screen-xl-min - 1); + +$o-sheet-cancel-hpadding: $o-horizontal-padding; +$o-sheet-cancel-bpadding: $o-horizontal-padding; + +$o-statusbar-arrow-width: $o-statusbar-height / 3; +$o-statusbar-disabled-bg: lighten($o-brand-lightsecondary, 7%); + +$o-navbar-inverse-link-hover-bg: darken($o-brand-primary, 10%); + +$o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%); + +// Kanban + +$o-kanban-record-margin: $o-horizontal-padding / 2; +$o-kanban-group-padding: $o-horizontal-padding; // Cannot be higher than this + +$o-kanban-inside-hgutter-mobile: $o-horizontal-padding; + +// ------- Kanban dashboard variables ------- + +// Since rows and containers are used inside cards, we're +// forced to set the padding relative to the grid system. +$o-kanban-dashboard-hpadding: $o-horizontal-padding; +$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2; diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss index 79fb0b60fb7..765db1292da 100644 --- a/addons/web/static/src/scss/tooltip.scss +++ b/addons/web/static/src/scss/tooltip.scss @@ -7,17 +7,17 @@ .tooltip-inner { max-width: 300px; // fallback for browsers which do not support "vw" unit max-width: 100vw; - background-color: $odoo-tooltip-background-color; - color: $odoo-tooltip-color; + background-color: $o-tooltip-background-color; + color: $o-tooltip-color; border-radius: $border-radius-base; - box-shadow: 0px 0px 1px 1px $odoo-brand-secondary; + box-shadow: 0px 0px 1px 1px $o-brand-secondary; padding: 5px; text-align: left; .oe_tooltip_string { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; font-weight: bold; padding: 5px; @@ -42,18 +42,18 @@ } &.top, &.top-left, &.top-right { .tooltip-arrow { - border-top-color: $odoo-tooltip-arrow-color!important; + border-top-color: $o-tooltip-arrow-color!important; } } &.bottom, &.bottom-left, &.bottom-right { .tooltip-arrow { - border-bottom-color: $odoo-tooltip-arrow-color!important; + border-bottom-color: $o-tooltip-arrow-color!important; } } &.left .tooltip-arrow { - border-left-color: $odoo-tooltip-arrow-color!important; + border-left-color: $o-tooltip-arrow-color!important; } &.right .tooltip-arrow { - border-right-color: $odoo-tooltip-arrow-color!important; + border-right-color: $o-tooltip-arrow-color!important; } } diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 6db15976bd5..f64d50fd240 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -3,16 +3,6 @@ /// // ------------------------------------------------------------------ -// Padding -// ------------------------------------------------------------------ -@mixin o-webclient-padding($top: 0px, $right: $odoo-horizontal-padding, $bottom: 0px, $left: $odoo-horizontal-padding) { - padding-top: $top; - padding-right: $right; - padding-bottom: $bottom; - padding-left: $left; -} - -// ------------------------------------------------------------------ // Caret // ------------------------------------------------------------------ @mixin utils-caret-boilerplate { @@ -22,38 +12,6 @@ height: 0; vertical-align: middle; } -@mixin o-caret-down($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: 0; - border-left: $caret-width solid transparent; - border-right: $caret-width solid transparent; - border-top: $caret-width solid; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} -@mixin o-caret-up($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: $caret-width solid; - border-left: $caret-width solid transparent; - border-right: $caret-width solid transparent; - border-top: 0; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} -@mixin o-caret-left($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: $caret-width solid transparent; - border-left: 0; - border-right: $caret-width solid; - border-top: $caret-width solid transparent; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} -@mixin o-caret-right($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: $caret-width solid transparent; - border-left: $caret-width solid; - border-right: 0; - border-top: $caret-width solid transparent; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} // ------------------------------------------------------------------ // Vendor prefixes @@ -121,33 +79,6 @@ } // ------------------------------------------------------------------ -// Dropdowns -// ------------------------------------------------------------------ -@mixin o-selected-li { - li { - position: relative; - > a { - color: $odoo-main-text-color; - &:hover { - color: darken($odoo-main-text-color, 10%); - } - } - &.selected { - > a { - color: darken($odoo-main-text-color, 10%); - font-weight: bold; - &:before { - font-family: FontAwesome; - position: absolute; - left: 6px; - content: "\f00c"; - } - } - } - } -} - -// ------------------------------------------------------------------ // Select Appearance // ------------------------------------------------------------------ @mixin o-appearance($value) { @@ -265,6 +196,95 @@ opacity: $hover-opacity; } } + +//------------------------------------------------------------------------------ +// Colors +//------------------------------------------------------------------------------ + +@function luma($color) { + @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%; +} +@function o-get-most-contrast($color, $c1, $c2) { + $luma: luma($color); + @return if(abs($luma - luma($c1)) > abs($luma - luma($c2)), $c1, $c2); +} + +// ------------------------------------------------------------------ +// Padding +// ------------------------------------------------------------------ +@mixin o-webclient-padding($top: 0px, $right: $o-horizontal-padding, $bottom: 0px, $left: $o-horizontal-padding) { + padding-top: $top; + padding-right: $right; + padding-bottom: $bottom; + padding-left: $left; +} + +// ------------------------------------------------------------------ +// Caret +// ------------------------------------------------------------------ +@mixin o-caret-down($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: 0; + border-left: $caret-width solid transparent; + border-right: $caret-width solid transparent; + border-top: $caret-width solid; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +@mixin o-caret-up($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid; + border-left: $caret-width solid transparent; + border-right: $caret-width solid transparent; + border-top: 0; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +@mixin o-caret-left($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid transparent; + border-left: 0; + border-right: $caret-width solid; + border-top: $caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +@mixin o-caret-right($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid transparent; + border-left: $caret-width solid; + border-right: 0; + border-top: $caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} + +// ------------------------------------------------------------------ +// Dropdowns +// ------------------------------------------------------------------ +@mixin o-selected-li { + li { + position: relative; + > a { + color: $o-main-text-color; + &:hover { + color: darken($o-main-text-color, 10%); + } + } + &.selected { + > a { + color: darken($o-main-text-color, 10%); + font-weight: bold; + &:before { + font-family: FontAwesome; + position: absolute; + left: 6px; + content: "\f00c"; + } + } + } + } +} + +// ------------------------------------------------------------------ +// Hovering effects +// ------------------------------------------------------------------ @mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) { color: $default-color; @@ -273,11 +293,163 @@ } } -//------------------------------------------------------------------------------ -// Colors -//------------------------------------------------------------------------------ +// ------------------------------------------------------------------ +// Mixin to define variations for btn-links and muted btn-links +// ------------------------------------------------------------------ +@mixin o-btn-link-variant($color, $color-active) { + text-transform: none; + @include o-hover-text-color($default-color: $color, $hover-color: $color-active); -@function o-get-most-contrast($color, $c1, $c2) { - $brightness: brightness($color); - @return if(abs($brightness - brightness($c1)) > abs($brightness - brightness($c2)), $c1, $c2); + &, &:hover, &:focus, &:active, &.active { + border-color: transparent; + background-color: transparent + } + + &.text-muted, .text-muted { + @include o-hover-opacity; + @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active); + } +} + +// ------- Kanban grouped mixins ------- +@mixin o-kanban-icon($base-opacity: 0.5) { + display: block; + text-align: center; + color: $o-main-text-color; + font-size: $font-size-small; + cursor: pointer; + @include o-hover-opacity($base-opacity); +} +@mixin o-kanban-tag-color { + @for $size from 1 through length($o-colors) { + // Note: the first color is supposed to be invisible if there is a color + // field but it is used as a default color when there is no color field + &.o_tag_color_#{$size - 1} span { + background-color: nth($o-colors, $size); + } + } +} +@mixin o-kanban-record-color { + @for $size from 2 through length($o-colors) { + // Note: the first color is not defined as it is the 'no color' for kanban + .oe_kanban_color_#{$size - 1}::after { + background-color: nth($o-colors, $size); + } + } +} +@mixin o-kanban-slim-col { + position: relative; + @include o-flex(0, 0, auto); + margin: 0; + padding: 0 floor($o-kanban-group-padding * 0.7); + cursor: pointer; +} +@mixin o-kanban-header-title { + @include o-flex-display; + @include o-align-items(center); + height: $o-kanban-header-title-height; + line-height: 2.2; + color: $headings-color; +} +@mixin o-kanban-v-title { + @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2)); + @include o-transform-origin(left, bottom, $z: 0); + @include o-transform(rotate(90deg)); + overflow: visible; + white-space: nowrap; + font-size: 15px; +} + +// ------- Kanban records mixins ------- +@mixin o-kanban-record-title($font-size) { + color: $headings-color; + font-size: $font-size; + font-weight: 500; + margin-bottom: 0; + margin-top: 0; +} +@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) { + margin: -1px -1px auto auto; // compensate border + padding: $padding-base/2 $padding-base; + border: 1px solid transparent; + border-bottom: none; + vertical-align: top; + color: $text-color; + + &:hover { + color: $headings-color; + } + &:focus, &:active, &:focus:active { + outline: none; + } +} +@mixin o-kanban-dropdown-open { + position: relative; + background: white; + border-color: $gray-lighter-darker; + z-index: $zindex-dropdown + 1; +} +@mixin o-kanban-dropdown-menu { + @include o-position-absolute($right: -1px); + margin-top: -1px; + border-color: $gray-lighter-darker; +} +@mixin o-kanban-colorpicker { + max-width: 150px; + padding: 3px ($o-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $o-dropdown-hpadding; + + > li { + display: inline-block; + margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0; + border: 1px solid white; + box-shadow: 0 0 0 1px $gray-lighter-dark; + + > a { + display: block; + + &::after { + content: ""; + display: block; + width: 20px; + height: 15px; + } + } + + // No Color + &:first-child > a { + position: relative; + &::before { + content: ""; + @include o-position-absolute(-2px, $left: 10px); + display: block; + width: 1px; + height: 20px; + @include rotate(45deg); + background-color: red; + } + &::after { + background-color: white; + } + } + } +} + +// Emulate dropdown links +@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $o-dropdown-hpadding) { + padding: 0; + + > a { + margin: auto auto auto -$link-padding-gap; + padding: 3px $link-padding-gap; + color: $text-color; + display: block; + + &:hover { + background-color: $gray-lighter-dark; + color: $headings-color; + } + } + &:last-child { + margin-bottom: 5px; + } } diff --git a/addons/web/static/src/scss/variables.scss b/addons/web/static/src/scss/variables.scss deleted file mode 100644 index 20180488042..00000000000 --- a/addons/web/static/src/scss/variables.scss +++ /dev/null @@ -1,82 +0,0 @@ -/// -/// This file regroups the variables that style odoo components. -/// They are available in every asset bundle. -/// - -// Font sizes -$odoo-font-size-base: 13px; - -// Colors -$odoo-brand-primary: #7c7bad; -$odoo-brand-optional: #7c7bad; -$odoo-brand-secondary: #f0eeee; -$odoo-brand-lightsecondary: #e2e2e0; -$odoo-color-silver: #F9F9F9; -$odoo-color-silver-dark: #E5E5E5; -$odoo-color-silver-darker: #d9d7d7; - -// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used -// for design purposes only (e.g. cards' borders). We avoid to overwrite the -// default $gray-light because it is deeply used by bootstrap to define muted -// elements. -$gray-lighter-dark: $odoo-color-silver-dark; -$gray-lighter-darker: $odoo-color-silver-darker; - -$odoo-color-pink: #875A7B; // Enterprise $odoo-brand-primary -$odoo-main-color-muted: #a8a8a8; -$odoo-main-text-color: #4c4c4c; - -$odoo-view-background-color: white; -$odoo-shadow-color: #303030; - -$odoo-webclient-background-color: $odoo-color-silver; -$odoo-control-panel-background-color: $odoo-color-silver; -$odoo-form-lightsecondary: #ccc; - -$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; -$odoo-tooltip-text-color: #777777; -$odoo-tooltip-title-text-color: #4c4c4c; - -// UI custom colors for tags, kanban records' colors, ...) -$odoo-nb-ui-color: 12; -$odoo-colors: $gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, - #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8; - -// Layout -$screen-xs-min: 475px; -$screen-xxs-max: ($screen-xs-min - 1); - -$screen-xl-min: 1534px; -$screen-lg-max: ($screen-xl-min - 1); - -$odoo-form-group-cols: 12; -$odoo-form-spacing-unit: 5px; -$odoo-horizontal-padding: 16px; -$odoo-innergroup-rpadding: 45px; -$odoo-dropdown-hpadding: 20px; - -$border-radius-base: 3px; - -$odoo-sheet-vpadding: 24px; - -// Needed for having no spacing between sheet and mail body in mass_mailing: -// Different required cancel paddings between web and web_enterprise -$odoo-sheet-cancel-tpadding: 0px; -$odoo-sheet-cancel-hpadding: $odoo-horizontal-padding; -$odoo-sheet-cancel-bpadding: $odoo-horizontal-padding; - -$odoo-avatar-size: 90px; - -$odoo-statusbar-height: 33px; -$odoo-statusbar-arrow-width: $odoo-statusbar-height/3; -$odoo-statusbar-disabled-bg: lighten($odoo-brand-lightsecondary, 7%); - -$odoo-label-font-size-factor: 0.8; -$odoo-navbar-height: 34px; -$odoo-navbar-inverse-link-hover-bg: $navbar-inverse-link-active-bg; diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss index 790cec7746d..e3562026ffe 100644 --- a/addons/web/static/src/scss/views.scss +++ b/addons/web/static/src/scss/views.scss @@ -51,12 +51,12 @@ padding: 15px; z-index: 1000; text-align: center; - color: $odoo-tooltip-text-color; + color: $o-tooltip-text-color; font-size: 115%; > p:first-of-type { margin-top: 0; - color: $odoo-tooltip-title-text-color; + color: $o-tooltip-title-text-color; font-weight: bold; font-size: 125%; } diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss index 257e81bc89a..7091cbc3c98 100644 --- a/addons/web/static/src/scss/web_calendar.scss +++ b/addons/web/static/src/scss/web_calendar.scss @@ -1,20 +1,18 @@ -$nb-calendar-colors: 24; - @keyframes backgroundfade { - from {background-color: rgba($odoo-brand-primary, 0.5);} + from {background-color: rgba($o-brand-primary, 0.5);} to {background-color: #f5f5f5;} } .o_calendar_container { height: 100%; - @include o-webclient-padding($top: $odoo-horizontal-padding/2, $bottom: $odoo-horizontal-padding/2); + @include o-webclient-padding($top: $o-horizontal-padding/2, $bottom: $o-horizontal-padding/2); @include o-flex-display; - @for $index from 1 through $nb-calendar-colors { + @for $index from 1 through $o-nb-calendar-colors { .o_calendar_color_#{$index} { color: #0D0D0D; - background-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg); - border-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg); + background-color: adjust-hue(rgb(255, 192, 192), (360/($o-nb-calendar-colors+1) * $index) * 1deg); + border-color: adjust-hue(rgb(255, 192, 192), (360/($o-nb-calendar-colors+1) * $index) * 1deg); opacity: 0.7; &.o_event_hightlight { font-weight: bold; @@ -25,7 +23,7 @@ $nb-calendar-colors: 24; } } .o_underline_color_#{$index} { - border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($nb-calendar-colors+1) * $index) * 1deg); + border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($o-nb-calendar-colors+1) * $index) * 1deg); } } @@ -35,12 +33,12 @@ $nb-calendar-colors: 24; .o_calendar_widget { height: 100%; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; * { z-index: 0; // FIXME } .fc-week-number, .fc-widget-header { - background-color: lighten($odoo-brand-secondary, 30%); + background-color: lighten($o-brand-secondary, 30%); } .o_avatar_square { border-radius: 5px; @@ -64,14 +62,14 @@ $nb-calendar-colors: 24; } .o_calendar_sidebar_container { - @include o-flex(0, 0, $odoo-horizontal-padding); + @include o-flex(0, 0, $o-horizontal-padding); position: relative; &.o_sidebar_hidden { - margin-right: -$odoo-horizontal-padding; // hack to display the toggler in the gutter + margin-right: -$o-horizontal-padding; // hack to display the toggler in the gutter .o_calendar_sidebar_toggler { padding: 4px; - color: darken($odoo-webclient-background-color, 30%); + color: darken($o-webclient-background-color, 30%); } } @@ -88,7 +86,7 @@ $nb-calendar-colors: 24; .o_calendar_sidebar { width: 250px; margin-left: 8px; - background: $odoo-view-background-color; + background: $o-view-background-color; } .ui-datepicker { @@ -101,7 +99,7 @@ $nb-calendar-colors: 24; .ui-widget-header { @include o-flex-display; background: none; - background-color: lighten($odoo-brand-secondary, 30%); + background-color: lighten($o-brand-secondary, 30%); border-radius: 0; .ui-datepicker-prev, .ui-datepicker-next { @@ -110,7 +108,7 @@ $nb-calendar-colors: 24; cursor: pointer; padding: 2px; text-align: center; - color: $odoo-main-text-color; + color: $o-main-text-color; &.ui-state-hover { background: none; border: none; @@ -144,31 +142,31 @@ $nb-calendar-colors: 24; table { td { padding: 0 2px 2px 0; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; a { border: none; background: none; - background-color: lighten($odoo-brand-secondary, 40%); + background-color: lighten($o-brand-secondary, 40%); text-align: center; } } .ui-state-default { - color: $odoo-brand-primary; + color: $o-brand-primary; &:hover { background: none; - background-color: rgba($odoo-brand-primary, 0.5); - border-color: $odoo-brand-primary; - color: $odoo-view-background-color; + background-color: rgba($o-brand-primary, 0.5); + border-color: $o-brand-primary; + color: $o-view-background-color; }; } .ui-state-active { background: none; - background-color: $odoo-brand-primary; - color: $odoo-view-background-color; + background-color: $o-brand-primary; + color: $o-view-background-color; } .o_selected_range.o_color { background: none; - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; animation: backgroundfade 3s forwards; } } diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss index d4bd0b4e0f2..b0f38b37fea 100644 --- a/addons/web/static/src/scss/webclient.scss +++ b/addons/web/static/src/scss/webclient.scss @@ -3,14 +3,12 @@ // ------------------------------------------------------------------ .o_web_client { position: relative; // normally useless but required by bootstrap-datepicker - background-color: $odoo-webclient-background-color; + background-color: $o-webclient-background-color; } // ------------------------------------------------------------------ // Misc. widgets // ------------------------------------------------------------------ -$notification-error-bg-color: #F16567; -$notification-info-bg-color: #FCFBEA; .o_notification_manager { width: 300px; max-width: 100%; @@ -24,8 +22,8 @@ $notification-info-bg-color: #FCFBEA; opacity: 0; - background-color: $notification-info-bg-color; - box-shadow: 0px 0px 5px 1px $odoo-main-text-color; + background-color: $o-notification-info-bg-color; + box-shadow: 0px 0px 5px 1px $o-main-text-color; position: relative; .o_close { @@ -56,7 +54,7 @@ $notification-info-bg-color: #FCFBEA; &.o_error { color: white; - background-color: $notification-error-bg-color; + background-color: $o-notification-error-bg-color; } } } @@ -103,7 +101,7 @@ div.o_boolean_toggle { } > input:checked + .slider { - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; &:before { @include translate(14px, 0px); diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss index 701cfe2a9b3..cc87e526f8d 100644 --- a/addons/web/static/src/scss/webclient_extra.scss +++ b/addons/web/static/src/scss/webclient_extra.scss @@ -7,7 +7,7 @@ outline: none; } .o_input { - border: 1px solid $odoo-form-lightsecondary; + border: 1px solid $o-form-lightsecondary; border-radius: $border-radius-base; padding: 2px 4px; color: #1f1f1f; @@ -29,7 +29,7 @@ select { top: 0; right: 50%; padding: 4px 12px; - background-color: $odoo-color-pink; + background-color: $o-color-pink; color: white; text-align: center; border-top: none; @@ -44,3 +44,8 @@ select { @include o-text-overflow; max-width: 150px; } + +// Button +.btn-icon { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); +} diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss index 14892617b5e..f811df48802 100644 --- a/addons/web/static/src/scss/webclient_layout.scss +++ b/addons/web/static/src/scss/webclient_layout.scss @@ -1,4 +1,3 @@ -$odoo-submenu-width: 220px; .o_web_client { @include o-flex-display; @@ -37,11 +36,11 @@ $odoo-submenu-width: 220px; height: 100%; .o_sub_menu { - @include o-flex(0, 0, $odoo-submenu-width); + @include o-flex(0, 0, 220px); @include o-flex-display; @include o-flex-flow(column, nowrap); - border-right: 1px solid darken($odoo-control-panel-background-color, 20%); - background-color: $odoo-control-panel-background-color; + border-right: 1px solid darken($o-control-panel-background-color, 20%); + background-color: $o-control-panel-background-color; .o_sub_menu_logo { @include o-flex(0, 0, auto); @@ -75,13 +74,13 @@ $odoo-submenu-width: 220px; .oe_secondary_menu_section { font-weight: bold; margin-left: 8px; - color: $odoo-brand-optional; + color: $o-brand-optional; } .oe_secondary_submenu { margin: 3px 0px 10px; line-height: 1.1em; >li:not(.active) > a { - color: $odoo-main-text-color; + color: $o-main-text-color; } > li > a { padding: 4px 4px 4px 18px; @@ -135,7 +134,7 @@ $odoo-submenu-width: 220px; > a { font-weight: bold; > span { - color: $odoo-color-pink; + color: $o-color-pink; } } } diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml index 76a1e197373..ae3b882e764 100644 --- a/addons/web/views/webclient_templates.xml +++ b/addons/web/views/webclient_templates.xml @@ -1,17 +1,40 @@ <?xml version="1.0" encoding="utf-8"?> <odoo> - <template id="web._assets_helpers"> - <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/_variables.scss"/> - <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_vendor-prefixes.scss"/> - <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_buttons.scss"/> - <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_clearfix.scss"/> - <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/mixins/_size.scss"/> - - <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/variables.scss"/> + <template id="_assets_utils"> + <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/_mixins.scss"/> <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/utils.scss"/> </template> - <template id="web.assets_common" name="Common Assets (used in backend interface and website)"> + <template id="_assets_primary_variables"> + <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/primary_variables.scss"/> + </template> + + <template id="_assets_secondary_variables"> + <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/secondary_variables.scss"/> + </template> + + <template id="_assets_helpers"> + <t t-call="web._assets_utils"/> + <t t-call="web._assets_primary_variables"/> + <t t-call="web._assets_secondary_variables"/> + + <!-- Bootstrap variables should not be necessary, all pages come with bootstrap in at least one of their --> + <!-- bundle and, ideally, these should be available in all assets... with their odoo override. This system --> + <!-- however works for now as non-backend and non-frontend assets do not need overriden BS variables yet. --> + <link t-if="not no_bs_vars" rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap/scss/bootstrap/_variables.scss"/> + </template> + + <template id="_assets_backend_helpers"> + <t t-call="web._assets_helpers"><t t-set="no_bs_vars" t-value="True"/></t> + <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden.scss"/> + </template> + + <template id="_assets_frontend_helpers"> + <t t-call="web._assets_helpers"><t t-set="no_bs_vars" t-value="True"/></t> + <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden_frontend.scss"/> + </template> + + <template id="assets_common" name="Common Assets (used in backend interface and website)"> <t t-call="web._assets_helpers"/> <link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css"/> @@ -97,14 +120,13 @@ <script type="text/javascript" src="/web/static/src/js/widgets/rainbow_man.js"></script> </template> - <template id="web.assets_backend" name="Backend Assets (used in backend interface)"> - <t t-call="web._assets_helpers"/> + <template id="assets_backend" name="Backend Assets (used in backend interface)"> + <t t-call="web._assets_backend_helpers"/> <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/> <link rel="stylesheet" type="text/css" href="/base/static/src/css/modules.css"/> - <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/bootstrap_overridden.scss"/> <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/webclient_extra.scss"/> <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/webclient_layout.scss"/> @@ -256,7 +278,7 @@ </template> <template id="web.assets_frontend" name="Website Assets"> - <t t-call="web._assets_helpers"/> + <t t-call="web._assets_frontend_helpers"/> <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/import_bootstrap.scss"/> diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 577e2e568b3..2d760ff3193 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -232,41 +232,6 @@ a.o_underline { } } -// Colors -$gray-white: #fff; - -$color-alpha: #1cc1a9; -$color-beta: #875A7B; -$color-gamma: #BA3C3D; -$color-delta: #0D6759; -$color-epsilon: #0B2E59; - -// Greyscale transparent colours -$color-black-25: rgba(black, 0.25); -$color-black-50: rgba(black, 0.5); -$color-black-75: rgba(black, 0.75); -$color-white-25: rgba(white, 0.25); -$color-white-50: rgba(white, 0.5); -$color-white-75: rgba(white, 0.75); - -@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) { - .bg-#{$name} { - background-color: $color; - color: $complementary; - .text-muted { - color: rgba($complementary, 0.4); - } - } - body .text-#{$name} { // body to make the rules more important that bg-* ones - color: $content-color; - } -} -@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) { - .btn-#{$name} { - @include button-variant($complementary, $color, $border-color); - } -} - // Create classes for theme colors... @include o-create-color-classes(alpha, $color-alpha); @include o-create-color-classes(beta, $color-beta); diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss index 5d848a481e4..0208a43509c 100644 --- a/addons/web_editor/static/src/scss/web_editor.ui.scss +++ b/addons/web_editor/static/src/scss/web_editor.ui.scss @@ -18,7 +18,7 @@ #web_editor-top-edit { @include o-position-absolute(0, 0, auto, 0); position: fixed; - height: $odoo-navbar-height; + height: $o-navbar-height; z-index: $zindex-modal - 9; background-color: rgba(0,0,0,0); @@ -59,7 +59,7 @@ } &.btn-primary { - @include button-variant(white, $odoo-brand-primary, $odoo-brand-primary); + @include button-variant(white, $o-brand-primary, $o-brand-primary); } &.btn-default { @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); @@ -86,16 +86,13 @@ padding: 4px; } html[lang] > body.editor_enable [data-oe-translation-state] { - $o-color-content-to-translate: rgb(255, 255, 90); - $o-color-translated-content: rgb(120, 215, 110); - - background: rgba($o-color-content-to-translate, 0.5)!important; + background: rgba($o-we-content-to-translate-color, 0.5)!important; &[data-oe-translation-state="translated"] { - background: rgba($o-color-translated-content, 0.5)!important; + background: rgba($o-we-translated-content-color, 0.5)!important; } &.o_dirty { - background: rgba($o-color-translated-content, 0.25)!important; + background: rgba($o-we-translated-content-color, 0.25)!important; } } @@ -118,8 +115,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] { #snippets_menu { @include o-flex(0, 0, auto); - height: $odoo-navbar-height; - line-height: $odoo-navbar-height; + height: $o-navbar-height; + line-height: $o-navbar-height; margin: 0; padding: 0; background: $o-we-color-dark; @@ -254,28 +251,24 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // DROPZONES @keyframes dropZoneInsert { to { - background-color: rgba($odoo-brand-primary, 0.2); + background-color: rgba($o-brand-primary, 0.2); } } #wrapwrap .oe_drop_zone { - background-color: rgba($odoo-brand-primary, 0.05); + background-color: rgba($o-brand-primary, 0.05); @include o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate); &.oe_insert { - $odoo-dropzone-size: 40px; - $odoo-dropzone-border-width: 2px; - $odoo-dropzone-border: $odoo-dropzone-border-width dashed $odoo-brand-primary; - z-index: 999; - border: $odoo-dropzone-border; + border: $o-we-dropzone-border; border-top: none; border-bottom: none; position: relative; width: 100%; - height: $odoo-dropzone-size; - margin: -$odoo-dropzone-size/2 0; + height: $o-we-dropzone-size; + margin: -$o-we-dropzone-size/2 0; @include o-transition(margin, 400ms, linear); @@ -284,24 +277,24 @@ html[lang] > body.editor_enable [data-oe-translation-state] { display: block; width: 100%; height: 50%; - border-bottom: $odoo-dropzone-border; + border-bottom: $o-we-dropzone-border; box-sizing: content-box; } &.oe_vertical { - border: 2px dashed $odoo-brand-primary; + border: 2px dashed $o-brand-primary; border-left: none; border-right: none; - width: $odoo-dropzone-size; + width: $o-we-dropzone-size; float: left; - margin: 0 -$odoo-dropzone-size/2; + margin: 0 -$o-we-dropzone-size/2; &:after { width: 50%; height: 100%; border-bottom: none; - border-right: $odoo-dropzone-border; + border-right: $o-we-dropzone-border; } } } @@ -309,9 +302,6 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // MANIPULATORS #oe_manipulators { - $odoo-handle-edge-size: 1px; - $odoo-handle-border-width: 1px; - position: relative; // SNIPPET MANIPULATORS @@ -341,14 +331,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] { white-space: nowrap; .btn { - $o-overlay-option-size: 25px; - display: inline-block; - width: $o-overlay-option-size; - height: $o-overlay-option-size; + width: $o-we-overlay-option-size; + height: $o-we-overlay-option-size; padding: 0; border: 1px solid $o-we-color-dark; - line-height: $o-overlay-option-size; + line-height: $o-we-overlay-option-size; font-size: 11px; border-radius: 0; font-weight: normal; @@ -485,7 +473,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { @include o-position-absolute($top: 5px, $left: 5px); content: "\f00c"; font-family: "FontAwesome"; - color: $odoo-brand-optional; + color: $o-brand-optional; } } &.dropdown-header { @@ -544,29 +532,26 @@ html[lang] > body.editor_enable [data-oe-translation-state] { &.o_top_cover > .oe_overlay_options { bottom: auto; - top: $odoo-handle-border-width; - right: $odoo-handle-border-width; + top: $o-we-handle-border-width; + right: $o-we-handle-border-width; } // HANDLES > .o_handles { - $o-handles-offset-to-hide: 10000px; - $o-handless-accent-color: #00e2ff; - @include o-position-absolute(-$o-handles-offset-to-hide, 0, auto, 0); + @include o-position-absolute(-$o-we-handles-offset-to-hide, 0, auto, 0); &:hover > .o_handle { - background-color: rgba($o-handless-accent-color, 0.05); + background-color: rgba($o-we-handles-accent-color, 0.05); } > .o_handle { - $o-handle-btn-size: 18px; position: relative; - border: 0 solid $o-handless-accent-color; + border: 0 solid $o-we-handles-accent-color; @include o-transition(background, 300ms); &:hover, &.o_active { - background-color: rgba($o-handless-accent-color, 0.2); + background-color: rgba($o-we-handles-accent-color, 0.2); &:before { content: ''; @@ -574,7 +559,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { width: 1px; height: 100%; margin-left: -1px; - background-color: rgba($o-handless-accent-color, 0.5); + background-color: rgba($o-we-handles-accent-color, 0.5); } &.w:before { @@ -584,20 +569,20 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &:after { - border-color: darken($o-handless-accent-color, 10%); - background-color: darken($o-handless-accent-color, 20%); + border-color: darken($o-we-handles-accent-color, 10%); + background-color: darken($o-we-handles-accent-color, 20%); } } &:after { display: block; - width: $o-handle-btn-size; - height: $o-handle-btn-size; - border: solid 1px darken($o-handless-accent-color, 10%); - line-height: $o-handle-btn-size - 2; + width: $o-we-handles-btn-size; + height: $o-we-handles-btn-size; + border: solid 1px darken($o-we-handles-accent-color, 10%); + line-height: $o-we-handles-btn-size - 2; font-size: 14px; font-family: FontAwesome; - background-color: darken($o-handless-accent-color, 20%); + background-color: darken($o-we-handles-accent-color, 20%); color: white; } &.w:after, &.e:after { @@ -625,46 +610,46 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &.w { - @include o-position-absolute($o-handles-offset-to-hide, auto, -$o-handles-offset-to-hide, 0); - width: $odoo-handle-edge-size; - border-width: $odoo-handle-border-width; + @include o-position-absolute($o-we-handles-offset-to-hide, auto, -$o-we-handles-offset-to-hide, 0); + width: $o-we-handle-edge-size; + border-width: $o-we-handle-border-width; border-right-width: 0; cursor: e-resize; &:after { @include o-position-absolute($top: 50%, $left: 40%); - margin-top: -$o-handle-btn-size/2; + margin-top: -$o-we-handles-btn-size/2; } } &.e { - @include o-position-absolute($o-handles-offset-to-hide, 0, -$o-handles-offset-to-hide, auto); - width: $odoo-handle-edge-size; - border-right-width: $odoo-handle-border-width; + @include o-position-absolute($o-we-handles-offset-to-hide, 0, -$o-we-handles-offset-to-hide, auto); + width: $o-we-handle-edge-size; + border-right-width: $o-we-handle-border-width; cursor: w-resize; &:after { @include o-position-absolute($top: 50%, $right: 40%); - margin-top: -$o-handle-btn-size/2; + margin-top: -$o-we-handles-btn-size/2; } } &.n { - @include o-position-absolute($o-handles-offset-to-hide, 0, auto, 0); - border-top-width: $odoo-handle-border-width; + @include o-position-absolute($o-we-handles-offset-to-hide, 0, auto, 0); + border-top-width: $o-we-handle-border-width; cursor: ns-resize; &:after { @include o-position-absolute($left: 50%, $top: 40%); - margin-left: -$o-handle-btn-size/2; + margin-left: -$o-we-handles-btn-size/2; } } &.s { - @include o-position-absolute(auto, 0, -$o-handles-offset-to-hide, 0); - border-bottom-width: $odoo-handle-border-width; + @include o-position-absolute(auto, 0, -$o-we-handles-offset-to-hide, 0); + border-bottom-width: $o-we-handle-border-width; cursor: ns-resize; &:after { @include o-position-absolute($left: 50%, $bottom: 40%); - margin-left: -$o-handle-btn-size/2; + margin-left: -$o-we-handles-btn-size/2; } } @@ -701,7 +686,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // NOTE EDITOR .note-popover .popover { - height: $odoo-navbar-height; + height: $o-navbar-height; top: 0 !important; left: 0 !important; padding: 0; @@ -714,7 +699,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { box-shadow: none; .popover-content { - height: $odoo-navbar-height; + height: $o-navbar-height; white-space: nowrap; font-family: $o-we-font-family; @@ -723,7 +708,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } .btn { - height: $odoo-navbar-height; + height: $o-navbar-height; border: none; border-radius: 0; padding: $padding-base-vertical $padding-base-horizontal; // force this because of themes @@ -1035,7 +1020,7 @@ table.colorpicker { // ENTER IN EDIT MODE body.editor_enable { - padding-top: $odoo-navbar-height!important; + padding-top: $o-navbar-height!important; #web_editor-top-edit { background-color: $o-we-color-dark; @@ -1055,7 +1040,7 @@ body.editor_enable { } #web_editor_inside_iframe { - background-color: $odoo-brand-secondary; + background-color: $o-brand-secondary; #wrapwrap { position: relative; @@ -1106,14 +1091,11 @@ body.editor_enable { } } @keyframes inputHighlighter { - from { background: $odoo-brand-optional; } + from { background: $o-brand-optional; } to { width: 0; background: transparent; } } // INPUTS -$o-switch-size: 2ex; -$o-switch-inactive-color: $gray-lighter; - .o_switch { @include o-flex-display; @include o-align-items(center); @@ -1124,11 +1106,11 @@ $o-switch-inactive-color: $gray-lighter; display: none; + span { - background-color: $o-switch-inactive-color; - box-shadow: inset 0 0 0px 1px darken($o-switch-inactive-color,10%); + background-color: $o-we-switch-inactive-color; + box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color,10%); border-radius: 100rem; - height: $o-switch-size; - width: $o-switch-size * 1.8; + height: $o-we-switch-size; + width: $o-we-switch-size * 1.8; margin-right: 0.5em; display: inline-block; @include transition(all 0.3s $o-we-md-ease); @@ -1137,13 +1119,13 @@ $o-switch-inactive-color: $gray-lighter; content: ""; background: $o-we-color-paper; display: block; - width: $o-switch-size - 0.2; - height: $o-switch-size - 0.2; + width: $o-we-switch-size - 0.2; + height: $o-we-switch-size - 0.2; margin-top: 0.1ex; margin-left: 0.1ex; border-radius: 100rem; @include transition(all 0.3s $o-we-md-ease); - box-shadow: 0 1px 1px darken($o-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-switch-inactive-color,10%); + box-shadow: 0 1px 1px darken($o-we-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color,10%); } } @@ -1152,7 +1134,7 @@ $o-switch-inactive-color: $gray-lighter; @include o-linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%)); &:after { - margin-left: ($o-switch-size*1.8 - $o-switch-size) + 0.1; + margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1; } } } @@ -1248,8 +1230,7 @@ $o-switch-inactive-color: $gray-lighter; // ACE EDITOR .o_ace_view_editor { - $o-ace-color: #2F3129; - background: $o-ace-color; + background: $o-we-ace-color; color: white; @include o-flex-display; @include o-flex-flow(column, nowrap); @@ -1289,7 +1270,7 @@ $o-switch-inactive-color: $gray-lighter; #ace-view-id { @include o-flex(0, 0, auto); padding: $grid-gutter-width/4 $grid-gutter-width/2; - background-color: lighten($o-ace-color, 10%); + background-color: lighten($o-we-ace-color, 10%); } #ace-view-editor { @mixin ace-line-error-mixin { @@ -1383,10 +1364,10 @@ body .modal { } .o_existing_attachment_cell { - $odoo-border-image: 2px; + $o-border-image: 2px; .o_existing_attachment_remove { - @include o-position-absolute($odoo-border-image, 15px + $odoo-border-image); + @include o-position-absolute($o-border-image, 15px + $o-border-image); padding: 3px 5px 5px 5px; background-color: rgba(white, 0.8); text-shadow: 0 0 1px white; @@ -1400,7 +1381,7 @@ body .modal { } } .o_image { - border: $odoo-border-image solid transparent; + border: $o-border-image solid transparent; cursor: pointer; @include o-transition(opacity, 400ms); @@ -1415,8 +1396,8 @@ body .modal { } } &.o_selected .o_image { - border-color: $odoo-brand-primary; - box-shadow: 0px 0px 2px 2px $odoo-brand-secondary; + border-color: $o-brand-primary; + box-shadow: 0px 0px 2px 2px $o-brand-secondary; } &:hover .o_existing_attachment_remove { opacity: 1; @@ -1606,7 +1587,7 @@ body .modal { display: block; width: 100%; height: 1px; - background: fadeOut(lighten($odoo-brand-optional, 30%), 50%); + background: fadeOut(lighten($o-brand-optional, 30%), 50%); pointer-events: none; &.grid-2 { top: 66.66% diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 08c67c9c7f6..2d36b3e9756 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -2,27 +2,45 @@ /// This files regroups the variables and mixins which are specific to the editor. /// -$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; +$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !default; -$o-we-color-dark: #2c2c36; -$o-we-color-darker: darken($o-we-color-dark, 2%); -$o-we-color-divider: #33363e; -$o-we-color-light: #4e525b; -$o-we-color-normal: #50545d; -$o-we-color-paper: #fcfcfc; -$o-we-color-text-normal: #999999; -$o-we-color-text-light: #d4d5d7; -$o-we-color-danger: #e6586c; -$o-we-color-warning: #f0ad4e; -$o-we-color-success: #40ad67; -$o-we-color-info: #6999a8; +$o-we-color-dark: #2c2c36 !default; +$o-we-color-darker: darken($o-we-color-dark, 2%) !default; +$o-we-color-divider: #33363e !default; +$o-we-color-light: #4e525b !default; +$o-we-color-normal: #50545d !default; +$o-we-color-paper: #fcfcfc !default; +$o-we-color-text-normal: #999999 !default; +$o-we-color-text-light: #d4d5d7 !default; +$o-we-color-danger: #e6586c !default; +$o-we-color-warning: #f0ad4e !default; +$o-we-color-success: #40ad67 !default; +$o-we-color-info: #6999a8 !default; -$o-we-sidebar-width: 210px; +$o-we-sidebar-width: 210px !default; -$o-we-tab-active-bg: #3D4048; +$o-we-tab-active-bg: #3D4048 !default; // Transitions -$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1); +$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default; + +// Editor +$o-we-dropzone-size: 40px !default; +$o-we-dropzone-border-width: 2px !default; +$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !default; + +$o-we-handle-edge-size: 1px !default; +$o-we-handle-border-width: 1px !default; +$o-we-handles-offset-to-hide: 10000px !default; +$o-we-handles-accent-color: #00e2ff !default; +$o-we-handles-btn-size: 18px !default; + +$o-we-overlay-option-size: 25px !default; + +$o-we-ace-color: #2F3129 !default; + +$o-we-switch-size: 2ex !default; +$o-we-switch-inactive-color: $o-we-color-paper !default; // ============ 'Preview' component Mixins =============== // Create a "preview" work-area to edit/customize specific elements @@ -68,7 +86,7 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1); @mixin o-w-preserve-links { a:not(.o_btn_preview) { - color: $odoo-brand-optional; + color: $o-brand-optional; &:focus, &:active, &:focus:active { outline: none!important; @@ -157,13 +175,13 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1); @include button-size(6px, 12px, 14px, 1.42857143, 0); &.btn-primary { - @include button-variant(white, $odoo-brand-optional, darken($odoo-brand-optional,5%)); + @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%)); } &.btn-default { @include button-variant($o-we-color-normal, white, $o-we-color-text-light); } &.btn-link { - @include button-variant($odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); } &.btn-success { @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%)); @@ -200,3 +218,44 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1); @include box-shadow(none); } } + +// Edition colors + +// Colors +$gray-white: #fff !default; + +$color-alpha: #1cc1a9 !default; +$color-beta: #875A7B !default; +$color-gamma: #BA3C3D !default; +$color-delta: #0D6759 !default; +$color-epsilon: #0B2E59 !default; + +// Greyscale transparent colours +$color-black-25: rgba(black, 0.25) !default; +$color-black-50: rgba(black, 0.5) !default; +$color-black-75: rgba(black, 0.75) !default; +$color-white-25: rgba(white, 0.25) !default; +$color-white-50: rgba(white, 0.5) !default; +$color-white-75: rgba(white, 0.75) !default; + +@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) { + .bg-#{$name} { + background-color: $color; + color: $complementary; + .text-muted { + color: rgba($complementary, 0.4); + } + } + body .text-#{$name} { // body to make the rules more important that bg-* ones + color: $content-color; + } +} +@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) { + .btn-#{$name} { + @include button-variant($complementary, $color, $border-color); + } +} + +// Translations +$o-we-content-to-translate-color: rgb(255, 255, 90) !default; +$o-we-translated-content-color: rgb(120, 215, 110) !default; diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml index 1f87db93fe7..3d7d36f18a9 100644 --- a/addons/web_editor/views/editor.xml +++ b/addons/web_editor/views/editor.xml @@ -52,8 +52,8 @@ <link rel="stylesheet" type="text/css" href="/web_editor/static/lib/summernote/src/css/summernote.css"/> </template> -<template id="_assets_helpers" inherit_id="web._assets_helpers"> - <xpath expr="link[last()]" position="after"> +<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables"> + <xpath expr="//link[last()]" position="after"> <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.variables.scss"/> </xpath> </template> diff --git a/addons/web_settings_dashboard/static/src/scss/dashboard.scss b/addons/web_settings_dashboard/static/src/scss/dashboard.scss index 3b3ea30d02a..4e9ee93a476 100644 --- a/addons/web_settings_dashboard/static/src/scss/dashboard.scss +++ b/addons/web_settings_dashboard/static/src/scss/dashboard.scss @@ -87,7 +87,7 @@ .o_web_settings_dashboard_progress_title { font-weight: bold; cursor: pointer; - color: $odoo-brand-optional; + color: $o-brand-optional; } } } diff --git a/addons/web_tour/static/src/scss/tip.scss b/addons/web_tour/static/src/scss/tip.scss index f09ed1852ce..2cb72fcd9f8 100644 --- a/addons/web_tour/static/src/scss/tip.scss +++ b/addons/web_tour/static/src/scss/tip.scss @@ -26,7 +26,7 @@ } .o_tooltip { - $o-tip-color: $odoo-brand-primary; + $o-tip-color: $o-brand-primary; $o-tip-size: 24px; $o-tip-border-width: 2px; $o-tip-arrow-length: 10px; diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss index 254e90f3957..373af1ec647 100644 --- a/addons/website/static/src/scss/website.backend.scss +++ b/addons/website/static/src/scss/website.backend.scss @@ -5,17 +5,17 @@ background-color: #ececec; div.o_box { @include clearfix; - color: $odoo-main-color-muted; - background-color: $odoo-view-background-color; + color: $o-main-color-muted; + background-color: $o-view-background-color; background-size: cover; - margin-top: $odoo-horizontal-padding; + margin-top: $o-horizontal-padding; position: static; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); h2, h4 { text-transform: uppercase; margin-top: 0; - color: $odoo-brand-primary; + color: $o-brand-primary; } h4 { margin: 0 0 0 8px; } @@ -46,7 +46,7 @@ th { text-transform: uppercase; - color: $odoo-main-text-color; + color: $o-main-text-color; border-top-width: 0px; } td, th { @@ -67,7 +67,7 @@ /*------------------------------------------*/ .gapi-analytics-data-chart svg g path, svg [class*="nv-series-"] { - stroke: $odoo-main-color-muted !important; + stroke: $o-main-color-muted !important; } svg { @@ -86,19 +86,19 @@ .nv-series-0 { stroke-width: 3 !important; .nv-point { - stroke: $odoo-brand-optional; + stroke: $o-brand-optional; stroke-opacity: 1 !important; &.hover { - stroke: darken($odoo-brand-optional, 10%); + stroke: darken($o-brand-optional, 10%); } } } .nv-series-1 { .nv-point { - stroke: $odoo-main-color-muted !important; + stroke: $o-main-color-muted !important; stroke-opacity: 1 !important; &.hover { - stroke: darken($odoo-main-color-muted, 10%); + stroke: darken($o-main-color-muted, 10%); } } } @@ -114,10 +114,10 @@ border: none; } tr:first-child .legend-color-guide > div { - background-color: $odoo-brand-optional !important; + background-color: $o-brand-optional !important; } tr:last-child .legend-color-guide > div { - background-color: darken($odoo-brand-lightsecondary, 10%) !important; + background-color: darken($o-brand-lightsecondary, 10%) !important; } } } @@ -141,22 +141,22 @@ .o_inner_box { padding-top: 10px; text-align: center; - border: 1px solid $odoo-view-background-color; + border: 1px solid $o-view-background-color; height: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: white; - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; &:hover { - background-color: darken($odoo-brand-optional, 10%); + background-color: darken($o-brand-optional, 10%); } &.o_primary { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; &:hover { - background-color: darken($odoo-brand-primary, 10%); + background-color: darken($o-brand-primary, 10%); } } .o_highlight { @@ -167,10 +167,10 @@ .o_graph_sales { .o_legend0 { - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; } .o_legend1 { - background-color: $odoo-main-color-muted; + background-color: $o-main-color-muted; } } @@ -249,24 +249,24 @@ @keyframes increase { 10% { - background-color: lighten($odoo-brand-optional, 30%); - border-color: $odoo-brand-optional; - color: $odoo-brand-optional; + background-color: lighten($o-brand-optional, 30%); + border-color: $o-brand-optional; + color: $o-brand-optional; } } @keyframes decrease { 10% { - background-color: lighten($odoo-brand-optional, 30%); - border-color: $odoo-brand-optional; - color: $odoo-brand-optional; + background-color: lighten($o-brand-optional, 30%); + border-color: $o-brand-optional; + color: $o-brand-optional; } } } tr.o_product_template { cursor: pointer; - color: $odoo-main-text-color; + color: $o-main-text-color; } .o_loader { diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index 2bc24d4b69d..c315e493e08 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -22,7 +22,7 @@ .o_editable { &:not(:empty), &[data-oe-type] { &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover { - box-shadow: $odoo-brand-primary 0 0 5px 2px inset; + box-shadow: $o-brand-primary 0 0 5px 2px inset; } } &:focus, &[data-oe-type] { diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index ee2fb57228f..aa267460bc2 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -515,7 +515,7 @@ div.carousel { } } #oe_main_menu_navbar + #wrapwrap .o_header_affix { - top: $odoo-navbar-height; + top: $o-navbar-height; } .navbar .o_extra_menu_items.open > ul { diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 5ad2f5ba40f..a87be36a855 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -5,7 +5,7 @@ // LAYOUTING body.o_connected_user { - padding-top: $odoo-navbar-height!important; + padding-top: $o-navbar-height!important; } // MAIN MENU STYLE (added above navbar.scss) @@ -15,7 +15,7 @@ body.o_connected_user { z-index: $zindex-modal - 10; font-family: $o-we-font-family; - font-size: $odoo-font-size-base; + font-size: $o-font-size-base; a:hover, a:focus { text-decoration: none; } @@ -45,7 +45,7 @@ body.o_connected_user { } &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic { - @include button-variant(white, $odoo-brand-optional, $odoo-brand-optional); + @include button-variant(white, $o-brand-optional, $o-brand-optional); } > .fa-plus, > .fa-pencil { @@ -352,7 +352,7 @@ body .modal { // ADD NEW PAGE MODAL #o_new_content_menu_choices { - @include o-position-absolute($odoo-navbar-height, 0, 0, 0); + @include o-position-absolute($o-navbar-height, 0, 0, 0); position: fixed; @include o-flex-display; @include o-justify-content(center); @@ -436,7 +436,7 @@ body .modal { overflow: visible; display: block; .modal-dialog { - @include o-position-absolute($odoo-navbar-height + 10, 10px); + @include o-position-absolute($o-navbar-height + 10, 10px); width: auto; margin: 0; font-family: Roboto; @@ -482,7 +482,7 @@ body .modal { @include o-w-preserve-btn; @include o-w-preserve-forms; - @include o-position-absolute($odoo-navbar-height, 0, 0); + @include o-position-absolute($o-navbar-height, 0, 0); position: fixed; z-index: 1001; } @@ -523,15 +523,15 @@ body .modal { } #edit_website_pages { th { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; } td > a.fa { margin-left: 5px; - color: $odoo-brand-primary; + color: $o-brand-primary; } .fa-check, .fa-eye-slash { - color: $odoo-brand-optional; + color: $o-brand-optional; } } diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 7be2b375e85..a0d404be395 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -574,7 +574,7 @@ <template id="default_less"> <style type="text/less"> div#wrap div > h1 { - color: @odoo-brand-primary; + color: @o-brand-primary; } </style> </template> diff --git a/addons/website_livechat/views/website_livechat.xml b/addons/website_livechat/views/website_livechat.xml index 25592403b9c..265b8741cd9 100644 --- a/addons/website_livechat/views/website_livechat.xml +++ b/addons/website_livechat/views/website_livechat.xml @@ -13,7 +13,6 @@ <script type="text/javascript" src="/mail/static/src/js/document_viewer.js"></script> <script type="text/javascript" src="/mail/static/src/js/thread.js"></script> <script type="text/javascript" src="/im_livechat/static/src/js/im_livechat.js"></script> - <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/variables.scss"></link> <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/chat_window.scss"></link> <link rel="stylesheet" type="text/scss" href="/mail/static/src/scss/thread.scss"></link> <link rel="stylesheet" type="text/scss" href="/im_livechat/static/src/scss/im_livechat.scss"/> diff --git a/addons/website_quote/static/src/scss/website_quotation.scss b/addons/website_quote/static/src/scss/website_quotation.scss index c372164a5df..26ba0eaef64 100644 --- a/addons/website_quote/static/src/scss/website_quotation.scss +++ b/addons/website_quote/static/src/scss/website_quotation.scss @@ -1,6 +1,6 @@ .o_website_quote{ h1[id],h2[id]{ margin-top: 0px; - padding-top: $odoo-navbar-height; + padding-top: $o-navbar-height; } } diff --git a/addons/website_rating/static/src/scss/website_rating.scss b/addons/website_rating/static/src/scss/website_rating.scss index b44da995762..23befcee851 100644 --- a/addons/website_rating/static/src/scss/website_rating.scss +++ b/addons/website_rating/static/src/scss/website_rating.scss @@ -1,7 +1,7 @@ /* static stars */ -$rating-star-color: #FACC2E; +$o-w-rating-star-color: #FACC2E; .o_website_rating_static{ - color: $rating-star-color; + color: $o-w-rating-star-color; } .o_website_rating_card_container { @@ -29,7 +29,7 @@ $rating-star-color: #FACC2E; margin-right: 5px; } .o_rating_progressbar{ - background-color: $rating-star-color; + background-color: $o-w-rating-star-color; } } .o_website_rating_table_percent { diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss index 308a3fc56ef..f6b3cbcaa28 100644 --- a/addons/website_sale/static/src/scss/website_sale.scss +++ b/addons/website_sale/static/src/scss/website_sale.scss @@ -773,7 +773,7 @@ td.noborder { } .border_primary { - border: 1px solid $odoo-brand-primary; + border: 1px solid $o-brand-primary; } .js_change_shipping { diff --git a/addons/website_sale/static/src/scss/website_sale_dashboard.scss b/addons/website_sale/static/src/scss/website_sale_dashboard.scss index 35bb6a0469c..00549094a6f 100644 --- a/addons/website_sale/static/src/scss/website_sale_dashboard.scss +++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss @@ -13,7 +13,7 @@ opacity: 0.2; } .o_demo_message { - color: $odoo-main-color-muted; + color: $o-main-color-muted; width: 100%; @include o-position-absolute($left: 0, $top: 12%); @include o-flex-display; @@ -29,13 +29,13 @@ overflow: hidden; text-overflow: ellipsis; a { - color: darken($odoo-brand-lightsecondary, 40%); + color: darken($o-brand-lightsecondary, 40%); } &:hover { - background-color: $odoo-brand-lightsecondary; + background-color: $o-brand-lightsecondary; } .o_highlight { - color: $odoo-brand-optional; + color: $o-brand-optional; font-size: 20px; font-weight: bold; } @@ -50,7 +50,7 @@ overflow: hidden; text-overflow: ellipsis; margin: 10px 0px; - color: darken($odoo-brand-lightsecondary, 40%); + color: darken($o-brand-lightsecondary, 40%); .o_highlight { font-size: 20px; font-weight: bold; diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss index 6cf36c1c4a0..2bc4681d451 100644 --- a/addons/website_slides/static/src/scss/website_slides.scss +++ b/addons/website_slides/static/src/scss/website_slides.scss @@ -1,16 +1,15 @@ -@mixin define-color-if-not-defined { - $nav-tabs-border-color: #dddddd; - $brand-info: #dddddd; - $body-bg: #FFFFFF; - $brand-primary: #428bca; - $link-color: $brand-primary; - $panel-footer-bg: #f5f5f5; - $nav-link-hover-bg: #FFFFFF; - $navbar-default-link-color: #777; - $navbar-default-link-hover-color: #333; - $navbar-default-bg: #f8f8f8; - $MAX-Z-INDEX : 2147483647; -} @include define-color-if-not-defined; +// FIXME may be useless (check initial code here: https://github.com/odoo/odoo/blob/51be5bbfb38db784cb3406877cc0e8806b1bf55a/addons/website_slides/static/src/less/website_slides.less#L1) +$nav-tabs-border-color: #dddddd !default; +$brand-info: #dddddd !default; +$body-bg: #FFFFFF !default; +$brand-primary: #428bca !default; +$link-color: $brand-primary !default; +$panel-footer-bg: #f5f5f5 !default; +$nav-link-hover-bg: #FFFFFF !default; +$navbar-default-link-color: #777 !default; +$navbar-default-link-hover-color: #333 !default; +$navbar-default-bg: #f8f8f8 !default; +$MAX-Z-INDEX : 2147483647 !default; @mixin top-covered-image { object-fit: cover; diff --git a/addons/website_theme_install/static/src/scss/website_theme_install.scss b/addons/website_theme_install/static/src/scss/website_theme_install.scss index bf278d0886e..47399f98ea6 100644 --- a/addons/website_theme_install/static/src/scss/website_theme_install.scss +++ b/addons/website_theme_install/static/src/scss/website_theme_install.scss @@ -1,6 +1,6 @@ -$o-theme-kanban-gray: #fcfcfc; .o_kanban_view.o_theme_kanban { + $o-theme-kanban-gray: #fcfcfc; background-color: $o-theme-kanban-gray; /// Un-grouped Layout (default) @@ -9,8 +9,8 @@ $o-theme-kanban-gray: #fcfcfc; margin: 0 0 0 ($o-kanban-record-margin - 2 * $grid-gutter-width); @media (max-width: $screen-xs-max) { - padding-left: $odoo-horizontal-padding - $o-kanban-record-margin; - padding-right: $odoo-horizontal-padding; + padding-left: $o-horizontal-padding - $o-kanban-record-margin; + padding-right: $o-horizontal-padding; } .o_kanban_record { @@ -35,7 +35,7 @@ $o-theme-kanban-gray: #fcfcfc; } &.o_theme_installed .o_theme_preview_top { - border-color: $odoo-brand-optional; + border-color: $o-brand-optional; > .fa-check-circle { @include o-position-absolute(10px, 10px); |