pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] *: review scss variables handling

Browse Source 
Unlike LESS, SCSS variables are not lazy loaded. Our system has thus
to be updated. This commit creates new templates which are t-called
in assets bundles (to replace the old less_helpers template):

- web._assets_utils: regroups the mixins and functions which *can*
  (and so should) be available in every asset bundle

- web._assets_primary_variables: regroups the variables (or mixins
  used as variables) which *can* (and so should) be available in
  every asset bundle

- web._assets_secondary_variables: same as above but provides an
  environnement where all the 'primary' ones are accessible. This is
  for example useful to handle the community/enterprise split:

  // Community primary variables
  $o-pink-color: pink; // enterprise color
  $o-brand-primary: blue;

  // Enterprise primary variables
  $o-brand-primary: $o-pink-color;

  // Community secondary variables
  $o-my-darker-primary: darken($o-brand-primary, 5%);

  => If there was only one variable template, enterprise edition would
     have been able to define its primary color at the end but the
     darker primary would not have been updated. Using the "!default"
     system and putting enterprise definition above would not have
     solved the problem as the $o-pink-color would not have been
     accessible.

- web._assets_backend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the backend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

- web._assets_frontend_helpers: regroups the variables, mixins and
  functions which *can* (and so should) be available in the frontend
  asset bundle only. This is especially (only?) useful for bootstrap
  variables overriddes.

Note: bootstrap variables are not accessible in any of those anymore.
If you have variables that should depend on bootstrap, you have 3
solutions:

- Find another way: your variable is probably useless, use bootstrap
  variables directly or create a variable that will influence the
  value of bootstrap variables. E.g. instead of declaring:
  `$myvar: $bootstrapvar * 3`
  and using $myvar alone, declare:
  `$myvar: 3` and use `$myvar * $bootstrapvar` where needed.

- Declare a copy of the bootstrap variable and use that one. In that
  case, you should also force-set the real bootstrap one to be sure
  they match (this should be done in appropriate templates mentioned
  above). E.g.
  ```
  $o-boostrapvar: 5;
  ...
  $boostrapvar: $o-bootstrapvar;
  ```

- Set your variable to null and set it to your bootstrap expression
  in the file you will need it (where bootstrap variables are accessible)
  without forgetting to add the !default flag to allow overriddes.
  ```
  $myvar: null;
  ...
  $myvar: $bootstrapvar * 5 !default;
  ```

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