diff options
| author | qsm-odoo <qsm@odoo.com> | 2018-04-25 11:28:17 +0200 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2018-07-27 12:36:54 +0200 |
| commit | d8c217a67d9f5b371dd43b9cff8f04aa008c27b8 (patch) | |
| tree | a444ad4a9ef0d2f432ba8046bbbbd4ebfff7a2f3 /addons | |
| parent | cba48da7272e9201a85a012d728cb26f2f3a3f8b (diff) | |
[REF] *: BS4, review color system
Odoo used to declare two main colors: primary and optional (which are
purple and turquoise in enterprise). Those were respectively assigned
to the 'primary' bootstrap variable and the 'btn-primary' bootstrap
variable.
BS4, however, does not allow to have a different primary color for
buttons. Instead, the 'primary' color is used for all 'primary' related
components and utility classes, same as for all other colors. So, if we
want to keep our enterprise buttons green, our 'optional' colors had to
become our 'primary' color. The old odoo primary is then renamed to the
'odoo' color.
The palette of grays is now larger by default and is numbered from 100 to
900 alongside the $black and $white variables. The equivalence for older
variables and the way we used them is:
$gray-darker -> gray 900 (unused before)
$gray-dark -> gray 900
$gray -> gray 700
$gray-light -> gray 600
$gray-lighter-darker -> gray 400 (the old variable was created by us)
$gray-lighter-dark -> gray 300 (the old variable was created by us)
$gray-lighter -> gray 200
Fortunately, the 'lighter' variations we created fit well in the default
BS4 system ! Unfortunately, our $gray-lighter which carried the same
function as $gray-200 (see above) is very close to the new default
$gray-100 and quite distant from the new $gray-200. This will be handled
in the next commit.
Diffstat (limited to 'addons')
91 files changed, 718 insertions, 702 deletions
diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss index 531c1cbf06d..b93e2d35c55 100644 --- a/addons/account/static/src/scss/account_dashboard.scss +++ b/addons/account/static/src/scss/account_dashboard.scss @@ -35,26 +35,26 @@ font-weight: 500; .o_account_dashboard_index { - color: $gray-dark; + color: gray('900'); } &.o_action_done { - color: $gray-dark; - background-color: $gray-lighter; + color: gray('900'); + background-color: gray('200'); &:after { - border-left-color: $gray-lighter; + border-left-color: gray('200'); } .fa-check { - color: $brand-success; + color: theme-color('success'); } } &:last-of-type { margin-left: $o-horizontal-padding; padding-left: $o-horizontal-padding*.5; - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); } } } diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss index 1b87a6363a6..1bff7ba9057 100644 --- a/addons/account/static/src/scss/account_journal_dashboard.scss +++ b/addons/account/static/src/scss/account_journal_dashboard.scss @@ -58,7 +58,7 @@ } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: $o-brand-primary; + // stroke: $o-brand-odoo; line { display: none; @@ -72,13 +72,13 @@ g.nv-linesWrap { g.nv-group.nv-series-0 { fill-opacity: 0.3 !important; - fill: $o-brand-primary !important; - stroke: $o-brand-primary !important; + fill: $o-brand-odoo !important; + stroke: $o-brand-odoo !important; .nv-point { visibility: hidden; r: 3; - stroke: $o-brand-primary !important; + stroke: $o-brand-odoo !important; fill: white; stroke-width: 2; } @@ -99,11 +99,11 @@ g.nv-group.nv-series-0 { g.past { opacity: 0.5; - fill: $o-brand-primary !important; + fill: $o-brand-odoo !important; } g.future { opacity: 0.5; - fill: $o-brand-optional !important; + fill: $o-brand-primary !important; } } } diff --git a/addons/account/static/src/scss/account_reconciliation.scss b/addons/account/static/src/scss/account_reconciliation.scss index e80febc05bb..baae6a584f1 100644 --- a/addons/account/static/src/scss/account_reconciliation.scss +++ b/addons/account/static/src/scss/account_reconciliation.scss @@ -8,7 +8,7 @@ &.statement_name { @include o-text-overflow; &.editable:hover { - outline: 1px dashed $o-brand-optional; + outline: 1px dashed $o-brand-primary; outline-offset: -1px; cursor: pointer; } @@ -25,7 +25,7 @@ position: relative; display: inline-block; .progress-bar { - background-color: #7c7bad; + background-color: $o-community-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? } .progress-text { text-align: center; @@ -59,7 +59,7 @@ padding-right: 5px; } .do_partial_reconcile_true { - color: #7c7bad; + color: $o-community-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? padding-right: 5px; } .do_partial_reconcile_false { @@ -128,7 +128,7 @@ .cell_action { width: 15px; - color: $gray; + color: gray('700'); background: #fff; border: 0; text-align: center; diff --git a/addons/account_asset/static/src/scss/account_asset.scss b/addons/account_asset/static/src/scss/account_asset.scss index f80cb658718..bff97fa20d9 100644 --- a/addons/account_asset/static/src/scss/account_asset.scss +++ b/addons/account_asset/static/src/scss/account_asset.scss @@ -1,9 +1,9 @@ .o_web_client .o_deprec_lines_toggler { - color: $brand-danger; + color: theme-color('danger'); &.o_is_posted { - color: $brand-success; + color: theme-color('success'); } &.o_unposted { - color: $brand-warning; + color: theme-color('warning'); } } diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss index 49198688112..c54179dccd8 100644 --- a/addons/calendar/static/src/scss/calendar.scss +++ b/addons/calendar/static/src/scss/calendar.scss @@ -5,7 +5,7 @@ border-radius: 5px; &.accepted { - background-color: $brand-success; + background-color: theme-color('success'); } &.needsAction { @@ -13,7 +13,7 @@ } &.declined { - background-color: $brand-danger; + background-color: theme-color('danger'); } } @@ -71,10 +71,10 @@ } .o_accepted { - color: $brand-success; + color: theme-color('success'); } .o_declined { - color: $brand-danger; + color: theme-color('danger'); } } .o_meeting_filter { @@ -84,7 +84,7 @@ display: inline-block; vertical-align: top; &:hover { - color: $o-brand-optional; + color: $o-brand-primary; } &.o_meeting_bold { font-weight: bold; diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss index fcbdb009b65..563f70b6e21 100644 --- a/addons/event/static/src/scss/event.scss +++ b/addons/event/static/src/scss/event.scss @@ -10,7 +10,7 @@ flex: 1 1 25%; text-align: center; color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; padding: 8px; .o_day { diff --git a/addons/hr_attendance/static/src/scss/hr_attendance.scss b/addons/hr_attendance/static/src/scss/hr_attendance.scss index 5260fd99eb5..aadb78de52a 100644 --- a/addons/hr_attendance/static/src/scss/hr_attendance.scss +++ b/addons/hr_attendance/static/src/scss/hr_attendance.scss @@ -7,10 +7,10 @@ #oe_hr_attendance_status { color: $o-brand-secondary; &.oe_hr_attendance_status_green { - color: $brand-success; + color: theme-color('success'); } &.oe_hr_attendance_status_red { - color: $brand-danger; + color: theme-color('danger'); } } @@ -95,13 +95,13 @@ box-shadow: inset 0 -3px 0 fade-out(black, 0.7); &.btn-secondary:hover { - color: $o-brand-optional; + color: $o-brand-primary; } } .o_hr_attendance_back_button { .visible-xs{ - background: $gray-lighter; + background: gray('200'); margin: 0 -2em; .fa { @include o-position-absolute(0.75em); 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 ce1de55db0e..3d8b3e54933 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 @@ -25,7 +25,7 @@ border-left: 1px solid $o-hr-org-chart-border-color; .o_org_chart_title { - color: $gray-light + color: gray('600') } } } @@ -141,12 +141,12 @@ float: right; cursor: pointer; margin-right: 5px; - color: $gray-light; + color: gray('600'); background: $o-hr-org-chart-bg; - border: 1px solid $gray-light; + border: 1px solid gray('600'); &:hover { - color: $o-brand-optional; - border-color: $o-brand-optional; + color: $o-brand-primary; + border-color: $o-brand-primary; } &:focus { outline: none; @@ -157,7 +157,7 @@ display: block; line-height: 1.2; font-size: 11px; - color: lighten($gray-light, 15%); + color: lighten(gray('600'), 15%); } } @@ -183,7 +183,7 @@ &:hover { border-color: $o-hr-org-chart-entry-border-color; - color:$o-brand-optional; + color:$o-brand-primary; } } } @@ -198,21 +198,21 @@ display: block; .media-heading { - color: lighten($gray-light, 5%); + color: lighten(gray('600'), 5%); font-size: 13px; } } &:hover { .media-object { - box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-optional, 0.6); + box-shadow: 0 0 0 $o-hr-org-chart-entry-line-w*2 rgba($o-brand-primary, 0.6); } .media-body > a { .media-heading { - color: $o-brand-optional; + color: $o-brand-primary; } strong { - color: lighten($gray-light, 5%); + color: lighten(gray('600'), 5%); } } } @@ -231,7 +231,7 @@ width: $o-hr-org-chart-entry-pic-size; height: $o-hr-org-chart-entry-pic-size; margin: 0; - border: $o-hr-org-chart-entry-line-w*2 solid $o-brand-optional; + border: $o-hr-org-chart-entry-line-w*2 solid $o-brand-primary; box-shadow: inset 0 0 0 $o-hr-org-chart-entry-line-w*2 white; } 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 14751937d9a..f01d7259805 100644 --- a/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss +++ b/addons/im_livechat/static/src/scss/im_livechat_bootstrap.scss @@ -1,6 +1,6 @@ .text-muted { - color: $gray-light; + color: gray('600'); } .text-center { diff --git a/addons/im_support/static/src/scss/systray.scss b/addons/im_support/static/src/scss/systray.scss index eb82d2b559d..bee87733dfe 100644 --- a/addons/im_support/static/src/scss/systray.scss +++ b/addons/im_support/static/src/scss/systray.scss @@ -1,7 +1,7 @@ .o_mail_systray_item { .o_mail_systray_dropdown { .o_mail_systray_dropdown_bottom { - border-top: 1px solid $gray-lighter-darker; + border-top: 1px solid gray('400'); box-sizing: content-box; .o_preview_info { diff --git a/addons/mail/static/src/scss/abstract_thread_window.scss b/addons/mail/static/src/scss/abstract_thread_window.scss index 39de4fc9c51..02d41948f12 100644 --- a/addons/mail/static/src/scss/abstract_thread_window.scss +++ b/addons/mail/static/src/scss/abstract_thread_window.scss @@ -33,8 +33,8 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; color: white; 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: $o-brand-primary; + border-bottom: 1px solid gray('300'); + background-color: $o-brand-odoo; padding: 8px; @include media-breakpoint-down(sm) { @@ -97,7 +97,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; width: auto; height: 28px; color: white; - background-color: $gray-dark; + background-color: gray('900'); cursor: pointer; box-shadow: none; @@ -114,7 +114,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; .o_total_unread_counter { @include o-position-absolute(-10px, 0, auto, auto); - background-color: $o-brand-optional; + background-color: $o-brand-primary; padding: 0 2px; font-size: smaller; } @@ -134,7 +134,7 @@ $o-mail-thread-window-zindex: $zindex-modal + 1 !default; border-top: 1px solid white; } &:hover { - background-color: darken($o-brand-primary, 10%); + background-color: darken($o-brand-odoo, 10%); } } } diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss index 1a804bfd4ea..b870eb06c50 100644 --- a/addons/mail/static/src/scss/chatter.scss +++ b/addons/mail/static/src/scss/chatter.scss @@ -32,12 +32,12 @@ > .btn, > .o_followers{ border-radius: $border-radius-sm $border-radius-sm 0 0; border-width: 0 0 1px; - border-bottom-color: $gray-lighter-dark; + border-bottom-color: gray('300'); &.o_active { - color: $o-brand-primary; - background-color: $gray-lighter; - border-color: $gray-lighter-dark; + color: $o-brand-odoo; + background-color: gray('200'); + border-color: gray('300'); border-width: 1px 1px 0; } } diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss index a9c6a216efa..443213ae37e 100644 --- a/addons/mail/static/src/scss/composer.scss +++ b/addons/mail/static/src/scss/composer.scss @@ -18,7 +18,7 @@ display: flex; margin: 1px 0; border-top: none; - background: $gray-lighter; + background: gray('200'); .o_composer, .o_composer_subject { position: relative; @@ -69,15 +69,15 @@ } @include media-breakpoint-down(sm) { .o_composer_button_send { - color: $o-brand-optional; + color: $o-brand-primary; } } .o_mail_emoji_container { padding: 0 $o-mail-chatter-gap $o-mail-chatter-gap 0; - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); border-width: 1px 0 0 0; - background-color: $gray-lighter; + background-color: gray('200'); .o_mail_emoji { margin: $o-mail-chatter-gap 0 0 $o-mail-chatter-gap; @@ -92,7 +92,7 @@ &:not(.o_chat_mini_composer) { 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: 1px solid gray('300'); border-top: none; .o_chatter_avatar { @@ -120,7 +120,7 @@ } .o_composer, .o_composer_subject { - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); textarea, input { padding: 0 0 $o-mail-chatter-gap; @@ -133,7 +133,7 @@ } .o_chatter_composer_tools { - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); } &:not(.o_chat_inline_composer) { @@ -182,7 +182,7 @@ .o_chatter_composer_tools { border: none; - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); padding-left: $o-mail-chatter-gap*0.5; transform: translateY(-$o-mail-chatter-gap*0.5); } @@ -191,7 +191,7 @@ border-radius: 0 3px 3px 0; // Make the button appear as the same size as the subject input padding: 10px $input-btn-padding-x; - border: 1px solid darken($o-brand-optional, 5%); + border: 1px solid darken($o-brand-primary, 5%); border-left-width: 0; } } @@ -200,7 +200,7 @@ // Mini-composer enabled &.o_chat_mini_composer { .o_composer_container { - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); width: 100%; } .o_composer { @@ -318,7 +318,7 @@ $o-mail-attachment-margin: 5px; } .o_attachment_delete { - background: desaturate($brand-primary, 50%); + background: desaturate(theme-color('primary'), 50%); color: white; cursor: pointer; font-size: 20px; @@ -326,7 +326,7 @@ $o-mail-attachment-margin: 5px; transition: all 0.3s ease 0s; &:hover { - background: $brand-primary; + background: theme-color('primary'); } } @@ -371,7 +371,7 @@ $o-mail-attachment-margin: 5px; .o_attachment_wrap { padding: 0; border-radius: 2px; - border: 1px solid $gray-lighter-darker; + border: 1px solid gray('400'); } .o_image_box { @@ -415,7 +415,7 @@ $o-mail-attachment-margin: 5px; @mixin o-viewer-black-btn { background-color: rgba(black, 0.4); - color: rgba($gray-lighter, 0.7); + color: rgba(gray('200'), 0.7); &:hover { background-color: rgba(black, 0.6); @@ -423,7 +423,7 @@ $o-mail-attachment-margin: 5px; } &.disabled { - color: $gray-light; + color: gray('600'); background: none; } } @@ -444,7 +444,7 @@ $o-mail-attachment-margin: 5px; color: #FFFFFF; a { - @include o-hover-text-color(rgba($gray-lighter, 0.6), white); + @include o-hover-text-color(rgba(gray('200'), 0.6), white); } .o_close_btn { diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss index 392b09e0a43..1a9995c68d7 100644 --- a/addons/mail/static/src/scss/discuss.scss +++ b/addons/mail/static/src/scss/discuss.scss @@ -136,7 +136,7 @@ padding-top: 10px; padding-bottom: 10px; cursor: pointer; - background-color: darken($gray, 8%); + background-color: darken(gray('700'), 8%); color: white; } } @@ -148,14 +148,14 @@ .o_mail_discuss { .o_mail_discuss_sidebar { - background-color: $gray-dark; - color: $gray-lighter-dark; + background-color: gray('900'); + color: gray('300'); .o_mail_discuss_item { cursor: pointer; &:hover { - background-color: darken($gray-dark,2%); + background-color: darken(gray('900'),2%); .o_mail_partner_unpin, .o_mail_channel_settings { opacity: $o-mail-sidebar-icon-opacity; @@ -163,8 +163,8 @@ } &.o_active { - background-color: $gray-darker; - box-shadow: inset 3px 0 0 $o-brand-optional; + background-color: gray('900'); + box-shadow: inset 3px 0 0 $o-brand-primary; } .o_mail_hash { @@ -181,7 +181,7 @@ > .badge { color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; font-size: 10px; line-height: 16px; height: 18px; @@ -191,14 +191,14 @@ font-size: $font-size-base; &.o_mail_mailbox_title_starred > .badge { - background-color: $gray-light; - border-color: $gray-light; + background-color: gray('600'); + border-color: gray('600'); } } } > hr { - border-color: $gray; + border-color: gray('700'); } .o_mail_add_thread { @@ -216,7 +216,7 @@ margin: 0; font-size: $font-size-sm; text-transform: uppercase; - color: $gray-light; + color: gray('600'); &.o_mail_open_channels:hover { color: white; } @@ -224,7 +224,7 @@ .o_add { cursor: pointer; @include o-hover-opacity($o-mail-sidebar-icon-opacity, 1); - @include o-hover-text-color($gray-light, white); + @include o-hover-text-color(gray('600'), white); } } } @@ -249,10 +249,10 @@ font-size: 1em; position: relative; &.o_user_online { - color: $o-brand-optional; + color: $o-brand-primary; } &.o_user_idle { - color: $brand-warning; + color: theme-color('warning'); } } @@ -270,7 +270,7 @@ display: flex; flex: 0 0 auto; z-index: 2; - box-shadow: 0 2px 4px $gray-lighter-darker; + box-shadow: 0 2px 4px gray('400'); .o_mailbox_inbox_item { flex: 1 1 auto; @@ -278,7 +278,7 @@ padding: 2%; &.btn-secondary { - border-bottom: 1px solid $gray-lighter-darker + border-bottom: 1px solid gray('400') } } } @@ -321,13 +321,13 @@ .o_mail_preview { display: flex; - background-color: $gray-lighter; + background-color: gray('200'); color: $o-main-text-color; cursor: pointer; overflow: hidden; position: relative; &:hover { - background-color: $gray-lighter-dark; + background-color: gray('300'); .o_preview_name { color: $headings-color; } @@ -336,7 +336,7 @@ } } &:not(:last-child) { - border-bottom: 1px solid $gray-lighter-darker; + border-bottom: 1px solid gray('400'); } .o_mail_preview_image { flex: 0 0 auto; @@ -384,7 +384,7 @@ &.o_preview_unread { background-color: transparent; &:hover { - background-color: $gray-lighter; + background-color: gray('200'); } .o_preview_info { .o_preview_title { @@ -392,7 +392,7 @@ font-weight: 700; } .o_last_message_date { - color: $o-brand-optional; + color: $o-brand-primary; } } } @@ -431,7 +431,7 @@ .o_mail_mobile_tabs { display: flex; - box-shadow: 0 0 8px $gray-lighter-darker; + box-shadow: 0 0 8px gray('400'); .o_mail_mobile_tab { display: flex; @@ -440,7 +440,7 @@ flex-flow: column nowrap; justify-content: space-between; padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2; - box-shadow: 1px 0 0 $gray-lighter-darker; + box-shadow: 1px 0 0 gray('400'); text-align: center; > span { @@ -455,7 +455,7 @@ } &.active > span { - color: $o-brand-optional; + color: $o-brand-primary; } } } diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss index c0748f67a56..635e37c902c 100644 --- a/addons/mail/static/src/scss/followers.scss +++ b/addons/mail/static/src/scss/followers.scss @@ -62,10 +62,10 @@ .fa { &.fa-times { - color: $brand-warning; + color: theme-color('warning'); } &.fa-check { - color: $brand-success; + color: theme-color('success'); } } } diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss index c9763a025be..d3c4dec0dfc 100644 --- a/addons/mail/static/src/scss/mail_activity.scss +++ b/addons/mail/static/src/scss/mail_activity.scss @@ -66,7 +66,7 @@ .o_activity_info { vertical-align: baseline; padding: 4px 6px; - background: $gray-lighter; + background: gray('200'); border-radius: 2px 2px 0 0; @include o-hover-opacity(1, 1); @@ -113,13 +113,13 @@ } .o_activity_color_planned { - color: $brand-success; + color: theme-color('success'); } .o_activity_color_overdue { - color: $brand-danger; + color: theme-color('danger'); } .o_activity_color_today { - color: $brand-warning; + color: theme-color('warning'); } } @@ -157,7 +157,7 @@ & > li:last-child { background-color: $o-brand-lightsecondary; - color: $gray-dark; + color: gray('900'); line-height: 3em; } li > ul.o_activity_log { @@ -179,7 +179,7 @@ padding: 8px 10px 8px 0px; vertical-align: middle; &:hover { - background-color: $gray-lighter; + background-color: gray('200'); .o_activity_link_kanban { visibility: visible; } diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss index d52add73ec4..1383d462a38 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: $o-brand-optional; + background: $o-brand-primary; color: white; padding: 0em 0.3em; font-size: 0.7em; @@ -42,15 +42,15 @@ display: flex; flex: 0 0 auto; justify-content: space-between; - border-bottom: 1px solid $gray-lighter-darker; - box-shadow: 0 0 2px $gray-lighter-darker; + border-bottom: 1px solid gray('400'); + box-shadow: 0 0 2px gray('400'); .o_filter_button, .o_new_message { padding: 5px; } .o_filter_button { color: $o-main-color-muted; &:hover, &.active { - color: $o-brand-optional; + color: $o-brand-primary; } &.active { cursor: default; @@ -119,7 +119,7 @@ padding: 5px; height: 44px; border-bottom: 1px solid #ebebeb; - box-shadow: 0 0 2px $gray-lighter-darker; + box-shadow: 0 0 2px gray('400'); } .o_mail_systray_dropdown_items { max-height: none; diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss index 14ff5c09bba..6376fff217e 100644 --- a/addons/mail/static/src/scss/thread.scss +++ b/addons/mail/static/src/scss/thread.scss @@ -10,7 +10,7 @@ margin-top: 0px; margin-bottom: 15px; } - border-bottom: 1px solid $gray-lighter-darker; + border-bottom: 1px solid gray('400'); text-align: center; .o_thread_date { @@ -25,14 +25,14 @@ .o_thread_new_messages_separator { margin-bottom: 15px; - border-bottom: solid lighten($o-brand-primary, 15%) 1px; + border-bottom: solid lighten($o-brand-odoo, 15%) 1px; text-align: right; .o_thread_separator_label { position: relative; top: 8px; padding: 0 10px; background: white; - color: lighten($o-brand-primary, 15%); + color: lighten($o-brand-odoo, 15%); font-size: smaller; } } @@ -43,8 +43,8 @@ margin-bottom: 0px; &.o_mail_not_discussion { - background-color: rgba($gray-lighter-dark, 0.5); - border-bottom: 1px solid $gray-lighter-darker; + background-color: rgba(gray('300'), 0.5); + border-bottom: 1px solid gray('400'); } .o_thread_message_sidebar { @@ -181,9 +181,9 @@ .o_thread_tooltip_content { top: 10px; - background: $gray-lighter; + background: gray('200'); padding: 4px; - border: solid $gray-lighter 1px; + border: solid gray('200') 1px; border-radius: 5px; color: gray; width: 300px; 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 daaf956fc68..ed4584cb61b 100644 --- a/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss +++ b/addons/mass_mailing/static/src/scss/mass_mailing.ui.scss @@ -64,7 +64,7 @@ } &.selected .o_thumb { - border: 2px solid $o-brand-primary; + border: 2px solid $o-brand-odoo; background-color: $o-we-color-dark; } } diff --git a/addons/note/static/src/scss/note.scss b/addons/note/static/src/scss/note.scss index 2d282b7a2dc..a1d4227e182 100644 --- a/addons/note/static/src/scss/note.scss +++ b/addons/note/static/src/scss/note.scss @@ -19,7 +19,7 @@ &.o_form_readonly { .oe_memo { padding: $input-btn-padding-x-lg; - border-bottom: 1px solid $legend-border-color; + border-bottom: 1px solid gray('900'); } } } diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss index 9348c497e95..cdeb21009c1 100644 --- a/addons/portal/static/src/scss/portal.scss +++ b/addons/portal/static/src/scss/portal.scss @@ -390,7 +390,7 @@ img.o_we_custom_image { } .o_portal_signature_form .o_portal_sign_error_msg { - color: $brand-danger; + color: $danger; } .label-optional { @@ -409,7 +409,7 @@ img.o_we_custom_image { height: 3.7em; } .o_portal_html_view { - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); border-radius: 5px; padding-right: 1px; } diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss index 221f91fc8a9..edc1faca887 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: $o-brand-optional; + outline-color: $o-brand-primary; } > 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 00d16e8e325..e4eec1d5909 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: $o-brand-optional; + color: $o-brand-primary; cursor: pointer; } @@ -47,7 +47,7 @@ cursor: pointer; } .o_progress_non_billable_project { - background-color: $brand-primary; + background-color: theme-color('primary'); color: white; cursor: pointer; } @@ -82,14 +82,14 @@ text-align: center; } th.o_right_bordered, td.o_right_bordered { - border-right: 2px solid $o-brand-optional; + border-right: 2px solid $o-brand-primary; text-align: center; } .o_timesheet_forecast_sale_order{ font-weight: bold; & > td:first-child { - color: $o-brand-optional; + color: $o-brand-primary; } } .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 a57003b8285..9f8c01fac03 100644 --- a/addons/sales_team/static/src/scss/sales_team_dashboard.scss +++ b/addons/sales_team/static/src/scss/sales_team_dashboard.scss @@ -24,7 +24,7 @@ } g.tick.major { // Don't know why, but leads to strange bold text - // stroke: $o-brand-primary; + // stroke: $o-brand-odoo; line { display: none; diff --git a/addons/theme_default/static/src/scss/bootstrap_overridden.scss b/addons/theme_default/static/src/scss/bootstrap_overridden.scss index b396442df02..172790fc0b7 100644 --- a/addons/theme_default/static/src/scss/bootstrap_overridden.scss +++ b/addons/theme_default/static/src/scss/bootstrap_overridden.scss @@ -1,5 +1,7 @@ -$gray-darker: lighten(#000, 20%); -$gray-dark: lighten(#000, 40%); -$gray: lighten(#000, 55%); -$gray-light: lighten(#000, 70%); -$gray-lighter: lighten(#000, 80%); + +// TODO review BS4 gray palette for theme default +// $gray-900: lighten(#000, 20%); +// $gray-800: lighten(#000, 40%); +// $gray-700: lighten(#000, 55%); +// $gray-600: lighten(#000, 70%); +// $gray-200: lighten(#000, 80%); diff --git a/addons/theme_default/static/src/scss/option_color_amethyst.scss b/addons/theme_default/static/src/scss/option_color_amethyst.scss index a5c9dbbac11..790d345ece7 100644 --- a/addons/theme_default/static/src/scss/option_color_amethyst.scss +++ b/addons/theme_default/static/src/scss/option_color_amethyst.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ - -.bg-primary { - background-color: $color-clouds; -} -.bg-success { - background-color: $color-purple; -} -.bg-info { - background-color: $color-twilight; -} -.bg-warning { - background-color: $color-purple-dark; -} -.bg-danger { - background-color: $color-midnight; -} - -.btn .fa { - color: white;} - -.btn-secondary .fa { - color: $gray-dark;} - -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ - -.bg-transparent-color { background: $color-twilight; opacity: 0.85;} -.bg-transparent-shade { background: black; opacity: 0.5;} - -/* Footer ----------------------------------------------------------- */ - -#wrapwrap footer { - background-color: $color-concrete-dark; - color: $gray-light; - } -footer ul li a { - color: $color-clouds; - } -footer ul li a:hover { - color: white; - text-decoration: none; - } -footer h4 { - color: $gray-lighter; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-concrete; - } +// TODO review BS4 custo for theme default + +// /* COLORED BG -------------------------------------------------------- */ + +// .bg-primary { +// background-color: $color-clouds; +// } +// .bg-success { +// background-color: $color-purple; +// } +// .bg-info { +// background-color: $color-twilight; +// } +// .bg-warning { +// background-color: $color-purple-dark; +// } +// .bg-danger { +// background-color: $color-midnight; +// } + +// .btn .fa { +// color: white;} + +// .btn-secondary .fa { +// color: gray('900');} + +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- + +// .bg-transparent-color { background: $color-twilight; opacity: 0.85;} +// .bg-transparent-shade { background: black; opacity: 0.5;} + +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-concrete-dark; +// color: gray('600'); +// } +// footer ul li a { +// color: $color-clouds; +// } +// footer ul li a:hover { +// color: white; +// text-decoration: none; +// } +// footer h4 { +// color: gray('200'); +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-concrete; +// } diff --git a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss index a50fa8aaf78..5c35da75b02 100644 --- a/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_amethyst_bs_variables.scss @@ -1,17 +1,19 @@ -/* GRAYS --------------------------------------------------------- */ +// TODO review BS4 custo for theme default -$gray-darker: lighten(#000, 30%); +// /* GRAYS --------------------------------------------------------- */ -/* TEXTS & LINKS --------------------------------------------------- */ +// $gray-900: lighten(#000, 30%); -$text-muted: $color-primary; -$link-color: $color-primary; -$link-hover-color: $color-success; +// /* TEXTS & LINKS --------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: $color-primary; +// $link-color: $color-primary; +// $link-hover-color: $color-success; -$btn-primary-bg: $color-silver; -$btn-success-bg: $color-concrete; -$btn-info-bg: $color-purple; -$btn-warning-bg: $color-purple-light; -$btn-danger-bg: $color-red; +// /* BUTTONS --------------------------------------------------------- */ + +// $btn-primary-bg: $color-silver; +// $btn-success-bg: $color-concrete; +// $btn-info-bg: $color-purple; +// $btn-warning-bg: $color-purple-light; +// $btn-danger-bg: $color-red; diff --git a/addons/theme_default/static/src/scss/option_color_cobalt.scss b/addons/theme_default/static/src/scss/option_color_cobalt.scss index 74d4f5cf00e..25fda624a32 100644 --- a/addons/theme_default/static/src/scss/option_color_cobalt.scss +++ b/addons/theme_default/static/src/scss/option_color_cobalt.scss @@ -1,52 +1,54 @@ -/* COLORED BG -------------------------------------------------------- */ - -.bg-primary { - background-color: $color-wind; -} -.bg-success { - background-color: $color-silver; -} -.bg-info { - background-color: $color-blue; -} -.bg-warning { - background-color: $color-blue-dark; -} -.bg-danger { - background-color: $color-asphalt; -} - -.btn .fa { - color: white;} - -.btn-secondary .fa { - color: $gray-dark;} - -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ - -.bg-transparent-color { background: $color-blue-dark; opacity: 0.9;} -.bg-transparent-shade { background: black; opacity: 0.5;} - -/* Footer ----------------------------------------------------------- */ - -#wrapwrap footer { - background-color: $color-midnight; - color: $gray; -} -footer ul li a { - color: $color-silver; -} - -footer ul li a:hover { - color: $color-clouds; - text-decoration: none; -} -footer h4 { - color: $color-stone; - padding-bottom: 12px; - text-transform: uppercase; -} -footer .fa { - color: $gray-light; -} +// TODO review BS4 custo for theme default + +// /* COLORED BG -------------------------------------------------------- */ + +// .bg-primary { +// background-color: $color-wind; +// } +// .bg-success { +// background-color: $color-silver; +// } +// .bg-info { +// background-color: $color-blue; +// } +// .bg-warning { +// background-color: $color-blue-dark; +// } +// .bg-danger { +// background-color: $color-asphalt; +// } + +// .btn .fa { +// color: white;} + +// .btn-secondary .fa { +// color: gray('900');} + +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- + +// .bg-transparent-color { background: $color-blue-dark; opacity: 0.9;} +// .bg-transparent-shade { background: black; opacity: 0.5;} + +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-midnight; +// color: gray('700'); +// } +// footer ul li a { +// color: $color-silver; +// } + +// footer ul li a:hover { +// color: $color-clouds; +// text-decoration: none; +// } +// footer h4 { +// color: $color-stone; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: gray('600'); +// } diff --git a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss index ab87820cddb..a5faaf2411c 100644 --- a/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_cobalt_bs_variables.scss @@ -1,13 +1,15 @@ -/* TEXTS & LINKS --------------------------------------------------- */ +// TODO review BS4 custo for theme default -$text-muted: $color-primary; -$link-color: $color-primary; -$link-hover-color: $color-info; +// /* TEXTS & LINKS --------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: $color-primary; +// $link-color: $color-primary; +// $link-hover-color: $color-info; -$btn-primary-bg: $color-blue; -$btn-success-bg: $color-turquoise; -$btn-info-bg: $color-green; -$btn-warning-bg: $color-orange; -$btn-danger-bg: $color-red; +// BUTTONS --------------------------------------------------------- + +// $btn-primary-bg: $color-blue; +// $btn-success-bg: $color-turquoise; +// $btn-info-bg: $color-green; +// $btn-warning-bg: $color-orange; +// $btn-danger-bg: $color-red; diff --git a/addons/theme_default/static/src/scss/option_color_emerald.scss b/addons/theme_default/static/src/scss/option_color_emerald.scss index 0c9fc0b47db..f1dba7d287f 100644 --- a/addons/theme_default/static/src/scss/option_color_emerald.scss +++ b/addons/theme_default/static/src/scss/option_color_emerald.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ - -.bg-primary { - background-color: $color-wind; -} -.bg-success { - background-color: $color-silver; -} -.bg-info { - background-color: $color-green-dark; -} -.bg-warning { - background-color: $color-green; -} -.bg-danger { - background-color: $color-forest; -} - -.btn .fa { - color: white;} - -.btn-secondary .fa { - color: $gray-dark;} - -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ - -.bg-transparent-color { background: $color-green-dark; opacity: 0.9;} -.bg-transparent-shade { background: black; opacity: 0.5;} - -/* Footer ----------------------------------------------------------- */ - -#wrapwrap footer { - background-color: $color-concrete-dark; - color: $gray; - } -footer ul li a { - color: $color-clouds; - } -footer ul li a:hover { - color: white; - text-decoration: none; - } -footer h4 { - color: $color-silver; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-clouds; - } +// TODO review BS4 custo for theme default + +// /* COLORED BG -------------------------------------------------------- */ + +// .bg-primary { +// background-color: $color-wind; +// } +// .bg-success { +// background-color: $color-silver; +// } +// .bg-info { +// background-color: $color-green-dark; +// } +// .bg-warning { +// background-color: $color-green; +// } +// .bg-danger { +// background-color: $color-forest; +// } + +// .btn .fa { +// color: white;} + +// .btn-secondary .fa { +// color: gray('900');} + +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- + +// .bg-transparent-color { background: $color-green-dark; opacity: 0.9;} +// .bg-transparent-shade { background: black; opacity: 0.5;} + +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-concrete-dark; +// color: gray('700'); +// } +// footer ul li a { +// color: $color-clouds; +// } +// footer ul li a:hover { +// color: white; +// text-decoration: none; +// } +// footer h4 { +// color: $color-silver; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-clouds; +// } diff --git a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss index 9b8dec0f38e..4ff78669b81 100644 --- a/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_emerald_bs_variables.scss @@ -1,13 +1,15 @@ -/* TEXTS & LINKS --------------------------------------------------- */ +// TODO review BS4 custo for theme default -$text-muted: $color-success; -$link-color: $color-success; -$link-hover-color: $color-primary; +// /* TEXTS & LINKS --------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: $color-success; +// $link-color: $color-success; +// $link-hover-color: $color-primary; -$btn-primary-bg: $color-green; -$btn-success-bg: $color-turquoise; -$btn-info-bg: $color-blue; -$btn-warning-bg: $color-orange; -$btn-danger-bg: $color-red; +// BUTTONS --------------------------------------------------------- + +// $btn-primary-bg: $color-green; +// $btn-success-bg: $color-turquoise; +// $btn-info-bg: $color-blue; +// $btn-warning-bg: $color-orange; +// $btn-danger-bg: $color-red; diff --git a/addons/theme_default/static/src/scss/option_color_gold.scss b/addons/theme_default/static/src/scss/option_color_gold.scss index 9f27adff25f..ee3b64c3de5 100644 --- a/addons/theme_default/static/src/scss/option_color_gold.scss +++ b/addons/theme_default/static/src/scss/option_color_gold.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ - -.bg-primary { - background-color: $color-sand; -} -.bg-success { - background-color: $color-yellow; -} -.bg-info { - background-color: $color-orange; -} -.bg-warning { - background-color: $color-yellow-dark; -} -.bg-danger { - background-color: $color-orange-dark; -} - -.btn .fa { - color: white;} - -.btn-secondary .fa { - color: $gray-dark;} - -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ - -.bg-transparent-color { background: $color-orange-dark; opacity: 0.85;} -.bg-transparent-shade { background: black; opacity: 0.5;} - -/* Footer ----------------------------------------------------------- */ - -#wrapwrap footer { - background-color: $color-orange-dark; - color: white; - } -footer ul li a { - color: $color-beach; - } -footer ul li a:hover { - color: $color-yellow; - text-decoration: none; - } -footer h4 { - color: $color-beach; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-beach; - } +// TODO review BS4 custo for theme default + +// /* COLORED BG -------------------------------------------------------- */ + +// .bg-primary { +// background-color: $color-sand; +// } +// .bg-success { +// background-color: $color-yellow; +// } +// .bg-info { +// background-color: $color-orange; +// } +// .bg-warning { +// background-color: $color-yellow-dark; +// } +// .bg-danger { +// background-color: $color-orange-dark; +// } + +// .btn .fa { +// color: white;} + +// .btn-secondary .fa { +// color: gray('900');} + +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- + +// .bg-transparent-color { background: $color-orange-dark; opacity: 0.85;} +// .bg-transparent-shade { background: black; opacity: 0.5;} + +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-orange-dark; +// color: white; +// } +// footer ul li a { +// color: $color-beach; +// } +// footer ul li a:hover { +// color: $color-yellow; +// text-decoration: none; +// } +// footer h4 { +// color: $color-beach; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-beach; +// } diff --git a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss index eb10f308be8..21a94e8ffe1 100644 --- a/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_gold_bs_variables.scss @@ -1,13 +1,15 @@ -/* TEXTS & LINKS ------------------------------------------------------- */ +// TODO review BS4 custo for theme default -$text-muted: $gray; -$link-color: $color-info; -$link-hover-color: $color-primary; +// /* TEXTS & LINKS ------------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: gray('700'); +// $link-color: $color-info; +// $link-hover-color: $color-primary; -$btn-primary-bg: $color-yellow; -$btn-success-bg: $color-orange; -$btn-info-bg: $color-yellow-dark; -$btn-warning-bg: $color-orange-dark; -$btn-danger-bg: $color-red-dark; +// /* BUTTONS --------------------------------------------------------- */ + +// $btn-primary-bg: $color-yellow; +// $btn-success-bg: $color-orange; +// $btn-info-bg: $color-yellow-dark; +// $btn-warning-bg: $color-orange-dark; +// $btn-danger-bg: $color-red-dark; diff --git a/addons/theme_default/static/src/scss/option_color_ruby.scss b/addons/theme_default/static/src/scss/option_color_ruby.scss index f1883a2e60f..d652a80518e 100644 --- a/addons/theme_default/static/src/scss/option_color_ruby.scss +++ b/addons/theme_default/static/src/scss/option_color_ruby.scss @@ -1,51 +1,53 @@ -/* COLORED BG -------------------------------------------------------- */ - -.bg-primary { - background-color: $color-sand; -} -.bg-success { - background-color: $color-red; -} -.bg-info { - background-color: $color-red-dark; -} -.bg-warning { - background-color: $color-orange; -} -.bg-danger { - background-color: $color-orange-dark; -} - -.btn .fa { - color: white;} - -.btn-secondary .fa { - color: $gray-dark;} - -/* TRANSPARENT BG --------------------------------------------------- */ -/* Used in snippets Prx Image Color and Prx Image Shade ------------- */ - -.bg-transparent-color { background: $color-red-dark; opacity: 0.85;} -.bg-transparent-shade { background: black; opacity: 0.5;} - -/* Footer ----------------------------------------------------------- */ - -#wrapwrap footer { - background-color: $color-burgundy; - color: $gray-lighter; - } -footer ul li a { - color: white; - } -footer ul li a:hover { - color: $color-orange; - text-decoration: none; - } -footer h4 { - color: $color-sand; - padding-bottom: 12px; - text-transform: uppercase; - } -footer .fa { - color: $color-red; - } +// TODO review BS4 custo for theme default + +// /* COLORED BG -------------------------------------------------------- */ + +// .bg-primary { +// background-color: $color-sand; +// } +// .bg-success { +// background-color: $color-red; +// } +// .bg-info { +// background-color: $color-red-dark; +// } +// .bg-warning { +// background-color: $color-orange; +// } +// .bg-danger { +// background-color: $color-orange-dark; +// } + +// .btn .fa { +// color: white;} + +// .btn-secondary .fa { +// color: gray('900');} + +// /* TRANSPARENT BG --------------------------------------------------- */ +// Used in snippets Prx Image Color and Prx Image Shade ------------- + +// .bg-transparent-color { background: $color-red-dark; opacity: 0.85;} +// .bg-transparent-shade { background: black; opacity: 0.5;} + +// /* Footer ----------------------------------------------------------- */ + +// #wrapwrap footer { +// background-color: $color-burgundy; +// color: gray('200'); +// } +// footer ul li a { +// color: white; +// } +// footer ul li a:hover { +// color: $color-orange; +// text-decoration: none; +// } +// footer h4 { +// color: $color-sand; +// padding-bottom: 12px; +// text-transform: uppercase; +// } +// footer .fa { +// color: $color-red; +// } diff --git a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss b/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss index 7fd168c8bd7..174bedbb4ec 100644 --- a/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss +++ b/addons/theme_default/static/src/scss/option_color_ruby_bs_variables.scss @@ -1,17 +1,19 @@ -/* GRAYS --------------------------------------------------------- */ +// TODO review BS4 custo for theme default -$gray: lighten(#000, 50%); +// /* GRAYS --------------------------------------------------------- */ -/* TEXT & LINKS -------------------------------------------------------- */ +// $gray-700: lighten(#000, 50%); -$text-muted: $gray; -$link-color: $color-primary; -$link-hover-color: $color-success; +// /* TEXT & LINKS -------------------------------------------------------- */ -/* BUTTONS --------------------------------------------------------- */ +// $text-muted: gray('700'); +// $link-color: $color-primary; +// $link-hover-color: $color-success; -$btn-primary-bg: $color-red; -$btn-success-bg: $color-orange; -$btn-info-bg: $color-yellow-dark; -$btn-warning-bg: $color-orange-dark; -$btn-danger-bg: $color-red-dark; +// BUTTONS --------------------------------------------------------- + +// $btn-primary-bg: $color-red; +// $btn-success-bg: $color-orange; +// $btn-info-bg: $color-yellow-dark; +// $btn-warning-bg: $color-orange-dark; +// $btn-danger-bg: $color-red-dark; diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss index b6615a39f80..436298872da 100644 --- a/addons/web/static/src/scss/base_settings.scss +++ b/addons/web/static/src/scss/base_settings.scss @@ -41,15 +41,15 @@ height: 28px; padding: 0px; border: 0px; - border-bottom: 1px solid $gray-lighter-darker; - border-color: $gray; + border-bottom: 1px solid gray('400'); + border-color: gray('700'); box-shadow: none; font-weight: 500; } .searchIcon { @include o-position-absolute(4px, 0); - color: $gray; + color: gray('700'); } } } @@ -83,7 +83,7 @@ display: flex; flex: 0 0 auto; flex-flow: column nowrap; - background: $gray-dark; + background: gray('900'); overflow: auto; padding-top: $o-horizontal-padding*0.5; @@ -96,8 +96,8 @@ } .selected { - background-color: $gray-darker; - box-shadow: inset 3px 0 0 $o-brand-optional; + background-color: gray('900'); + box-shadow: inset 3px 0 0 $o-brand-primary; .app_name { color: white; @@ -108,7 +108,7 @@ display: flex; padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding; height: 40px; - color: $gray-lighter-darker; + color: gray('400'); font-size: 13px; line-height: 40px; cursor: pointer; @@ -138,7 +138,7 @@ &:after { content: ''; - background: $o-brand-optional; + background: $o-brand-primary; opacity: 0; @include o-position-absolute(auto, 0, 0, 0); @include size(100%, 3px); @@ -179,7 +179,7 @@ h2 { margin-bottom: 0; @include o-base-settings-horizontal-padding; - background-color: $gray-lighter; + background-color: gray('200'); font-size: 15px; font-weight: bold; @@ -199,7 +199,7 @@ display: flex; margin: 30px 0 10px; @include o-base-settings-horizontal-padding; - background-color: $gray-lighter; + background-color: gray('200'); .icon { width: 25px; diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 9c26fa886eb..a96775ee837 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -13,13 +13,14 @@ $gray-200: $o-color-silver; // FIXME keep this or use bootstrap default ? (also $gray-300: #dee2e6 !default; // This is BS default $gray-400: #ced4da !default; // This is BS default $gray-500: #adb5bd !default; // This is BS default -$gray-600: $o-color-gray-light !default; // This is BS default +$gray-600: #6c757d !default; // This is BS default $gray-700: #495057 !default; // This is BS default $gray-800: #343a40 !default; // This is BS default $gray-900: #212529 !default; // This is BS default $black: #000 !default; // This is BS default $primary: $o-brand-primary; +$secondary: $white; // Body // @@ -32,7 +33,6 @@ $body-color: $o-main-text-color; // // Style anchor elements. -$link-color: $o-brand-optional; $link-hover-decoration: none; // Grid columns @@ -47,7 +47,7 @@ $grid-gutter-width: $o-horizontal-padding * 2; $border-radius: 3px; -$component-active-color: $o-brand-optional; +$component-active-color: $o-brand-primary; $component-active-bg: $gray-200; // Fonts @@ -105,7 +105,7 @@ $nav-tabs-link-active-bg: $white; $nav-pills-border-radius: 0; $nav-pills-link-active-color: $white; -$nav-pills-link-active-bg: $o-brand-optional; +$nav-pills-link-active-bg: $o-brand-primary; // Navbar diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss index 25d4a725604..144b5f7bbde 100644 --- a/addons/web/static/src/scss/control_panel.scss +++ b/addons/web/static/src/scss/control_panel.scss @@ -55,7 +55,7 @@ } .o_form_binary_form span { padding: 3px 25px; - color: $btn-secondary-color; + color: $o-brand-primary; } .o_form_binary_form:hover { background-color: $table-bg-hover; diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss index ab2635657ad..c03d13b355b 100644 --- a/addons/web/static/src/scss/data_export.scss +++ b/addons/web/static/src/scss/data_export.scss @@ -52,7 +52,7 @@ user-select: none; &.o_selected > .o_tree_column { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; } diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss index b8902541734..68a839d8fd8 100644 --- a/addons/web/static/src/scss/datepicker.scss +++ b/addons/web/static/src/scss/datepicker.scss @@ -43,13 +43,13 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{ .table-condensed { > thead { color: white; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; > tr { &:first-child { th:hover { color: white; - background-color: darken($o-brand-primary, 10%); + background-color: darken($o-brand-odoo, 10%); } } @@ -67,12 +67,12 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{ > tr { > td { &.active, .active { - background-color: $o-brand-optional; + background-color: $o-brand-primary; border-radius: 100px; } &.today:before { - border-bottom-color: $o-brand-optional; + border-bottom-color: $o-brand-primary; } } } diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss index ed4ed956a9e..b35934973b9 100644 --- a/addons/web/static/src/scss/domain_selector.scss +++ b/addons/web/static/src/scss/domain_selector.scss @@ -35,7 +35,7 @@ padding-left: 5px; &:hover { - color: $brand-danger; + color: theme-color('danger'); } } } @@ -74,7 +74,7 @@ display: block; margin-top: 16px; padding: 8px 10px 12px; - background: $gray-dark; + background: gray('900'); color: rgba(white, 0.5); font-family: monospace; font-weight: normal; @@ -172,7 +172,7 @@ display: block; height: $o-domain-animation-bar-height; max-height: 0; - background-image: linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1)); + background-image: linear-gradient(45deg, rgba($o-brand-primary, 0.4), rgba($o-brand-primary, 0.1)); 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 8287e098b32..90deb20083f 100644 --- a/addons/web/static/src/scss/dropdown.scss +++ b/addons/web/static/src/scss/dropdown.scss @@ -21,7 +21,7 @@ &.ui-state-focus { background-image: none; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; border: none; font-weight: normal; margin: 0; @@ -29,7 +29,7 @@ &.o_m2o_dropdown_option { padding-left: 20px; > a { - color: $o-brand-primary; + color: $o-brand-odoo; } } } diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss index cc51876d017..ca57d9561f2 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: $o-brand-primary; + background-color: $o-brand-odoo; } &.o_m2o_dropdown_option > a { - color: $o-brand-primary; + color: $o-brand-odoo; } &.ui-state-focus > a, &.ui-state-focus.o_m2o_dropdown_option > a { diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss index 22a392b762b..f869e0f37fe 100644 --- a/addons/web/static/src/scss/fields.scss +++ b/addons/web/static/src/scss/fields.scss @@ -6,8 +6,8 @@ // Invalid .o_field_invalid { &.o_input, .o_input, &.o_form_label { - color: $brand-danger!important; - border-color: $brand-danger!important; // enterprise o_required_modifier rule overrides this without !important + color: theme-color('danger')!important; + border-color: theme-color('danger')!important; // enterprise o_required_modifier rule overrides this without !important } } @@ -119,7 +119,7 @@ display: inline-block; margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion border: 1px solid white; - box-shadow: 0 0 0 1px $gray-lighter-dark; + box-shadow: 0 0 0 1px gray('300'); > a { display: block; @@ -225,7 +225,7 @@ // Specific success color for toggle_button widget .fa.o_toggle_button_success { - color: $brand-success; + color: theme-color('success'); } // Handle widget @@ -239,15 +239,15 @@ margin: 0px 0px 4px 4px; padding: 1px 6px; color: $o-main-color-muted; - border: 1px solid $o-color-silver-dark; + border: 1px solid gray('300'); cursor: pointer; &.active { - color: $o-brand-optional; - border-color: $o-brand-optional; + color: $o-brand-primary; + border-color: $o-brand-primary; } &:hover:not(.active) { - color: darken($o-color-silver-dark, 30%); - border-color: darken($o-color-silver-dark, 30%); + color: darken(gray('300'), 30%); + border-color: darken(gray('300'), 30%); } } } @@ -299,7 +299,7 @@ margin-right: 10px; border-radius: 100%; overflow: hidden; - background-color: $o-brand-optional; + background-color: $o-brand-primary; &:after { // Outside pie border to go over border-radius irregularities content: " "; @@ -328,7 +328,7 @@ border-radius: 100%; font-weight: 700; - color: $o-brand-primary; + color: $o-brand-odoo; } } } @@ -351,7 +351,7 @@ width: 100%; color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; opacity: 0; transition: opacity ease 400ms; @@ -375,10 +375,10 @@ margin: 0px; text-align: center; &.o_select_file_button{ - background: $o-brand-optional; + background: $o-brand-primary; } &.o_clear_file_button{ - background: $brand-danger; + background: theme-color('danger'); } } } @@ -389,7 +389,7 @@ } &.o_field_invalid > img { - border: 1px solid $brand-danger; + border: 1px solid theme-color('danger'); } } @@ -417,9 +417,9 @@ &.o_field_copy { position: relative; border-radius: 5px; - border: 1px solid $btn-primary-border; + border: 1px solid $primary; font-size: $font-size-sm; - color: $o-brand-optional; + color: $o-brand-primary; font-weight: $badge-font-weight; text-align: center; .o_clipboard_button { diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss index 7e45291305f..47fca992eb5 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 $o-brand-primary; + border: 1px solid $o-brand-odoo; } .o_pie_value { diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss index 26431b969e6..730f5b9521b 100644 --- a/addons/web/static/src/scss/form_view.scss +++ b/addons/web/static/src/scss/form_view.scss @@ -143,7 +143,7 @@ display: flex; justify-content: space-between; padding-left: $o-horizontal-padding; - border-bottom: 1px solid $gray-lighter-darker; + border-bottom: 1px solid gray('400'); background-color: $o-view-background-color; > .o_statusbar_buttons, > .o_statusbar_status { @@ -182,7 +182,7 @@ font-weight: bold; position: relative; padding-left: $o-statusbar-arrow-width*2; - color: $gray; + color: gray('700'); border-width: 0 0 0; border-radius: 0; transition: all 0.1s ease 0s; @@ -192,7 +192,7 @@ } &:last-child { padding-left: $o-horizontal-padding - 1; - border-left: 1px solid $gray-lighter-darker; + border-left: 1px solid gray('400'); } &:active { @@ -203,7 +203,7 @@ opacity: 1.0; color: $text-muted; pointer-events: none; - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); } &:before, &:after { @@ -221,28 +221,28 @@ &:not(.disabled) { &:hover, &:active, &:focus { - color: $o-brand-optional; - background-color: $gray-lighter; + color: $o-brand-primary; + background-color: gray('200'); &:after { - border-left-color: $gray-lighter; + border-left-color: gray('200'); } } } &:before { right: -$o-statusbar-arrow-width; - border-left-color: $gray-lighter-dark; + border-left-color: gray('300'); } &.btn-primary.disabled { - color: $o-brand-primary; + color: $o-brand-odoo; font-size: 11px; - background-color: $gray-lighter; + background-color: gray('200'); cursor: default; &:after { - border-left-color: $gray-lighter; + border-left-color: gray('200'); } } @@ -475,7 +475,7 @@ .oe_subtotal_footer_separator { width: 100%; text-align: right; - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); font-weight: bold; font-size: 1.3em; } @@ -559,7 +559,7 @@ // Timezone widget warning .o_tz_warning { - color: $brand-danger; + color: theme-color('danger'); cursor: help; position: absolute; margin-left: -40px; diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss index 29c2512c1ab..cadce3f6809 100644 --- a/addons/web/static/src/scss/form_view_extra.scss +++ b/addons/web/static/src/scss/form_view_extra.scss @@ -75,7 +75,7 @@ .o_stat_value { @include o-text-overflow(block); font-weight: 700; - color: $o-brand-primary; + color: $o-brand-odoo; } .o_stat_text { @include o-text-overflow(block); @@ -144,7 +144,7 @@ // Separators .o_horizontal_separator { - color: $o-brand-optional; + color: $o-brand-primary; font-weight: bold; } diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss index e6a62f5230f..5f16a222736 100644 --- a/addons/web/static/src/scss/kanban_column_progressbar.scss +++ b/addons/web/static/src/scss/kanban_column_progressbar.scss @@ -65,7 +65,7 @@ width: 76%; height: $font-size-sm; margin-bottom: 0; - background-color: $gray-lighter-dark; + background-color: gray('300'); box-shadow: none; .progress-bar { @@ -112,9 +112,9 @@ } .o_kanban_view .o_kanban_group { - @include o-kanban-css-filter(success, $brand-success); - @include o-kanban-css-filter(warning, $brand-warning); - @include o-kanban-css-filter(danger, $brand-danger); + @include o-kanban-css-filter(success, theme-color('success')); + @include o-kanban-css-filter(warning, theme-color('warning')); + @include o-kanban-css-filter(danger, theme-color('danger')); &.o_kanban_group_show { display: flex; diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss index e9f6c0d74fc..3330be5bba6 100644 --- a/addons/web/static/src/scss/kanban_dashboard.scss +++ b/addons/web/static/src/scss/kanban_dashboard.scss @@ -41,7 +41,7 @@ } > .o_kanban_card_manage_section { - border-bottom: 1px solid $gray-lighter-dark; + border-bottom: 1px solid gray('300'); margin-bottom: 10px; > div { @@ -82,7 +82,7 @@ } .row.o_kanban_card_manage_settings { - border-top: 1px solid $gray-lighter-dark; + border-top: 1px solid gray('300'); padding-top: $o-kanban-dashboard-dropdown-complex-gap*3; .oe_kanban_colorpicker { @@ -91,7 +91,7 @@ } div[class*="col-"] + div[class*="col-"] { - border-left: 1px solid $gray-lighter-dark; + border-left: 1px solid gray('300'); } // Default options box @@ -176,8 +176,8 @@ margin-bottom: -$o-kanban-dashboard-vpadding; &.bottom_block { - border-top: 1px solid $gray-lighter-dark; - background-color: $gray-lighter; + border-top: 1px solid gray('300'); + background-color: gray('200'); padding-top: $o-kanban-dashboard-vpadding; padding-bottom: $o-kanban-dashboard-vpadding; } diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss index b2ae3aa0005..8b79e671019 100644 --- a/addons/web/static/src/scss/kanban_examples_dialog.scss +++ b/addons/web/static/src/scss/kanban_examples_dialog.scss @@ -6,12 +6,12 @@ // sidebar .o_kanban_examples_dialog_nav { flex: 0 0 auto; - border-right: 1px solid $gray-lighter-dark; + border-right: 1px solid gray('300'); background: white; > ul > li { margin: 0; - border-bottom: 1px solid $gray-lighter-dark; + border-bottom: 1px solid gray('300'); > a { padding: 12px 15px; @@ -23,7 +23,7 @@ } &.active > a { color: $headings-color; - border-left-color: $o-brand-optional; + border-left-color: $o-brand-primary; font-weight: bold; } } @@ -48,11 +48,11 @@ .o_kanban_examples_ghost { padding: 5px; margin-top: -1px; - border: thin solid $gray-lighter-dark; + border: thin solid gray('300'); background-color: white; .o_ghost_content { height: 12px; - background: $gray-lighter-dark; + background: gray('300'); &.o_ghost_tag { display: inline-block; width: 40%; diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss index 437ec25b864..ec8f41da4d8 100644 --- a/addons/web/static/src/scss/kanban_view.scss +++ b/addons/web/static/src/scss/kanban_view.scss @@ -12,16 +12,16 @@ .o_kanban_record, .o_kanban_quick_create { padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter; - border: 1px solid $gray-lighter-dark; + border: 1px solid gray('300'); background-color: white; @include media-breakpoint-down(sm) { padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile; } &:focus, &:focus-within { - -webkit-box-shadow: 1px 1px 1px 0px $gray-light; - -moz-box-shadow: 1px 1px 1px 0px $gray-light; - box-shadow: 1px 1px 1px 0px $gray-light; + -webkit-box-shadow: 1px 1px 1px 0px gray('600'); + -moz-box-shadow: 1px 1px 1px 0px gray('600'); + box-shadow: 1px 1px 1px 0px gray('600'); z-index: 1; // show the shadow on top of the previous & next cards in grouped mode outline: none; } @@ -43,7 +43,7 @@ .o_kanban_record { position: relative; display: inline-block; // Force the creation of a block formatting context to clear float items - border-color: $gray-lighter-darker; + border-color: gray('400'); min-width: 150px; margin: 0 0 -1px; @@ -124,7 +124,7 @@ .o_link_muted { color: $body-color; &:hover { - color: $brand-primary; + color: theme-color('primary'); text-decoration: underline; } } @@ -305,7 +305,7 @@ &.o_kanban_grouped { min-height: 100%; padding: 0; - background-color: $gray-lighter; + background-color: gray('200'); .o_kanban_record, .o_kanban_quick_create { width: 100%; @@ -430,7 +430,7 @@ .o_kanban_add_column { display: inline-block; padding: 10px 14px; - background-color: $o-color-silver-dark; + background-color: gray('300'); } .o_kanban_title { margin-left: 10px; @@ -443,7 +443,7 @@ height: 100%; border: none; box-shadow: 0 0 20px -10px; - background-color: $gray-lighter; + background-color: gray('200'); .o_kanban_header { height: 50px; @@ -464,7 +464,7 @@ } .o_kanban_muted_record { - background: $gray-lighter-dark; + background: gray('300'); height: 70px; margin: 10px 0px; } diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss index cf54d545a5a..b74ae8aaea5 100644 --- a/addons/web/static/src/scss/kanban_view_mobile.scss +++ b/addons/web/static/src/scss/kanban_view_mobile.scss @@ -19,7 +19,7 @@ &.o_current { font-weight: bold; - border-bottom: 3px solid $o-brand-optional; + border-bottom: 3px solid $o-brand-primary; } .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 e23b2585b50..e04ff85597c 100644 --- a/addons/web/static/src/scss/layout_background.scss +++ b/addons/web/static/src/scss/layout_background.scss @@ -1,9 +1,9 @@ .o_background_footer, .o_background_header, .o_report_layout_background { font-family: 'Lato'; - color: $gray; + color: gray('700'); } .o_background_header { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); .company_address { min-width: 300px; } @@ -13,19 +13,19 @@ margin-right: 16px; } h3 { - color: $o-brand-primary; + color: $o-brand-odoo; font-weight: 700; max-width: 300px; } } .o_background_footer { ul { - border-top: 1px solid $o-brand-primary; - border-bottom: 1px solid $o-brand-primary; + border-top: 1px solid $o-brand-odoo; + border-bottom: 1px solid $o-brand-odoo; padding: 4px 0; margin: 0 0 4px 0; li { - color: $o-brand-primary; + color: $o-brand-odoo; } } } @@ -36,10 +36,10 @@ background-repeat: no-repeat; min-height: 900px; thead tr th, h2 { - color: $o-brand-primary; + color: $o-brand-odoo; } tbody { - color: $gray; + color: gray('700'); tr:nth-child(odd) { background-color: rgba(184, 171, 180, 0.2); } @@ -57,7 +57,7 @@ border-top: none !important; } tr:last-child td { - color: $o-brand-primary; + color: $o-brand-odoo; } } #total { diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss index 92208945f45..3e91ed87805 100644 --- a/addons/web/static/src/scss/layout_boxed.scss +++ b/addons/web/static/src/scss/layout_boxed.scss @@ -1,10 +1,10 @@ .o_boxed_footer, .o_boxed_header, .o_report_layout_boxed { font-family: 'Lato'; - color: $gray; + color: gray('700'); font-size: 12px; } .o_boxed_header { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); img { max-height: 100px; } @@ -17,7 +17,7 @@ .o_boxed_footer { margin-top: 200px; white-space: nowrap; - border-top: 3px solid $gray; + border-top: 3px solid gray('700'); ul { margin: 4px 0; } @@ -26,7 +26,7 @@ // This is not a general rule since the id is not used in all the reports, // we should make a general structure for report body to use it everywhere #informations { - border: 1px solid $gray; + border: 1px solid gray('700'); padding-top: 10px; margin: 0; } @@ -34,22 +34,22 @@ text-transform: uppercase; } table { - border: 1px solid $gray; + border: 1px solid gray('700'); thead { tr th { - border-bottom: 3px solid $gray !important; + border-bottom: 3px solid gray('700') !important; text-transform: uppercase; } } tbody { - color: $gray; + color: gray('700'); tr { td { border-top: none; - border-right: 1px solid $gray; + border-right: 1px solid gray('700'); } td:last-child { - background-color: $gray-lighter; + background-color: gray('200'); } } } @@ -67,7 +67,7 @@ background-color: transparent; } tr:last-child td { - background-color: $gray; + background-color: gray('700'); color: #fff; } } diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss index 64ec2fd5245..88eb5d43f32 100644 --- a/addons/web/static/src/scss/layout_clean.scss +++ b/addons/web/static/src/scss/layout_clean.scss @@ -12,16 +12,16 @@ .o_clean_footer { margin: 0 3px; margin-top: 200px; - border-top: 3px solid $o-brand-primary; + border-top: 3px solid $o-brand-odoo; h4 { - color: $o-brand-primary; + color: $o-brand-odoo; font-weight: bolder; } .pagenumber { width: 35px; height: 35px; - border: 3px solid $o-brand-primary; - background-color: $o-brand-optional; + border: 3px solid $o-brand-odoo; + background-color: $o-brand-primary; color: white; padding-top: 6px; text-align: center; @@ -29,17 +29,17 @@ } .o_report_layout_clean { h1, h2, h3 { - color: $o-brand-optional; + color: $o-brand-primary; font-weight: bolder; } strong { - color: $o-brand-primary; + color: $o-brand-odoo; } table { thead { - color: $o-brand-primary; + color: $o-brand-odoo; tr th { - border-top: 3px solid $o-brand-primary !important; + border-top: 3px solid $o-brand-odoo !important; text-transform: uppercase; } tr th:last-child { @@ -54,7 +54,7 @@ border-top: none; } tr:last-child td { - border-bottom: 3px solid $o-brand-primary; + border-bottom: 3px solid $o-brand-odoo; } tr { td { @@ -72,7 +72,7 @@ top: -20px; > table { tr:last-child td { - border-top: 1px solid $gray-lighter !important; + border-top: 1px solid gray('200') !important; } tr:first-child td { /*we could get rid of this rule if .border-black td would be terminated in report.scss*/ diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss index 5d451a06942..1acd3b0cc90 100644 --- a/addons/web/static/src/scss/model_field_selector.scss +++ b/addons/web/static/src/scss/model_field_selector.scss @@ -51,7 +51,7 @@ .o_field_selector_popover_header { color: white; - background: $brand-primary; + background: theme-color('primary'); font-weight: bold; padding: 5px 0 5px 0.4em; @@ -67,14 +67,14 @@ &.o_prev_page { left: 0; - border-right: 1px solid darken($brand-primary, 10%); + border-right: 1px solid darken(theme-color('primary'), 10%); } &.o_field_selector_close { right: 0; - border-left: 1px solid darken($brand-primary, 10%); + border-left: 1px solid darken(theme-color('primary'), 10%); } &:hover { - background: darken($brand-primary, 10%); + background: darken(theme-color('primary'), 10%); } } &:before { @@ -82,7 +82,7 @@ content: ""; border-left: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0); border-right: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0); - border-bottom: $o-field-selector-arrow-height solid $brand-primary; + border-bottom: $o-field-selector-arrow-height solid theme-color('primary'); } } .o_field_selector_popover_body { @@ -118,7 +118,7 @@ } } .o_field_selector_popover_footer { - background: $brand-primary; + background: theme-color('primary'); padding: 5px 0.4em; > input { diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss index 66a080cf1bd..51f30eba251 100644 --- a/addons/web/static/src/scss/navbar.scss +++ b/addons/web/static/src/scss/navbar.scss @@ -3,7 +3,7 @@ position: relative; height: $o-navbar-height; border-bottom: 1px solid $o-navbar-inverse-link-hover-bg; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; > a, > button { @@ -91,12 +91,12 @@ > li { > a { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; border-bottom: 1px solid $o-brand-lightsecondary; &.dropdown-toggle { - background-color: lighten($o-brand-primary, 15%); + background-color: lighten($o-brand-odoo, 15%); pointer-events: none; // hack to prevent clicking on it because dropdown always opened } } diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss index 9aa0e21bbdd..d10c4997f43 100644 --- a/addons/web/static/src/scss/pivot_view.scss +++ b/addons/web/static/src/scss/pivot_view.scss @@ -5,7 +5,7 @@ // items corresponding to the clicked cell &.o_enable_linking { .o_pivot_cell_value:hover { - color: $o-brand-optional; + color: $o-brand-primary; cursor: pointer; } } diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index 2589e201226..bc84cdef88a 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -9,16 +9,18 @@ $o-font-size-base: 1rem; $o-line-height-base: 1.5; // This is BS default // Colors -$o-brand-primary: #7c7bad; -$o-brand-optional: #7c7bad; +$o-community-color: #7C7BAD; +$o-enterprise-color: #875A7B; + +$o-brand-odoo: $o-community-color; +$o-brand-primary: $o-community-color; + $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-silver: #F9F9F9; // FIXME +// $o-color-silver-dark: #E5E5E5; // FIXME keep those or BS default ? +// $o-color-silver-darker: #d9d7d7; // FIXME keep those or BS default ? -$o-color-pink: #875A7B; // Enterprise $o-brand-primary $o-main-color-muted: #a8a8a8; $o-main-text-color: #4c4c4c; diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss index 8aaade8812f..71af77082f6 100644 --- a/addons/web/static/src/scss/progress_bar.scss +++ b/addons/web/static/src/scss/progress_bar.scss @@ -23,7 +23,7 @@ } .o_progressbar_complete { - background-color: $o-brand-optional; + background-color: $o-brand-primary; height: 100%; } } diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss index 7ed08fbbd3b..1deba51bfba 100644 --- a/addons/web/static/src/scss/search_view_extra.scss +++ b/addons/web/static/src/scss/search_view_extra.scss @@ -5,17 +5,17 @@ padding: 1px 25px 3px 5px; .o_searchview_facet { - border: 1px solid $gray-light; - background: lighten($o-brand-primary, 35%); + border: 1px solid gray('600'); + background: lighten($o-brand-odoo, 35%); .o_searchview_facet_label { - background-color: $gray-light; + background-color: gray('600'); } .o_facet_remove { - color: $gray-light; + color: gray('600'); &:hover { - color: $gray; + color: gray('700'); } } } @@ -28,7 +28,7 @@ @include o-position-absolute($top: 6px, $right: 5px); } .o_searchview_autocomplete li.o-selection-focus { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; > a { color: white; } diff --git a/addons/web/static/src/scss/search_view_mobile.scss b/addons/web/static/src/scss/search_view_mobile.scss index c36f5d39850..f5ccd133cc1 100644 --- a/addons/web/static/src/scss/search_view_mobile.scss +++ b/addons/web/static/src/scss/search_view_mobile.scss @@ -48,7 +48,7 @@ .o_dropdown { width: 100%; margin: 15px 5px 0px 5px; - border: solid 1px darken($gray-lighter, 20%); + border: solid 1px darken(gray('200'), 20%); } .o_dropdown_toggler_btn { @@ -66,7 +66,7 @@ width: 100%; box-shadow: none; border: none; - color: $gray-light; + color: gray('600'); .divider { margin: 0px; } @@ -85,4 +85,4 @@ z-index: 1000; } } -}
\ No newline at end of file +} diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss index 72417929152..1787d629f94 100644 --- a/addons/web/static/src/scss/secondary_variables.scss +++ b/addons/web/static/src/scss/secondary_variables.scss @@ -1,10 +1,3 @@ -// 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; @@ -12,7 +5,8 @@ $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, +// Note: the first value is the old BS3 gray-light value +$o-colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8; $o-sheet-cancel-hpadding: $o-horizontal-padding; @@ -21,7 +15,7 @@ $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-navbar-inverse-link-hover-bg: darken($o-brand-odoo, 10%); $o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%); diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss index 776704dd016..e40852dd6bc 100644 --- a/addons/web/static/src/scss/tooltip.scss +++ b/addons/web/static/src/scss/tooltip.scss @@ -17,7 +17,7 @@ text-align: left; .oe_tooltip_string { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; font-weight: bold; padding: 5px; diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 5c77bebd409..9f254c82ecd 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -233,13 +233,13 @@ @mixin o-kanban-dropdown-open { position: relative; background: white; - border-color: $gray-lighter-darker; + border-color: gray('400'); z-index: $zindex-dropdown + 1; } @mixin o-kanban-dropdown-menu { @include o-position-absolute($right: -1px); margin-top: -1px; - border-color: $gray-lighter-darker; + border-color: gray('400'); } @mixin o-kanban-colorpicker { max-width: 150px; @@ -249,7 +249,7 @@ 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; + box-shadow: 0 0 0 1px gray('300'); > a { display: block; @@ -292,7 +292,7 @@ display: block; &:hover { - background-color: $gray-lighter-dark; + background-color: gray('300'); color: $headings-color; } } diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss index e3562026ffe..e4e86231940 100644 --- a/addons/web/static/src/scss/views.scss +++ b/addons/web/static/src/scss/views.scss @@ -18,13 +18,13 @@ border-radius: 6px; vertical-align: middle; - background-color: $gray-lighter-dark; + background-color: gray('300'); &.o_status_green { - background-color: $brand-success; + background-color: theme-color('success'); } &.o_status_red { - background-color: $brand-danger; + background-color: theme-color('danger'); } } diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss index f659ee7c466..ae22efb2675 100644 --- a/addons/web/static/src/scss/web_calendar.scss +++ b/addons/web/static/src/scss/web_calendar.scss @@ -1,5 +1,5 @@ @keyframes backgroundfade { - from {background-color: rgba($o-brand-primary, 0.5);} + from {background-color: rgba($o-brand-odoo, 0.5);} to {background-color: #f5f5f5;} } @@ -151,22 +151,22 @@ } } .ui-state-default { - color: $o-brand-primary; + color: $o-brand-odoo; &:hover { background: none; - background-color: rgba($o-brand-primary, 0.5); - border-color: $o-brand-primary; + background-color: rgba($o-brand-odoo, 0.5); + border-color: $o-brand-odoo; color: $o-view-background-color; }; } .ui-state-active { background: none; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: $o-view-background-color; } .o_selected_range.o_color { background: none; - background-color: $o-brand-primary; + background-color: $o-brand-odoo; animation: backgroundfade 3s forwards; } } diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss index b90b6f5fee5..dc116ae0d20 100644 --- a/addons/web/static/src/scss/webclient.scss +++ b/addons/web/static/src/scss/webclient.scss @@ -105,7 +105,7 @@ div.o_boolean_toggle { } > input:checked + .slider { - background-color: $o-brand-optional; + background-color: $o-brand-primary; &:before { transform: translate(14px, 0px); @@ -115,16 +115,16 @@ div.o_boolean_toggle { // Full bg colors (bootstrap extension) .bg-success-full { - background-color: $brand-success; + background-color: theme-color('success'); } .bg-warning-full { - background-color: $brand-warning; + background-color: theme-color('warning'); } .bg-danger-full { - background-color: $brand-danger; + background-color: theme-color('danger'); } .bg-info-full { - background-color: $brand-info; + background-color: theme-color('info'); } .o_web_accesskey_overlay { @@ -167,16 +167,16 @@ div.o_boolean_toggle { @include o-btn-link-variant($body-color, $headings-color); } &.btn-success, &.text-success { - @include o-btn-link-variant($body-color, $brand-success); + @include o-btn-link-variant($body-color, theme-color('success')); } &.btn-warning, &.text-warning { - @include o-btn-link-variant($body-color, $brand-warning); + @include o-btn-link-variant($body-color, theme-color('warning')); } &.btn-danger, &.text-danger { - @include o-btn-link-variant($body-color, $brand-danger); + @include o-btn-link-variant($body-color, theme-color('danger')); } &.btn-info, &.text-info { - @include o-btn-link-variant($body-color, darken($brand-info, 20%)); + @include o-btn-link-variant($body-color, darken(theme-color('info'), 20%)); } } diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss index 65411bfaa8b..80e9390c534 100644 --- a/addons/web/static/src/scss/webclient_extra.scss +++ b/addons/web/static/src/scss/webclient_extra.scss @@ -29,7 +29,7 @@ select { top: 0; right: 50%; padding: 4px 12px; - background-color: $o-color-pink; + background-color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? color: white; text-align: center; border-top: none; diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss index db550f85d74..c8bb9e3c3ed 100644 --- a/addons/web/static/src/scss/webclient_layout.scss +++ b/addons/web/static/src/scss/webclient_layout.scss @@ -74,7 +74,7 @@ .oe_secondary_menu_section { font-weight: bold; margin-left: 8px; - color: $o-brand-optional; + color: $o-brand-primary; } .oe_secondary_submenu { margin: 3px 0px 10px; @@ -134,7 +134,7 @@ > a { font-weight: bold; > span { - color: $o-color-pink; + color: $o-enterprise-color; // FIXME probably supposed to be primary to be auto-adapted in enterprise ? } } } diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js index a2c16262b6a..9b23cd52bf3 100644 --- a/addons/web_editor/static/src/js/tours/rte.js +++ b/addons/web_editor/static/src/js/tours/rte.js @@ -311,7 +311,7 @@ tour.register('rte_inline', { trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]', }, { content: "check the font image src", - trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(51,122,183)/28"]', + trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,123,255)/32"]', }, { content: "check the font class to css", trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])', 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 eab28912885..bcd8548fbc4 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -243,21 +243,21 @@ a.o_underline { @include o-create-color-btn-classes(delta, $color-delta); @include o-create-color-btn-classes(epsilon, $color-epsilon); -// Create classes for UI colors -@include o-create-color-classes(primary, $brand-primary); -@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); -@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); -@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); -@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); +// Create classes for UI colors // FIXME +@include o-create-color-classes(primary, theme-color('primary')); +// @include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); +// @include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); +// @include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); +// @include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); // Create classes for greyscale colors -@include o-create-color-classes('black', $gray-base); -@include o-create-color-classes('gray-darker', $gray-darker); -@include o-create-color-classes('gray-dark', $gray-dark); -@include o-create-color-classes('gray', $gray); -@include o-create-color-classes('gray-light', $gray-light); -@include o-create-color-classes('gray-lighter', $gray-lighter); -@include o-create-color-classes('white', $gray-white); +@include o-create-color-classes('black', $black); +@include o-create-color-classes('gray-darker', gray('900')); // FIXME +@include o-create-color-classes('gray-dark', gray('900')); +@include o-create-color-classes('gray', gray('700')); +@include o-create-color-classes('gray-light', gray('600')); +@include o-create-color-classes('gray-lighter', gray('200')); +@include o-create-color-classes('white', $white); // Create classes for greyscale transparent colours @include o-create-color-classes('black-25', $color-black-25); 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 ebd3752b5e8..e22d98a9ffb 100644 --- a/addons/web_editor/static/src/scss/web_editor.ui.scss +++ b/addons/web_editor/static/src/scss/web_editor.ui.scss @@ -59,7 +59,7 @@ } &.btn-primary { - @include button-variant(white, $o-brand-primary, $o-brand-primary); + @include button-variant(white, $o-brand-odoo, $o-brand-odoo); } &.btn-secondary { @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); @@ -251,11 +251,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // DROPZONES @keyframes dropZoneInsert { to { - background-color: rgba($o-brand-primary, 0.2); + background-color: rgba($o-brand-odoo, 0.2); } } #wrapwrap .oe_drop_zone { - background-color: rgba($o-brand-primary, 0.05); + background-color: rgba($o-brand-odoo, 0.05); animation: dropZoneInsert 1s linear 0s infinite alternate; &.oe_insert { @@ -282,7 +282,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &.oe_vertical { - border: 2px dashed $o-brand-primary; + border: 2px dashed $o-brand-odoo; border-left: none; border-right: none; @@ -451,7 +451,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { @include o-position-absolute($top: 5px, $left: 5px); content: "\f00c"; font-family: "FontAwesome"; - color: $o-brand-optional; + color: $o-brand-primary; } } @@ -970,7 +970,7 @@ table.colorpicker { &.selected:after { content: "\f00c"; font-family: "FontAwesome"; - color: $brand-success; + color: theme-color('success'); } &[data-event="foreColor"] { @@ -1089,7 +1089,7 @@ body.editor_enable { } } @keyframes inputHighlighter { - from { background: $o-brand-optional; } + from { background: $o-brand-primary; } to { width: 0; background: transparent; } } @@ -1140,7 +1140,7 @@ body.editor_enable { > input { &:not(:checked) + span { box-shadow: none; - background-image: linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%)); + background-image: linear-gradient(0deg, lighten(theme-color('danger'), 5%), darken(theme-color('danger'), 5%)); } } } @@ -1275,7 +1275,7 @@ body.editor_enable { content: ""; z-index: 1000; display: block; - background-color: $brand-danger; + background-color: theme-color('danger'); opacity: 0.5; pointer-events: none; } @@ -1357,7 +1357,7 @@ body .modal { } .well { - border-color: $gray-lighter; + border-color: gray('200'); border-top-width: 0; } @@ -1394,7 +1394,7 @@ body .modal { } } &.o_selected .o_image { - border-color: $o-brand-primary; + border-color: $o-brand-odoo; box-shadow: 0px 0px 2px 2px $o-brand-secondary; } &:hover .o_existing_attachment_remove { @@ -1585,7 +1585,7 @@ body .modal { display: block; width: 100%; height: 1px; - background: fade-out(lighten($o-brand-optional, 30%), 0.5); + background: fade-out(lighten($o-brand-primary, 30%), 0.5); pointer-events: none; &.grid-2 { top: 66.66% @@ -1659,7 +1659,7 @@ body .modal { } } .o_link_dialog_preview { - border-left: 1px solid $gray-lighter; + border-left: 1px solid gray('200'); } } // Crop Dialog 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 469c66d66cb..37a24e1b79c 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -27,7 +27,7 @@ $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-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default; $o-we-handle-edge-size: 1px !default; $o-we-handle-border-width: 1px !default; @@ -86,7 +86,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-links { a:not(.o_btn_preview) { - color: $o-brand-optional; + color: $o-brand-primary; &:focus, &:active, &:focus:active { outline: none!important; @@ -114,7 +114,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; .has-error { .form-control { - border-color: $state-danger-text; + // border-color: $state-danger-text; // FIXME } } @@ -144,14 +144,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-tabs { .nav-tabs { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); > li { > a { line-height: 1.42857143; color: $o-we-color-light; &:hover { - border-color: $gray-lighter; + border-color: gray('200'); } } @@ -159,7 +159,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; &, &:hover, &:focus { color: $o-we-color-normal; background-color: $o-we-color-paper; - border-color: $gray-lighter; + border-color: gray('200'); border-bottom-color: transparent; } } @@ -175,13 +175,13 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @include button-size(6px, 12px, 14px, 1.42857143, 0); &.btn-primary { - @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%)); + @include button-variant(white, $o-brand-primary, darken($o-brand-primary,5%)); } &.btn-secondary { @include button-variant($o-we-color-normal, white, $o-we-color-text-light); } &.btn-link { - @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant($o-brand-primary, 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%)); @@ -222,8 +222,6 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; // Edition colors // Colors -$gray-white: #fff !default; - $color-alpha: #1cc1a9 !default; $color-beta: #875A7B !default; $color-gamma: #BA3C3D !default; diff --git a/addons/web_settings_dashboard/static/src/scss/dashboard.scss b/addons/web_settings_dashboard/static/src/scss/dashboard.scss index 851f8f1f57d..06a9aeb93f2 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: $o-brand-optional; + color: $o-brand-primary; } } } diff --git a/addons/web_tour/static/src/scss/tip.scss b/addons/web_tour/static/src/scss/tip.scss index 3ed0f986fab..bb11d516c01 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: $o-brand-primary; + $o-tip-color: $o-brand-odoo; $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 d719872c94e..0f9a1a97640 100644 --- a/addons/website/static/src/scss/website.backend.scss +++ b/addons/website/static/src/scss/website.backend.scss @@ -15,7 +15,7 @@ h2, h4 { text-transform: uppercase; margin-top: 0; - color: $o-brand-primary; + color: $o-brand-odoo; } h4 { margin: 0 0 0 8px; } @@ -86,10 +86,10 @@ .nv-series-0 { stroke-width: 3 !important; .nv-point { - stroke: $o-brand-optional; + stroke: $o-brand-primary; stroke-opacity: 1 !important; &.hover { - stroke: darken($o-brand-optional, 10%); + stroke: darken($o-brand-primary, 10%); } } } @@ -107,14 +107,14 @@ .nvtooltip { border-radius: 0; - border: 1px solid $gray-lighter; + border: 1px solid gray('200'); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); .legend-color-guide > div { border: none; } tr:first-child .legend-color-guide > div { - background-color: $o-brand-optional !important; + background-color: $o-brand-primary !important; } tr:last-child .legend-color-guide > div { background-color: darken($o-brand-lightsecondary, 10%) !important; @@ -148,15 +148,15 @@ white-space: nowrap; cursor: pointer; color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; &:hover { - background-color: darken($o-brand-optional, 10%); + background-color: darken($o-brand-primary, 10%); } &.o_primary { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; &:hover { - background-color: darken($o-brand-primary, 10%); + background-color: darken($o-brand-odoo, 10%); } } .o_highlight { @@ -167,7 +167,7 @@ .o_graph_sales { .o_legend0 { - background-color: $o-brand-optional; + background-color: $o-brand-primary; } .o_legend1 { background-color: $o-main-color-muted; @@ -226,7 +226,7 @@ float: right; top: -60px; right: 10px; - border: 1px solid $gray-lighter; + border: 1px solid gray('200'); font-weight: 300; white-space: nowrap; padding: .5em 1.5em; @@ -249,17 +249,17 @@ @keyframes increase { 10% { - background-color: lighten($o-brand-optional, 30%); - border-color: $o-brand-optional; - color: $o-brand-optional; + background-color: lighten($o-brand-primary, 30%); + border-color: $o-brand-primary; + color: $o-brand-primary; } } @keyframes decrease { 10% { - background-color: lighten($o-brand-optional, 30%); - border-color: $o-brand-optional; - color: $o-brand-optional; + background-color: lighten($o-brand-primary, 30%); + border-color: $o-brand-primary; + color: $o-brand-primary; } } } diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index 1d0dfe3fe9c..21586303296 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: $o-brand-primary 0 0 5px 2px inset; + box-shadow: $o-brand-odoo 0 0 5px 2px inset; } } &:focus, &[data-oe-type] { @@ -44,14 +44,14 @@ &.oe_structure.oe_empty, &[data-oe-type=html] { &:empty { - border: 2px dashed $gray-lighter-darker; + border: 2px dashed gray('400'); margin: 20px; padding: 112px 0px; text-align: center; &:before { content: attr(data-editor-message); font-size: 20px; - color: $gray-lighter-darker; + color: gray('400'); } } > p:empty:only-child { diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index aea9e6a5716..9076e9565ca 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -520,10 +520,10 @@ div.carousel { .navbar .o_extra_menu_items.show > ul { > li { + li { - border-top: 1px solid $gray-lighter; + border-top: 1px solid gray('200'); } > a.dropdown-toggle { - background-color: $gray-lighter; + background-color: gray('200'); color: inherit; // Useful when the toggle is active pointer-events: none; // hack to prevent clicking on it because dropdown always opened } diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 5ee27fe7e34..e936f6883cc 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -45,7 +45,7 @@ body.o_connected_user { } &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic { - @include button-variant(white, $o-brand-optional, $o-brand-optional); + @include button-variant(white, $o-brand-primary, $o-brand-primary); } > .fa-plus, > .fa-pencil { @@ -524,15 +524,15 @@ body .modal { } #edit_website_pages { th { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; } td > a.fa { margin-left: 5px; - color: $o-brand-primary; + color: $o-brand-odoo; } .fa-check, .fa-eye-slash { - color: $o-brand-optional; + color: $o-brand-primary; } } diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 09dcf44df59..84622413b7b 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -553,14 +553,14 @@ <template id="default_less"> <style type="text/less"> div#wrap div > h1 { - color: @o-brand-primary; + color: @o-brand-odoo; } </style> </template> <template id="default_scss"> <style type="text/scss"> div#wrap div > h1 { - color: $o-brand-primary; + color: $o-brand-odoo; } </style> </template> diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss index 8c1a4f15b6f..141d77b2c31 100644 --- a/addons/website_blog/static/src/scss/website_blog.scss +++ b/addons/website_blog/static/src/scss/website_blog.scss @@ -224,7 +224,7 @@ .blog_post_year_collapse { cursor: pointer; > i { - color: $brand-primary; + color: theme-color('primary'); } } diff --git a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss b/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss index 72acce86116..38eeb6d00b5 100644 --- a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss +++ b/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss @@ -39,12 +39,12 @@ .s_hr_rating_bar { height: 15px; padding: 1px; - background-color: $gray-lighter; + background-color: gray('200'); border-radius: 2px; &:before { content: ""; border-radius: 2px; - background-color: $brand-primary; + background-color: theme-color('primary'); display: block; @include size(0, 100%); } diff --git a/addons/website_rating/static/src/scss/website_rating.scss b/addons/website_rating/static/src/scss/website_rating.scss index b12678005ae..1d2dd1fd99b 100644 --- a/addons/website_rating/static/src/scss/website_rating.scss +++ b/addons/website_rating/static/src/scss/website_rating.scss @@ -7,7 +7,7 @@ $o-w-rating-star-color: #FACC2E; .o_website_rating_card_container { .o_message_counter { - color: $gray; + color: gray('700'); } /* progress bars */ diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss index 06b6380e2a4..debc7b33572 100644 --- a/addons/website_sale/static/src/scss/website_sale.scss +++ b/addons/website_sale/static/src/scss/website_sale.scss @@ -746,7 +746,7 @@ td.noborder { } .border_primary { - border: 1px solid $o-brand-primary; + border: 1px solid $o-brand-odoo; } .js_change_shipping { diff --git a/addons/website_sale/static/src/scss/website_sale_backend.scss b/addons/website_sale/static/src/scss/website_sale_backend.scss index b5cd1b3fbcb..9220879c743 100644 --- a/addons/website_sale/static/src/scss/website_sale_backend.scss +++ b/addons/website_sale/static/src/scss/website_sale_backend.scss @@ -30,14 +30,14 @@ .o_image_overlay { bottom: 16%; - background: rgba($gray-darker, 0.2); + background: rgba(gray('900'), 0.2); } .o_website_sale_image_card_title { @include o-text-overflow(block); padding:6px; position: relative; - background: $gray-lighter; + background: gray('200'); color:$headings-color; } @@ -54,7 +54,7 @@ font-size: $font-size-sm - 1; &.label-normal { - background-color: $gray-lighter; + background-color: gray('200'); color: $body-color; } } @@ -63,14 +63,14 @@ .o_website_sale_image_modal { .o_website_sale_image_modal_container { - border-left: 1px solid $gray-lighter-darker; + border-left: 1px solid gray('400'); .o_field_image { margin-bottom: 0; - box-shadow: 0 2px 10px $gray-lighter-dark; + box-shadow: 0 2px 10px gray('300'); > img { - border: 1px solid $gray-lighter-darker; + border: 1px solid gray('400'); min-height: 200px; max-height: 350px; // Fallback for browsers that dosn't support responsive units max-height: 50vh; 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 2d3313a51c6..905c7823a8a 100644 --- a/addons/website_sale/static/src/scss/website_sale_dashboard.scss +++ b/addons/website_sale/static/src/scss/website_sale_dashboard.scss @@ -35,7 +35,7 @@ background-color: $o-brand-lightsecondary; } .o_highlight { - color: $o-brand-optional; + color: $o-brand-primary; font-size: 20px; font-weight: bold; } diff --git a/addons/website_sale/static/src/scss/website_sale_frontend.scss b/addons/website_sale/static/src/scss/website_sale_frontend.scss index c119d090e15..613f247a780 100644 --- a/addons/website_sale/static/src/scss/website_sale_frontend.scss +++ b/addons/website_sale/static/src/scss/website_sale_frontend.scss @@ -7,14 +7,14 @@ $o-wsale-wizard-dot-size: 0.625rem; $o-wsale-wizard-dot-active-glow: 0.25rem; $o-wsale-wizard-color-inner: white; -$o-wsale-wizard-color-default: $gray-lighter; +$o-wsale-wizard-color-default: gray('200'); -$o-wsale-wizard-dot-active: $brand-primary; -$o-wsale-wizard-dot-completed: $brand-success; +$o-wsale-wizard-dot-active: theme-color('primary'); +$o-wsale-wizard-dot-completed: theme-color('success'); $o-wsale-wizard-label-default: $text-muted; $o-wsale-wizard-label-active: $body-color; -$o-wsale-wizard-label-completed: $state-success-text; +$o-wsale-wizard-label-completed: $success; .progress-wizard { // Scoped variables diff --git a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss index a5769adb65c..d8c96c7b44b 100644 --- a/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss +++ b/addons/website_sale_comparison/static/src/scss/website_sale_comparison.scss @@ -9,7 +9,7 @@ border-bottom: 0px; padding: 10px 20px; text-align: center; - border: 2px solid $brand-primary; + border: 2px solid theme-color('primary'); border-bottom: 0px; background-color: white; opacity: 0.95; diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss index 4e6e1b9fe7d..dc14211ccfd 100644 --- a/addons/website_slides/static/src/scss/website_slides.scss +++ b/addons/website_slides/static/src/scss/website_slides.scss @@ -1,9 +1,9 @@ // 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; +$info: #dddddd !default; $body-bg: #FFFFFF !default; -$brand-primary: #428bca !default; -$link-color: $brand-primary !default; +$primary: #428bca !default; +$link-color: theme-color('primary') !default; $panel-footer-bg: #f5f5f5 !default; $nav-link-hover-bg: #FFFFFF !default; $navbar-default-link-color: #777 !default; @@ -21,7 +21,7 @@ $MAX-Z-INDEX : 2147483647 !default; } .oe_slides_panel_footer .fa, .oe_slide_js_embed_option_link{ - color : $brand-primary; + color : theme-color('primary'); cursor: pointer; } 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 bb4f5a49bc5..cd83f76a4e7 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 @@ -35,7 +35,7 @@ } &.o_theme_installed .o_theme_preview_top { - border-color: $o-brand-optional; + border-color: $o-brand-primary; > .fa-check-circle { @include o-position-absolute(10px, 10px); |