From 6e4db7d13a926845bf82f5b035afede42d6d5a89 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 12 Mar 2018 16:24:31 +0100
Subject: [PATCH] [REF] *: review scss variables handling
Unlike LESS, SCSS variables are not lazy loaded. Our system has thus
to be updated. This commit creates new templates which are t-called
in assets bundles (to replace the old less_helpers template):
- web._assets_utils: regroups the mixins and functions which *can*
(and so should) be available in every asset bundle
- web._assets_primary_variables: regroups the variables (or mixins
used as variables) which *can* (and so should) be available in
every asset bundle
- web._assets_secondary_variables: same as above but provides an
environnement where all the 'primary' ones are accessible. This is
for example useful to handle the community/enterprise split:
// Community primary variables
$o-pink-color: pink; // enterprise color
$o-brand-primary: blue;
// Enterprise primary variables
$o-brand-primary: $o-pink-color;
// Community secondary variables
$o-my-darker-primary: darken($o-brand-primary, 5%);
=> If there was only one variable template, enterprise edition would
have been able to define its primary color at the end but the
darker primary would not have been updated. Using the "!default"
system and putting enterprise definition above would not have
solved the problem as the $o-pink-color would not have been
accessible.
- web._assets_backend_helpers: regroups the variables, mixins and
functions which *can* (and so should) be available in the backend
asset bundle only. This is especially (only?) useful for bootstrap
variables overriddes.
- web._assets_frontend_helpers: regroups the variables, mixins and
functions which *can* (and so should) be available in the frontend
asset bundle only. This is especially (only?) useful for bootstrap
variables overriddes.
Note: bootstrap variables are not accessible in any of those anymore.
If you have variables that should depend on bootstrap, you have 3
solutions:
- Find another way: your variable is probably useless, use bootstrap
variables directly or create a variable that will influence the
value of bootstrap variables. E.g. instead of declaring:
`$myvar: $bootstrapvar * 3`
and using $myvar alone, declare:
`$myvar: 3` and use `$myvar * $bootstrapvar` where needed.
- Declare a copy of the bootstrap variable and use that one. In that
case, you should also force-set the real bootstrap one to be sure
they match (this should be done in appropriate templates mentioned
above). E.g.
```
$o-boostrapvar: 5;
...
$boostrapvar: $o-bootstrapvar;
```
- Set your variable to null and set it to your bootstrap expression
in the file you will need it (where bootstrap variables are accessible)
without forgetting to add the !default flag to allow overriddes.
```
$myvar: null;
...
$myvar: $bootstrapvar * 5 !default;
```
This commit also partly changes the variable names to follow the
convention:
$o-<app_id>-<name> where 'app_id' is the current's app name or a
meaningful unique identifier ("theme" for all themes for example, as
no multiple themes can be installed).
---
.../static/src/scss/account_dashboard.scss | 10 +-
.../src/scss/account_journal_dashboard.scss | 22 +-
.../src/scss/account_reconciliation.scss | 28 +-
addons/account/static/src/scss/variables.scss | 5 +
addons/account/views/account.xml | 6 +
addons/calendar/static/src/scss/calendar.scss | 4 +-
addons/event/static/src/scss/event.scss | 2 +-
.../static/src/scss/google_calendar.scss | 2 +-
.../static/src/scss/hr_attendance.scss | 2 +-
.../static/src/scss/hr_org_chart.scss | 88 ++---
.../static/src/scss/variables.scss | 14 +
addons/hr_org_chart/views/hr_templates.xml | 6 +
.../static/src/scss/copy_clipboard.scss | 2 +-
.../src/scss/im_livechat_bootstrap.scss | 11 +-
.../views/im_livechat_channel_templates.xml | 1 -
addons/lunch/static/src/scss/lunch.scss | 2 +-
addons/mail/static/src/scss/chat_window.scss | 25 +-
addons/mail/static/src/scss/chatter.scss | 8 +-
addons/mail/static/src/scss/composer.scss | 14 +-
addons/mail/static/src/scss/discuss.scss | 45 ++-
.../static/src/scss/extended_chat_window.scss | 2 +-
addons/mail/static/src/scss/followers.scss | 8 +-
.../mail/static/src/scss/mail_activity.scss | 4 +-
addons/mail/static/src/scss/systray.scss | 10 +-
addons/mail/static/src/scss/thread.scss | 20 +-
addons/mail/static/src/scss/variables.scss | 17 +-
addons/mail/views/mail_templates.xml | 7 +-
.../static/src/scss/mass_mailing.ui.scss | 14 +-
.../mrp/static/src/scss/mrp_bom_report.scss | 2 +-
addons/portal/static/src/scss/portal.scss | 2 +-
.../static/src/scss/project_dashboard.scss | 2 +-
.../static/src/scss/sale_timesheet.scss | 6 +-
.../static/src/scss/sales_team_dashboard.scss | 5 +-
.../src/scss/stock_traceability_report.scss | 6 +-
addons/survey/views/survey_templates.xml | 3 +-
addons/web/static/src/scss/base_settings.scss | 20 +-
.../static/src/scss/bootstrap_overridden.scss | 118 ++-----
.../scss/bootstrap_overridden_frontend.scss | 0
addons/web/static/src/scss/control_panel.scss | 9 +-
addons/web/static/src/scss/data_export.scss | 6 +-
addons/web/static/src/scss/datepicker.scss | 14 +-
.../web/static/src/scss/domain_selector.scss | 6 +-
addons/web/static/src/scss/dropdown.scss | 8 +-
.../web/static/src/scss/dropdown_extra.scss | 7 +-
addons/web/static/src/scss/fields.scss | 36 +-
addons/web/static/src/scss/fields_extra.scss | 2 +-
addons/web/static/src/scss/form_view.scss | 78 ++---
.../web/static/src/scss/form_view_extra.scss | 12 +-
addons/web/static/src/scss/graph_view.scss | 2 +-
.../src/scss/kanban_column_progressbar.scss | 7 +-
.../web/static/src/scss/kanban_dashboard.scss | 173 ----------
.../src/scss/kanban_examples_dialog.scss | 6 +-
addons/web/static/src/scss/kanban_view.scss | 6 +-
.../static/src/scss/kanban_view_mobile.scss | 4 +-
.../static/src/scss/layout_background.scss | 12 +-
addons/web/static/src/scss/layout_clean.scss | 18 +-
addons/web/static/src/scss/list_view.scss | 19 +-
.../static/src/scss/model_field_selector.scss | 4 +-
addons/web/static/src/scss/navbar.scss | 46 +--
addons/web/static/src/scss/pivot_view.scss | 10 +-
.../static/src/scss/primary_variables.scss | 92 +++++
addons/web/static/src/scss/progress_bar.scss | 6 +-
addons/web/static/src/scss/rainbow.scss | 12 +-
addons/web/static/src/scss/search_view.scss | 6 +-
.../static/src/scss/search_view_extra.scss | 4 +-
.../static/src/scss/secondary_variables.scss | 43 +++
addons/web/static/src/scss/tooltip.scss | 16 +-
addons/web/static/src/scss/utils.scss | 322 ++++++++++++++----
addons/web/static/src/scss/variables.scss | 82 -----
addons/web/static/src/scss/views.scss | 4 +-
addons/web/static/src/scss/web_calendar.scss | 48 ++-
addons/web/static/src/scss/webclient.scss | 12 +-
.../web/static/src/scss/webclient_extra.scss | 9 +-
.../web/static/src/scss/webclient_layout.scss | 13 +-
addons/web/views/webclient_templates.xml | 48 ++-
.../static/src/scss/web_editor.common.scss | 35 --
.../static/src/scss/web_editor.ui.scss | 161 ++++-----
.../static/src/scss/web_editor.variables.scss | 97 ++++--
addons/web_editor/views/editor.xml | 4 +-
.../static/src/scss/dashboard.scss | 2 +-
addons/web_tour/static/src/scss/tip.scss | 2 +-
.../static/src/scss/website.backend.scss | 52 +--
.../static/src/scss/website.edit_mode.scss | 2 +-
addons/website/static/src/scss/website.scss | 2 +-
.../website/static/src/scss/website.ui.scss | 18 +-
addons/website/views/website_templates.xml | 2 +-
.../views/website_livechat.xml | 1 -
.../static/src/scss/website_quotation.scss | 2 +-
.../static/src/scss/website_rating.scss | 6 +-
.../static/src/scss/website_sale.scss | 2 +-
.../src/scss/website_sale_dashboard.scss | 10 +-
.../static/src/scss/website_slides.scss | 25 +-
.../src/scss/website_theme_install.scss | 8 +-
93 files changed, 1095 insertions(+), 1081 deletions(-)
create mode 100644 addons/account/static/src/scss/variables.scss
create mode 100644 addons/hr_org_chart/static/src/scss/variables.scss
create mode 100644 addons/web/static/src/scss/bootstrap_overridden_frontend.scss
create mode 100644 addons/web/static/src/scss/primary_variables.scss
create mode 100644 addons/web/static/src/scss/secondary_variables.scss
delete mode 100644 addons/web/static/src/scss/variables.scss
diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss
index de562759e11d..938bc058af27 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 e068040784d6..1b87a6363a62 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 5d3e8ec38109..204337c58084 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 000000000000..b83890b01a14
--- /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 45ca15f14bd9..d8153c828714 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 defbd1efbd6d..a74eec477dba 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 df173a9ab709..46cf2e629ccf 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 2f7346ec29cc..1ee8feef473d 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 8473920ea659..d54b105ca1c4 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 c1b2f4b7d51e..e211654d5e02 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 000000000000..9abf85776b3f
--- /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 50b6087e4ecb..b7ed3215ae82 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 db206941685c..13bbef7b2564 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 b9d31dc05b86..18ab6c31ef80 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 54c7c7319f24..e85293c943ae 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 2e4fc9b22a53..9e36f20dbd89 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 8d43b2b9013f..93ab8248b6b4 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 ba863a5c6643..314eb9b8bacc 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 b19cde9fb2c7..477a7e536e17 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 58473d6ad405..de129eaee4cf 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 9e0174654b1b..774a37c6120b 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 5b7ff2b886f4..573f13e35b20 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 58f00c1f4e52..f835275e8733 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 c06bde1d3f13..fd799cb9cc7d 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 4a2edb68913a..0529238a36e8 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 ce498f2d03e6..c3086ce579d4 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 9c1cb7cddf5b..af2bc8b3b75b 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 0854637a003c..eaac6c4d2dd6 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 b72e7697a895..095d6e05846e 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 a34693ef5ac3..9eeb6a538b5d 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 50cbb7b4ac95..919da241023b 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 0e2caa12f72f..00d16e8e3250 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 ac72624b83a8..a57003b8285d 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 0d144dec6dce..7480521026f1 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 61eb600204c9..a8f0574b68a9 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 7904e6143e77..7cd25c7e5789 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 9a3642314156..9701ead0539d 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 000000000000..e69de29bb2d1
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 4174db62c6a8..447a1a587cc7 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 3ce97ea1c8b0..aa690cfdb743 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 d8650b6b409d..d8d4ba1d5204 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 1fde477164d4..6755bed49e91 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 ed979ae3a008..d0bfd1d2586a 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 d15496fe0c94..c14144e02d34 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 f28e3ba349ce..04c81dab96cb 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 dd441c07710d..7e45291305f5 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 c5e0207022d9..e4dfdca3811c 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 f401ecdda561..29c2512c1ab7 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 62e94e926ce6..4666d68ae619 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 9a54bbd80671..2cb35d33a2e3 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 791b582efd1e..3f3b2185b58d 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 2a27d2500b91..a42962ed8f0d 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 0f7432cfae48..de9ea9a8411c 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 ebb5db45457f..ed4e6ad84364 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 b51cff845997..e23b2585b505 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 190e5c6862a9..ecbdb02153fd 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 2c69f00e429d..36bee4439c6c 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 e75204f6098f..0eec3e60049c 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 8273c30182da..0c3d46945c9a 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 83b17a4e751f..3efddd8eab21 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 000000000000..b394aeafe269
--- /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 e4322845c455..8aaade8812f1 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 102b76f02f89..eb6f4ce3c595 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 5f40760c2c62..f2b0f7fd14f5 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 247b188c396f..d2098a5f9c3d 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 000000000000..8ab2d5bc322e
--- /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 79fb0b60fb74..765db1292da0 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 6db15976bd5f..f64d50fd2406 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -2,16 +2,6 @@
/// This file regroups the odoo mixins. They are available in every asset bundle.
///
-// ------------------------------------------------------------------
-// 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
// ------------------------------------------------------------------
@@ -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
@@ -120,33 +78,6 @@
background-size: $size;
}
-// ------------------------------------------------------------------
-// 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
// ------------------------------------------------------------------
@@ -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 201804880426..000000000000
--- 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 790cec7746d4..e3562026ffe4 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 257e81bc89a7..7091cbc3c98c 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 d4bd0b4e0f26..b0f38b37fea2 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 701cfe2a9b34..cc87e526f8d1 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 14892617b5e6..f811df488023 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 76a1e197373e..ae3b882e7649 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 577e2e568b33..2d760ff31937 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 5d848a481e47..0208a43509ca 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 08c67c9c7f67..2d36b3e97569 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 1f87db93fe7b..3d7d36f18a97 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 3b3ea30d02a8..4e9ee93a4764 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 f09ed1852cec..2cb72fcd9f85 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 254e90f39575..373af1ec6479 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 2bc24d4b69db..c315e493e08c 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 ee2fb57228f1..aa267460bc25 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 5ad2f5ba40fc..a87be36a855b 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 7be2b375e859..a0d404be3959 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 25592403b9c3..265b8741cd91 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 c372164a5df2..26ba0eaef64e 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 b44da995762d..23befcee851f 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 308a3fc56efd..f6b3cbcaa28e 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 35bb6a0469cb..00549094a6fd 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 6cf36c1c4a0b..2bc4681d451a 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 bf278d0886e0..47399f98ea6d 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);
--
GitLab