diff options
| author | qsm-odoo <qsm@odoo.com> | 2018-03-12 16:24:31 +0100 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2018-04-18 15:59:19 +0200 |
| commit | 6e4db7d13a926845bf82f5b035afede42d6d5a89 (patch) | |
| tree | a9804dbe2b2844faff9359560102d222d0e37654 /addons/web/static | |
| parent | fbfd0119041ca7dc830796e76d9ae5c303459d4f (diff) | |
[REF] *: review scss variables handling
Unlike LESS, SCSS variables are not lazy loaded. Our system has thus
to be updated. This commit creates new templates which are t-called
in assets bundles (to replace the old less_helpers template):
- web._assets_utils: regroups the mixins and functions which *can*
(and so should) be available in every asset bundle
- web._assets_primary_variables: regroups the variables (or mixins
used as variables) which *can* (and so should) be available in
every asset bundle
- web._assets_secondary_variables: same as above but provides an
environnement where all the 'primary' ones are accessible. This is
for example useful to handle the community/enterprise split:
// Community primary variables
$o-pink-color: pink; // enterprise color
$o-brand-primary: blue;
// Enterprise primary variables
$o-brand-primary: $o-pink-color;
// Community secondary variables
$o-my-darker-primary: darken($o-brand-primary, 5%);
=> If there was only one variable template, enterprise edition would
have been able to define its primary color at the end but the
darker primary would not have been updated. Using the "!default"
system and putting enterprise definition above would not have
solved the problem as the $o-pink-color would not have been
accessible.
- web._assets_backend_helpers: regroups the variables, mixins and
functions which *can* (and so should) be available in the backend
asset bundle only. This is especially (only?) useful for bootstrap
variables overriddes.
- web._assets_frontend_helpers: regroups the variables, mixins and
functions which *can* (and so should) be available in the frontend
asset bundle only. This is especially (only?) useful for bootstrap
variables overriddes.
Note: bootstrap variables are not accessible in any of those anymore.
If you have variables that should depend on bootstrap, you have 3
solutions:
- Find another way: your variable is probably useless, use bootstrap
variables directly or create a variable that will influence the
value of bootstrap variables. E.g. instead of declaring:
`$myvar: $bootstrapvar * 3`
and using $myvar alone, declare:
`$myvar: 3` and use `$myvar * $bootstrapvar` where needed.
- Declare a copy of the bootstrap variable and use that one. In that
case, you should also force-set the real bootstrap one to be sure
they match (this should be done in appropriate templates mentioned
above). E.g.
```
$o-boostrapvar: 5;
...
$boostrapvar: $o-bootstrapvar;
```
- Set your variable to null and set it to your bootstrap expression
in the file you will need it (where bootstrap variables are accessible)
without forgetting to add the !default flag to allow overriddes.
```
$myvar: null;
...
$myvar: $bootstrapvar * 5 !default;
```
This commit also partly changes the variable names to follow the
convention:
$o-<app_id>-<name> where 'app_id' is the current's app name or a
meaningful unique identifier ("theme" for all themes for example, as
no multiple themes can be installed).
Diffstat (limited to 'addons/web/static')
39 files changed, 641 insertions, 651 deletions
diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss index 7904e6143e7..7cd25c7e578 100644 --- a/addons/web/static/src/scss/base_settings.scss +++ b/addons/web/static/src/scss/base_settings.scss @@ -1,13 +1,9 @@ -// VARIABLES -$o-base-settings-mobile-tabs-height: 40px; -$o-base-settings-mobile-tabs-overflow-gap: 3%; - // MIXINS @mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) { - padding: $padding-base $odoo-horizontal-padding; + padding: $padding-base $o-horizontal-padding; @media (min-width: $screen-lg-min) { - padding-left: $odoo-horizontal-padding*2;; + padding-left: $o-horizontal-padding*2;; } } @@ -30,7 +26,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .o_panel { @include o-flex-display; @include o-flex-flow(row, wrap); - margin-bottom: $odoo-sheet-vpadding*0.5; + margin-bottom: $o-sheet-vpadding*0.5; width: 100%; .title, .o_setting_search { @@ -89,7 +85,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; @include o-flex-flow(column, nowrap); background: $gray-dark; overflow: auto; - padding-top: $odoo-horizontal-padding*0.5; + padding-top: $o-horizontal-padding*0.5; @media (max-width: $screen-xs-max) { @include o-flex(0, 0, $o-base-settings-mobile-tabs-height); @@ -101,7 +97,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .selected { background-color: $gray-darker; - box-shadow: inset 3px 0 0 $odoo-brand-optional; + box-shadow: inset 3px 0 0 $o-brand-optional; .app_name { color: white; @@ -110,7 +106,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .tab { @include o-flex-display; - padding: 0 $odoo-horizontal-padding*2 0 $odoo-horizontal-padding; + padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding; height: 40px; color: $gray-lighter-darker; font-size: 13px; @@ -142,7 +138,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; &:after { content: ''; - background: $odoo-brand-optional; + background: $o-brand-optional; opacity: 0; @include o-position-absolute(auto, 0, 0, 0); @include size(100%, 3px); @@ -176,7 +172,7 @@ $o-base-settings-mobile-tabs-overflow-gap: 3%; .settings { position: relative; @include o-flex(1, 1, 100%); - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; overflow: auto; > .app_settings_block { diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 9a364231415..9701ead0539 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -3,44 +3,53 @@ // ------------------------------------------------------------------ //== Grid -$grid-gutter-width: $odoo-horizontal-padding*2; +$grid-gutter-width: $o-horizontal-padding*2; //== Colors -$brand-primary: $odoo-brand-primary; -$gray-lighter: $odoo-color-silver; +$brand-primary: $o-brand-primary; + +//== Greyscale +$gray-base: #000; +$gray-darker: lighten($gray-base, 13.5%); +$gray-dark: lighten($gray-base, 20%); +$gray: lighten($gray-base, 33.5%); +$gray-light: $o-color-gray-light; +$gray-lighter: $o-color-silver; //== Titles -$font-size-h1: $odoo-font-size-base + 13px; -$font-size-h2: $odoo-font-size-base + 7px; -$font-size-h3: $odoo-font-size-base + 3px; -$font-size-h4: $odoo-font-size-base + 2px; -$font-size-h5: $odoo-font-size-base + 1px; -$font-size-h6: $odoo-font-size-base; +$font-size-h1: $o-font-size-base + 13px; +$font-size-h2: $o-font-size-base + 7px; +$font-size-h3: $o-font-size-base + 3px; +$font-size-h4: $o-font-size-base + 2px; +$font-size-h5: $o-font-size-base + 1px; +$font-size-h6: $o-font-size-base; //== Scaffolding -$body-bg: $odoo-brand-secondary; -$text-color: $odoo-main-text-color; -$link-color: $odoo-brand-optional; +$body-bg: $o-brand-secondary; +$text-color: $o-main-text-color; +$link-color: $o-brand-optional; $link-hover-decoration: none; //== Typography $font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; -$font-size-base: $odoo-font-size-base; +$font-size-base: $o-font-size-base; $headings-font-weight: bold; +$line-height-base: $o-line-height-base; //== Components +$border-radius-base: 3px; $component-active-bg: $gray-lighter; -$component-active-color: $odoo-brand-optional; +$component-active-color: $o-brand-optional; //== Badges -$badge-bg: $odoo-brand-optional; +$badge-bg: $o-brand-optional; $badge-color: white; -$badge-line-height: $line-height-base; +$badge-line-height: $o-line-height-base; $badge-font-weight: normal; //== Breadcrumbs $breadcrumb-active-color: #777777; -$breadcrumb-bg: $odoo-control-panel-background-color; +$breadcrumb-bg: $o-control-panel-background-color; $breadcrumb-color: #777777; $breadcrumb-padding-horizontal: 0; $breadcrumb-padding-vertical: 0; @@ -48,16 +57,16 @@ $breadcrumb-padding-vertical: 0; //== Buttons $btn-default-bg: white; $btn-default-border: #cccccc; -$btn-default-color: $odoo-main-text-color; -$btn-primary-bg: $odoo-brand-optional; -$btn-primary-border: $odoo-brand-optional; +$btn-default-color: $o-main-text-color; +$btn-primary-bg: $o-brand-optional; +$btn-primary-border: $o-brand-optional; $btn-primary-color: white; //== Dropdowns $dropdown-bg: white; $dropdown-border: $gray-lighter-dark; $dropdown-divider-bg: $gray-lighter-dark; -$dropdown-link-color: $odoo-main-text-color; +$dropdown-link-color: $o-main-text-color; $dropdown-link-hover-color: $gray-dark; $dropdown-link-hover-bg: $gray-lighter; $dropdown-link-active-color: $component-active-color; @@ -69,8 +78,8 @@ $dropdown-header-color: $gray-light; $modal-sm: 300px; $modal-md: 650px; $modal-lg: 980px; -$modal-inner-padding: $odoo-horizontal-padding; -$modal-title-padding: $odoo-horizontal-padding; +$modal-inner-padding: $o-horizontal-padding; +$modal-title-padding: $o-horizontal-padding; // Change the z-index of the modal-backdrop elements to be equal to the // modal elements' ones. Bootstrap does not support multi-modals, and without @@ -92,11 +101,11 @@ $modal-title-padding: $odoo-horizontal-padding; $nav-link-padding: 10px 15px; $nav-pills-border-radius: 0; $nav-pills-active-link-hover-color: white; -$nav-pills-active-link-hover-bg: $odoo-brand-optional; +$nav-pills-active-link-hover-bg: $o-brand-optional; $nav-tabs-active-link-hover-bg: white; //== Navbar -$navbar-height: $odoo-navbar-height - 2; +$navbar-height: $o-navbar-height - 2; $navbar-margin-bottom: 0; $navbar-inverse-bg: #222222; $navbar-inverse-link-color: #9d9d9d; @@ -108,61 +117,4 @@ $navbar-border-radius: 0; $table-bg-accent: #efeff8; // FIXME: expose $table-bg-hover: darken($table-bg-accent,5%); -// ------------------------------------------------------------------ -// Bootstrap components rules (non exposed features variables) -// ------------------------------------------------------------------ - -//== Badges -.badge { - margin: 1px 2px 1px 0; - padding-top: 0; - padding-bottom: 0; -} - -//== Buttons -// Mixin to define variations for btn-links and muted btn-links -@mixin o-btn-link-variant($color, $color-active) { - text-transform: none; - @include o-hover-text-color($default-color: $color, $hover-color: $color-active); - - &, &:hover, &:focus, &:active, &.active { - border-color: transparent; - background-color: transparent - } - - &.text-muted, .text-muted { - @include o-hover-opacity; - @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active); - } -} -.btn-icon { - @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); -} -.btn-link { - font-weight: $btn-font-weight; - - &.btn-default { - @include o-btn-link-variant($text-color, $headings-color); - } - &.btn-success, &.text-success { - @include o-btn-link-variant($text-color, $brand-success); - } - &.btn-warning, &.text-warning { - @include o-btn-link-variant($text-color, $brand-warning); - } - &.btn-danger, &.text-danger { - @include o-btn-link-variant($text-color, $brand-danger); - } - &.btn-info, &.text-info { - @include o-btn-link-variant($text-color, darken($brand-info, 20%)); - } -} - -//== Printing improvements -@media print { - .table-responsive { - overflow-x: initial; - } -} - -@icon-font-path: "/web/static/lib/bootstrap/fonts/"; +$icon-font-path: "/web/static/lib/bootstrap/fonts/"; diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss new file mode 100644 index 00000000000..e69de29bb2d --- /dev/null +++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss index 4174db62c6a..447a1a587cc 100644 --- a/addons/web/static/src/scss/control_panel.scss +++ b/addons/web/static/src/scss/control_panel.scss @@ -1,11 +1,10 @@ -$breadcrumb-height: 30px; .o_control_panel { @include o-flex-display; @include o-flex-flow(row, wrap); - border-bottom: 1px solid darken($odoo-control-panel-background-color, 20%); + border-bottom: 1px solid darken($o-control-panel-background-color, 20%); @include o-webclient-padding($top: 10px, $bottom: 10px); - background-color: $odoo-control-panel-background-color; + background-color: $o-control-panel-background-color; > .breadcrumb { width: 50%; @@ -27,7 +26,7 @@ $breadcrumb-height: 30px; > .o_cp_searchview { width: 50%; - min-height: $breadcrumb-height; + min-height: $o-cp-breadcrumb-height; } .btn.o_enable_searchview { @@ -93,7 +92,7 @@ $breadcrumb-height: 30px; } > .o_cp_switch_buttons > .btn:first-child { - margin-left: $odoo-horizontal-padding; + margin-left: $o-horizontal-padding; } } } diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss index 3ce97ea1c8b..aa690cfdb74 100644 --- a/addons/web/static/src/scss/data_export.scss +++ b/addons/web/static/src/scss/data_export.scss @@ -58,7 +58,7 @@ } .o_left_field_panel, .o_fields_list { - border: 1px solid $odoo-brand-lightsecondary; + border: 1px solid $o-brand-lightsecondary; overflow: auto; @include o-flex(1, 1, auto); min-height: 0; @@ -71,7 +71,7 @@ @include user-select(none); &.o_selected > .o_tree_column { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; } @@ -82,7 +82,7 @@ display: block; &.o_required { - border-bottom: 2px solid $odoo-main-text-color; + border-bottom: 2px solid $o-main-text-color; } } diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss index d8650b6b409..d8d4ba1d520 100644 --- a/addons/web/static/src/scss/datepicker.scss +++ b/addons/web/static/src/scss/datepicker.scss @@ -1,5 +1,3 @@ -$odoo-datepicker-week-color: #8f8f8f; -$odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%); .sr-only { position: absolute; @@ -40,19 +38,19 @@ $odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%); .table-condensed { > thead { color: white; - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; > tr { &:first-child { th:hover { color: white; - background-color: darken($odoo-brand-primary, 10%); + background-color: darken($o-brand-primary, 10%); } } &:last-child { - color: $odoo-datepicker-week-color; - background-color: $odoo-datepicker-week-bg-color; + color: $o-datepicker-week-color; + background-color: $o-datepicker-week-bg-color; } > th { border-radius: 0; @@ -64,12 +62,12 @@ $odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%); > tr { > td { &.active, .active { - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; border-radius: 100px; } &.today:before { - border-bottom-color: $odoo-brand-optional; + border-bottom-color: $o-brand-optional; } } } diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss index 1fde477164d..6755bed49e9 100644 --- a/addons/web/static/src/scss/domain_selector.scss +++ b/addons/web/static/src/scss/domain_selector.scss @@ -97,8 +97,8 @@ } > .o_domain_leaf_info { - background: $odoo-brand-lightsecondary; - border: 1px solid darken($odoo-brand-lightsecondary, 10%); + background: $o-brand-lightsecondary; + border: 1px solid darken($o-brand-lightsecondary, 10%); padding: 2px 4px; > .o_field_selector { @@ -172,7 +172,7 @@ display: block; height: $o-domain-animation-bar-height; max-height: 0; - @include o-linear-gradient(45deg, rgba($odoo-brand-optional, 0.4), rgba($odoo-brand-optional, 0.1)); + @include o-linear-gradient(45deg, rgba($o-brand-optional, 0.4), rgba($o-brand-optional, 0.1)); @include o-transition(max-height, .05s, ease, .05s); } diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss index ed979ae3a00..d0bfd1d2586 100644 --- a/addons/web/static/src/scss/dropdown.scss +++ b/addons/web/static/src/scss/dropdown.scss @@ -1,5 +1,5 @@ %dropdown-li-a-padding { - padding: 3px $odoo-dropdown-hpadding; + padding: 3px $o-dropdown-hpadding; } .ui-autocomplete { // Copy style of bootstrap dropdown @@ -21,7 +21,7 @@ &.ui-state-focus { background-image: none; - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; border: none; font-weight: normal; margin: 0; @@ -29,7 +29,7 @@ &.o_m2o_dropdown_option { padding-left: 20px; > a { - color: $odoo-brand-primary; + color: $o-brand-primary; } } } @@ -64,7 +64,7 @@ &.dropdown-header { @extend %dropdown-li-a-padding; - color: $odoo-main-text-color; + color: $o-main-text-color; @media (max-width: $screen-xs-max) { color: white; diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss index d15496fe0c9..c14144e02d3 100644 --- a/addons/web/static/src/scss/dropdown_extra.scss +++ b/addons/web/static/src/scss/dropdown_extra.scss @@ -1,9 +1,9 @@ .ui-autocomplete .ui-menu-item { &.ui-state-focus { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; } &.o_m2o_dropdown_option > a { - color: $odoo-brand-primary; + color: $o-brand-primary; } &.ui-state-focus > a, &.ui-state-focus.o_m2o_dropdown_option > a { @@ -11,7 +11,6 @@ } } -$tag-border: #afafb6; .oe_dropdown, .oe_dropdown_toggle { position: relative; cursor: pointer; @@ -25,7 +24,7 @@ $tag-border: #afafb6; position: absolute; z-index: 3; margin: 0; - border: 1px solid $tag-border; + border: 1px solid #afafb6; background: white; padding: 4px 0; min-width: 140px; diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss index f28e3ba349c..04c81dab96c 100644 --- a/addons/web/static/src/scss/fields.scss +++ b/addons/web/static/src/scss/fields.scss @@ -112,10 +112,10 @@ // o-kanban-colorpicker without customizing // '&:first-child > a::before' (transparent red-crossed colorpick) @mixin o-tag-colorpicker { - $o-tag-colorpicker-padding-right: $odoo-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion + $o-tag-colorpicker-padding-right: $o-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion max-width: 100%; - padding: 3px $o-tag-colorpicker-padding-right 3px $odoo-dropdown-hpadding; + padding: 3px $o-tag-colorpicker-padding-right 3px $o-dropdown-hpadding; > li { display: inline-block; @@ -136,7 +136,7 @@ &:last-of-type { box-shadow: 0 0 0 0px white; // remove grey border on hide in kanban - color: $odoo-main-text-color; + color: $o-main-text-color; } } } @@ -156,20 +156,20 @@ } } - @for $size from 1 through $odoo-nb-ui-color { + @for $size from 1 through length($o-colors) { .o_tag_color_#{$size - 1} { @if $size == 1 { & { background-color: white; - color: nth($odoo-colors, $size); - box-shadow: inset 0 0 0 2px nth($odoo-colors, $size); + color: nth($o-colors, $size); + box-shadow: inset 0 0 0 2px nth($o-colors, $size); } &::after { - background-color: nth($odoo-colors, $size); + background-color: nth($o-colors, $size); } } @else { &, &::after { - background-color: nth($odoo-colors, $size); + background-color: nth($o-colors, $size); } } } @@ -195,7 +195,7 @@ } &.fa-star-o { - color: $odoo-main-color-muted; + color: $o-main-color-muted; } &.fa-star { color: gold; @@ -209,7 +209,7 @@ font-size: 16px; } i.fa-star-o { - color: $odoo-main-color-muted; + color: $o-main-color-muted; &:hover { color: gold; } @@ -242,7 +242,7 @@ > input { @include o-flex(0, 0, auto); - margin: 0 $odoo-form-spacing-unit 0 0; + margin: 0 $o-form-spacing-unit 0 0; } > label { margin: 0; @@ -251,14 +251,14 @@ &.o_horizontal { .o_radio_item { - margin-right: $odoo-form-spacing-unit * 2; + margin-right: $o-form-spacing-unit * 2; } } &.o_vertical { @include o-flex-flow(column, nowrap); .o_radio_item { - margin-bottom: $odoo-form-spacing-unit; + margin-bottom: $o-form-spacing-unit; } } } @@ -274,7 +274,7 @@ margin-right: 10px; border-radius: 100%; overflow: hidden; - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; &:after { // Outside pie border to go over border-radius irregularities content: " "; @@ -289,7 +289,7 @@ @include o-transform-origin(0); width: 50%; height: 100%; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; &.o_full { background-color: inherit; } @@ -303,7 +303,7 @@ border-radius: 100%; font-weight: 700; - color: $odoo-brand-primary; + color: $o-brand-primary; } } } @@ -326,7 +326,7 @@ width: 100%; color: white; - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; opacity: 0; transition: opacity ease 400ms; @@ -345,7 +345,7 @@ margin: 0px; text-align: center; &.o_select_file_button{ - background: $odoo-brand-optional; + background: $o-brand-optional; } &.o_clear_file_button{ background: $brand-danger; diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss index dd441c07710..7e45291305f 100644 --- a/addons/web/static/src/scss/fields_extra.scss +++ b/addons/web/static/src/scss/fields_extra.scss @@ -43,7 +43,7 @@ margin-left: 5px; &:after { // Outside pie border to go over border-radius irregularities - border: 1px solid $odoo-brand-primary; + border: 1px solid $o-brand-primary; } .o_pie_value { diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss index c5e0207022d..e4dfdca3811 100644 --- a/addons/web/static/src/scss/form_view.scss +++ b/addons/web/static/src/scss/form_view.scss @@ -1,5 +1,5 @@ .o_form_view { - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; // Utility classes .oe_form_box_info { @@ -40,13 +40,13 @@ @include o-align-items(baseline); min-width: 50px; - margin: 0 -$odoo-form-spacing-unit/2; + margin: 0 -$o-form-spacing-unit/2; > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule @include o-flex(0, 0, auto); width: auto!important; - margin-right: $odoo-form-spacing-unit/2; - margin-left: $odoo-form-spacing-unit/2; + margin-right: $o-form-spacing-unit/2; + margin-left: $o-form-spacing-unit/2; } > .o_row { @@ -81,12 +81,12 @@ .o_form_uri { display: inline-block; - color: $odoo-main-text-color; + color: $o-main-text-color; &:first-line { color: $link-color; } &:hover { - color: darken($odoo-main-text-color, 1%); // hack required on chrome + color: darken($o-main-text-color, 1%); // hack required on chrome &:first-line { color: darken($link-color, 15%); } @@ -100,7 +100,7 @@ } .oe_title { - max-width: $container-sm - (2 * $odoo-horizontal-padding); + max-width: $container-sm - (2 * $o-horizontal-padding); } @media (min-width: $screen-xs-min) { @@ -121,10 +121,10 @@ // No sheet &.o_form_nosheet { display: block; - @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding); + @include o-webclient-padding($top: $o-sheet-vpadding, $bottom: $o-sheet-vpadding); .o_form_statusbar { - margin: -$odoo-sheet-vpadding -$odoo-horizontal-padding $odoo-sheet-vpadding -$odoo-horizontal-padding; + margin: -$o-sheet-vpadding -$o-horizontal-padding $o-sheet-vpadding -$o-horizontal-padding; } } @@ -133,7 +133,7 @@ position: relative; > .o_form_sheet { - margin: $odoo-sheet-vpadding auto; + margin: $o-sheet-vpadding auto; } } @@ -142,9 +142,9 @@ position: relative; // Needed for the "More" dropdown @include o-flex-display; @include o-justify-content(space-between); - padding-left: $odoo-horizontal-padding; + padding-left: $o-horizontal-padding; border-bottom: 1px solid $gray-lighter-darker; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; > .o_statusbar_buttons, > .o_statusbar_status { @include o-flex-display; @@ -162,7 +162,7 @@ > .btn { $o-statusbar-buttons-vmargin: 4px; - min-height: $odoo-statusbar-height - 2 * $o-statusbar-buttons-vmargin; + min-height: $o-statusbar-height - 2 * $o-statusbar-buttons-vmargin; margin: $o-statusbar-buttons-vmargin 3px $o-statusbar-buttons-vmargin 0; padding-top: 2px; padding-bottom: 2px; @@ -177,21 +177,21 @@ overflow-x: hidden; // to prevent horizontal scroll due to last arrow > .o_arrow_button { - min-height: $odoo-statusbar-height; + min-height: $o-statusbar-height; font-size: 11px; font-weight: bold; position: relative; - padding-left: $odoo-statusbar-arrow-width*2; + padding-left: $o-statusbar-arrow-width*2; color: $gray; border-width: 0 0 0; border-radius: 0; @include o-transition(all, 0.1s); &:first-child { - padding-right: $odoo-horizontal-padding; // Compensate container padding + padding-right: $o-horizontal-padding; // Compensate container padding } &:last-child { - padding-left: $odoo-horizontal-padding - 1; + padding-left: $o-horizontal-padding - 1; border-left: 1px solid $gray-lighter-darker; } @@ -209,19 +209,19 @@ &:before, &:after { content: " "; display: block; - @include o-position-absolute(0, -$odoo-statusbar-arrow-width + 1); + @include o-position-absolute(0, -$o-statusbar-arrow-width + 1); - border-top: floor($odoo-statusbar-height/2) solid transparent; - border-bottom: ceil($odoo-statusbar-height/2) solid transparent; + border-top: floor($o-statusbar-height/2) solid transparent; + border-bottom: ceil($o-statusbar-height/2) solid transparent; border-right: none; - border-left: $odoo-statusbar-arrow-width solid $odoo-view-background-color; + border-left: $o-statusbar-arrow-width solid $o-view-background-color; @include o-transition(border, 0.2s); -moz-transform: scale(0.9999); // Smooth the triangle on firefox } &:not(.disabled) { &:hover, &:active, &:focus { - color: $odoo-brand-optional; + color: $o-brand-optional; background-color: $gray-lighter; &:after { @@ -231,12 +231,12 @@ } &:before { - right: -$odoo-statusbar-arrow-width; + right: -$o-statusbar-arrow-width; border-left-color: $gray-lighter-dark; } &.btn-primary.disabled { - color: $odoo-brand-primary; + color: $o-brand-primary; font-size: 11px; background-color: $gray-lighter; cursor: default; @@ -266,7 +266,7 @@ > .dropdown-toggle { &:after { @include o-caret-down; - margin-left: $odoo-form-spacing-unit; + margin-left: $o-form-spacing-unit; } } @@ -314,7 +314,7 @@ margin: 10px 0; // o_group contains nested groups - @for $i from 1 through $odoo-form-group-cols { + @for $i from 1 through $o-form-group-cols { .o_group_col_#{$i} { display: inline-block; width: floor(100% / 12 * $i); @@ -378,16 +378,16 @@ // Separators .o_horizontal_separator { font-size: $font-size-h2; - margin: $odoo-form-spacing-unit 0; + margin: $o-form-spacing-unit 0; &:empty { - height: $odoo-form-spacing-unit * 2; + height: $o-form-spacing-unit * 2; } } // Notebooks .o_notebook { clear: both; // For the notebook not to have alongside floating elements - margin-top: $odoo-form-spacing-unit * 2; + margin-top: $o-form-spacing-unit * 2; .nav-tabs > .tab-pane { min-height: 100px; @@ -396,14 +396,14 @@ // Labels .o_form_label { - margin: 0 $odoo-form-spacing-unit 0 0; + margin: 0 $o-form-spacing-unit 0 0; font-size: $font-size-base; // The label muse have the same size whatever their position line-height: $line-height-base; } // Form fields .o_field_widget { - margin-bottom: $odoo-form-spacing-unit; + margin-bottom: $o-form-spacing-unit; } .o_field_widget, .btn { .o_field_widget { @@ -554,7 +554,7 @@ // Boolean .o_field_boolean { - margin: 0 $odoo-form-spacing-unit 0 0; + margin: 0 $o-form-spacing-unit 0 0; } // Timezone widget warning @@ -580,7 +580,7 @@ > tfoot > tr > td { padding: 3px; - color: $odoo-main-text-color; + color: $o-main-text-color; } } &.o_form_readonly .o_field_widget .o_list_view .o_row_handle { @@ -590,9 +590,9 @@ // Attachments .oe_attachment { display: inline-block; - border: 1px solid $odoo-brand-lightsecondary; - margin: 0 $odoo-form-spacing-unit $odoo-form-spacing-unit 0; - padding: $odoo-form-spacing-unit; + border: 1px solid $o-brand-lightsecondary; + margin: 0 $o-form-spacing-unit $o-form-spacing-unit 0; + padding: $o-form-spacing-unit; } &.oe_form_configuration { @@ -653,7 +653,7 @@ label.o_light_label, .o_light_label label { // XXS form view specific rules @mixin form-break-table { display: block; - margin-bottom: $odoo-form-spacing-unit * 4; + margin-bottom: $o-form-spacing-unit * 4; > tbody { display: block; @@ -671,11 +671,11 @@ label.o_light_label, .o_light_label label { width: auto!important; // !important is required to override the width computed in JS &.o_td_label { width: 94%!important; // The label must be on its own line except if the form field is small enough (checkbox) - line-height: $odoo-label-font-size-factor; + line-height: $o-label-font-size-factor; } .o_field_widget { - margin-bottom: $odoo-form-spacing-unit * 2; + margin-bottom: $o-form-spacing-unit * 2; &.o_field_boolean { margin-right: 0; } diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss index f401ecdda56..29c2512c1ab 100644 --- a/addons/web/static/src/scss/form_view_extra.scss +++ b/addons/web/static/src/scss/form_view_extra.scss @@ -1,8 +1,8 @@ -$sheet-max-width: 860px; -$sheet-min-width: 650px; -$sheet-padding: 16px; - .o_form_view { + $sheet-max-width: 860px; + $sheet-min-width: 650px; + $sheet-padding: 16px; + &.o_form_nosheet.oe_form_nomargin { margin: 0; } @@ -75,7 +75,7 @@ $sheet-padding: 16px; .o_stat_value { @include o-text-overflow(block); font-weight: 700; - color: $odoo-brand-primary; + color: $o-brand-primary; } .o_stat_text { @include o-text-overflow(block); @@ -144,7 +144,7 @@ $sheet-padding: 16px; // Separators .o_horizontal_separator { - color: $odoo-brand-optional; + color: $o-brand-optional; font-weight: bold; } diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss index 62e94e926ce..4666d68ae61 100644 --- a/addons/web/static/src/scss/graph_view.scss +++ b/addons/web/static/src/scss/graph_view.scss @@ -3,7 +3,7 @@ height: 100%; overflow: auto; svg { - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; } } } diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss index 9a54bbd8067..2cb35d33a2e 100644 --- a/addons/web/static/src/scss/kanban_column_progressbar.scss +++ b/addons/web/static/src/scss/kanban_column_progressbar.scss @@ -1,10 +1,9 @@ -$o-kanban-counter-header-height: $o-kanban-header-title-height*0.6; @mixin o-kanban-css-filter($class, $accent-color) { // Provide CSS reordering and highlight &.o_kanban_group_show_#{$class} { - $mix-soft: mix($accent-color, $odoo-webclient-background-color, 5%); - $mix-full: mix($accent-color, $odoo-webclient-background-color); + $mix-soft: mix($accent-color, $o-webclient-background-color, 5%); + $mix-full: mix($accent-color, $o-webclient-background-color); &, .o_kanban_header { background-color: $mix-soft; @@ -44,7 +43,7 @@ $o-kanban-counter-header-height: $o-kanban-header-title-height*0.6; // If columns has the progressbar, adapt the layout .o_kanban_view .o_kanban_group.o_kanban_has_progressbar { > .o_kanban_header .o_kanban_header_title { - height: $o-kanban-counter-header-height; + height: $o-kanban-header-title-height*0.6; margin-top: 5px; } diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss index 791b582efd1..3f3b2185b58 100644 --- a/addons/web/static/src/scss/kanban_dashboard.scss +++ b/addons/web/static/src/scss/kanban_dashboard.scss @@ -1,176 +1,3 @@ -// FIXME variables and mixins were moved from kanban_view.scss to here as this -// file is placed before in the assets template (and changing file order may -// break selector priorities). - -$o-kanban-record-margin: $odoo-horizontal-padding/2; -$o-kanban-group-padding: $odoo-horizontal-padding; // Cannot be higher than this - -$o-kanban-default-record-width: 300px; -$o-kanban-small-record-width: 240px; - -$o-kanban-header-title-height: 50px; - -$o-kanban-image-width: 64px; -$o-kanban-inside-vgutter: 8px; -$o-kanban-inside-hgutter: 8px; -$o-kanban-color-border-width: 3px; -$o-kanban-inside-hgutter-mobile: $odoo-horizontal-padding; -$o-kanban-inner-hmargin: 5px; -$o-kanban-progressbar-height: 20px; - -// ------- Kanban grouped mixins ------- -@mixin o-kanban-icon($base-opacity: 0.5) { - display: block; - text-align: center; - color: $odoo-main-text-color; - font-size: $font-size-small; - cursor: pointer; - @include o-hover-opacity($base-opacity); -} -@mixin o-kanban-tag-color { - @for $size from 1 through $odoo-nb-ui-color { - // Note: the first color is supposed to be invisible if there is a color - // field but it is used as a default color when there is no color field - &.o_tag_color_#{$size - 1} span { - background-color: nth($odoo-colors, $size); - } - } -} -@mixin o-kanban-record-color { - @for $size from 2 through $odoo-nb-ui-color { - // Note: the first color is not defined as it is the 'no color' for kanban - .oe_kanban_color_#{$size - 1}::after { - background-color: nth($odoo-colors, $size); - } - } -} -@mixin o-kanban-slim-col { - position: relative; - @include o-flex(0, 0, auto); - margin: 0; - padding: 0 floor($o-kanban-group-padding * 0.7); - cursor: pointer; -} -@mixin o-kanban-header-title { - @include o-flex-display; - @include o-align-items(center); - height: $o-kanban-header-title-height; - line-height: 2.2; - color: $headings-color; -} -@mixin o-kanban-v-title { - @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2)); - @include o-transform-origin(left, bottom, $z: 0); - @include o-transform(rotate(90deg)); - overflow: visible; - white-space: nowrap; - font-size: 15px; -} - -// ------- Kanban records mixins ------- -@mixin o-kanban-record-title($font-size) { - color: $headings-color; - font-size: $font-size; - font-weight: 500; - margin-bottom: 0; - margin-top: 0; -} -@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) { - margin: -1px -1px auto auto; // compensate border - padding: $padding-base/2 $padding-base; - border: 1px solid transparent; - border-bottom: none; - vertical-align: top; - color: $text-color; - - &:hover { - color: $headings-color; - } - &:focus, &:active, &:focus:active { - outline: none; - } -} -@mixin o-kanban-dropdown-open { - position: relative; - background: white; - border-color: $gray-lighter-darker; - z-index: $zindex-dropdown + 1; -} -@mixin o-kanban-dropdown-menu { - @include o-position-absolute($right: -1px); - margin-top: -1px; - border-color: $gray-lighter-darker; -} -@mixin o-kanban-colorpicker { - max-width: 150px; - padding: 3px ($odoo-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $odoo-dropdown-hpadding; - - > li { - display: inline-block; - margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0; - border: 1px solid white; - box-shadow: 0 0 0 1px $gray-lighter-dark; - - > a { - display: block; - - &::after { - content: ""; - display: block; - width: 20px; - height: 15px; - } - } - - // No Color - &:first-child > a { - position: relative; - &::before { - content: ""; - @include o-position-absolute(-2px, $left: 10px); - display: block; - width: 1px; - height: 20px; - @include rotate(45deg); - background-color: red; - } - &::after { - background-color: white; - } - } - } -} - - -// ------- Kanban dashboard variables ------- - -// Since rows and containers are used inside cards, we're -// forced to set the padding relative to the grid system. -$o-kanban-dashboard-hpadding: $grid-gutter-width*0.5; -$o-kanban-dashboard-vpadding: $grid-gutter-width*0.25; - -// Used to manage spacing in complex dropdown menu -$o-kanban-dashboard-dropdown-complex-gap: 5px; - -// Emulate dropdown links -@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $odoo-dropdown-hpadding) { - padding: 0; - - > a { - margin: auto auto auto -$link-padding-gap; - padding: 3px $link-padding-gap; - color: $text-color; - display: block; - - &:hover { - background-color: $gray-lighter-dark; - color: $headings-color; - } - } - &:last-child { - margin-bottom: 5px; - } -} .o_kanban_view.o_kanban_dashboard { // correctly display the no_content_helper in dashboards diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss index 2a27d2500b9..a42962ed8f0 100644 --- a/addons/web/static/src/scss/kanban_examples_dialog.scss +++ b/addons/web/static/src/scss/kanban_examples_dialog.scss @@ -1,7 +1,7 @@ .o_kanban_examples_dialog { @include o-flex-display; padding: 0px; - background: $odoo-color-silver; + background: $o-color-silver; // sidebar .o_kanban_examples_dialog_nav { @@ -15,7 +15,7 @@ > a { padding: 12px 15px; - color: $odoo-main-text-color; + color: $o-main-text-color; border-left: 3px solid transparent; &:focus { outline: none; @@ -23,7 +23,7 @@ } &.active > a { color: $headings-color; - border-left-color: $odoo-brand-optional; + border-left-color: $o-brand-optional; font-weight: bold; } } diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss index 0f7432cfae4..de9ea9a8411 100644 --- a/addons/web/static/src/scss/kanban_view.scss +++ b/addons/web/static/src/scss/kanban_view.scss @@ -372,7 +372,7 @@ } &.o_kanban_dragged { - background-color: $odoo-main-text-color; + background-color: $o-main-text-color; .o_kanban_record { visibility: hidden; @@ -431,7 +431,7 @@ .o_kanban_add_column { display: inline-block; padding: 10px 14px; - background-color: $odoo-color-silver-dark; + background-color: $o-color-silver-dark; } .o_kanban_title { margin-left: 10px; @@ -478,7 +478,7 @@ @include o-flex-flow(row, wrap); @include o-justify-content(flex-start); - padding: $o-kanban-record-margin ($odoo-horizontal-padding - $o-kanban-record-margin); + padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin); .o_kanban_record { @include o-flex(1, 1, auto); diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss index ebb5db45457..ed4e6ad8436 100644 --- a/addons/web/static/src/scss/kanban_view_mobile.scss +++ b/addons/web/static/src/scss/kanban_view_mobile.scss @@ -1,5 +1,3 @@ -$o-kanban-mobile-tabs-height: 40px; - @media (max-width: $screen-xs-max) { .o_kanban_view.o_kanban_grouped { display: block; @@ -21,7 +19,7 @@ $o-kanban-mobile-tabs-height: 40px; &.o_current { font-weight: bold; - border-bottom: 3px solid $odoo-brand-optional; + border-bottom: 3px solid $o-brand-optional; } .o_column_title { white-space: nowrap; diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss index b51cff84599..e23b2585b50 100644 --- a/addons/web/static/src/scss/layout_background.scss +++ b/addons/web/static/src/scss/layout_background.scss @@ -13,19 +13,19 @@ margin-right: 16px; } h3 { - color: $odoo-brand-primary; + color: $o-brand-primary; font-weight: 700; max-width: 300px; } } .o_background_footer { ul { - border-top: 1px solid $odoo-brand-primary; - border-bottom: 1px solid $odoo-brand-primary; + border-top: 1px solid $o-brand-primary; + border-bottom: 1px solid $o-brand-primary; padding: 4px 0; margin: 0 0 4px 0; li { - color: $odoo-brand-primary; + color: $o-brand-primary; } } } @@ -36,7 +36,7 @@ background-repeat: no-repeat; min-height: 900px; thead tr th, h2 { - color: $odoo-brand-primary; + color: $o-brand-primary; } tbody { color: $gray; @@ -57,7 +57,7 @@ border-top: none !important; } tr:last-child td { - color: $odoo-brand-primary; + color: $o-brand-primary; } } #total { diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss index 190e5c6862a..ecbdb02153f 100644 --- a/addons/web/static/src/scss/layout_clean.scss +++ b/addons/web/static/src/scss/layout_clean.scss @@ -10,16 +10,16 @@ } .o_clean_footer { margin: 0 3px; - border-top: 3px solid $odoo-brand-primary; + border-top: 3px solid $o-brand-primary; h4 { - color: $odoo-brand-primary; + color: $o-brand-primary; font-weight: bolder; } .pagenumber { width: 35px; height: 35px; - border: 3px solid $odoo-brand-primary; - background-color: $odoo-brand-optional; + border: 3px solid $o-brand-primary; + background-color: $o-brand-optional; color: white; padding-top: 6px; text-align: center; @@ -27,18 +27,18 @@ } .o_report_layout_clean { h1, h2, h3 { - color: $odoo-brand-optional; + color: $o-brand-optional; font-weight: bolder; } strong { - color: $odoo-brand-primary; + color: $o-brand-primary; } table { thead { - color: $odoo-brand-primary; + color: $o-brand-primary; tr th { text-align: left !important; - border-top: 3px solid $odoo-brand-primary !important; + border-top: 3px solid $o-brand-primary !important; text-transform: uppercase; } tr th:last-child { @@ -54,7 +54,7 @@ border-top: none; } tr:last-child td { - border-bottom: 3px solid $odoo-brand-primary; + border-bottom: 3px solid $o-brand-primary; } tr { td { diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss index 2c69f00e429..36bee4439c6 100644 --- a/addons/web/static/src/scss/list_view.scss +++ b/addons/web/static/src/scss/list_view.scss @@ -1,9 +1,8 @@ -$odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); .o_list_view { position: relative; cursor: pointer; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; margin-bottom: 0px; &.table { @@ -13,7 +12,7 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); } thead { - color: $odoo-main-text-color; + color: $o-main-text-color; border-bottom: 1px solid #cacaca; > tr > th { border-left: 1px solid #dfdfdf; @@ -25,9 +24,9 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); tfoot { cursor: default; - color: $odoo-list-footer-color; - background-color: $odoo-list-footer-bg-color; - font-weight: $odoo-list-footer-font-weight; + color: $o-list-footer-color; + background-color: $o-list-footer-bg-color; + font-weight: $o-list-footer-font-weight; border-top: 2px solid #cacaca; border-bottom: 1px solid #cacaca; } @@ -105,9 +104,9 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); padding-top: 0; padding-bottom: 0; .o_pager_previous, .o_pager_next { - background-color: $odoo-list-group-header-color; + background-color: $o-list-group-header-color; &:hover { - background-color: darken($odoo-list-group-header-color, 10%); + background-color: darken($o-list-group-header-color, 10%); } } } @@ -118,11 +117,11 @@ $odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%); tbody { tr:focus-within { - background-color: $odoo-form-lightsecondary; + background-color: $o-form-lightsecondary; } tr{ .focussed { - background-color: $odoo-form-lightsecondary; + background-color: $o-form-lightsecondary; } } } diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss index e75204f6098..0eec3e60049 100644 --- a/addons/web/static/src/scss/model_field_selector.scss +++ b/addons/web/static/src/scss/model_field_selector.scss @@ -14,8 +14,8 @@ > .o_field_selector_chain_part { padding: 0px 1px; - border: 1px solid darken($odoo-brand-lightsecondary, 10%); - background: $odoo-brand-lightsecondary; + border: 1px solid darken($o-brand-lightsecondary, 10%); + background: $o-brand-lightsecondary; margin-bottom: 1px; } > i { diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss index 8273c30182d..0c3d46945c9 100644 --- a/addons/web/static/src/scss/navbar.scss +++ b/addons/web/static/src/scss/navbar.scss @@ -1,17 +1,17 @@ .o_main_navbar { position: relative; - height: $odoo-navbar-height; - border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg; - background-color: $odoo-brand-primary; + height: $o-navbar-height; + border-bottom: 1px solid $o-navbar-inverse-link-hover-bg; + background-color: $o-brand-primary; color: white; > a, > button { float: left; - height: $odoo-navbar-height; + height: $o-navbar-height; border: none; - padding: 0 $odoo-horizontal-padding - 4px 0 $odoo-horizontal-padding; - line-height: $odoo-navbar-height; + padding: 0 $o-horizontal-padding - 4px 0 $o-horizontal-padding; + line-height: $o-navbar-height; background-color: transparent; text-align: center; color: inherit; @@ -20,7 +20,7 @@ @include user-select(none); &:hover, &:focus { - background-color: $odoo-navbar-inverse-link-hover-bg; + background-color: $o-navbar-inverse-link-hover-bg; color: inherit; } &:focus, &:active, &:focus:active { @@ -36,12 +36,12 @@ color: white; font-size: 22px; font-weight: 500; - line-height: $odoo-navbar-height; + line-height: $o-navbar-height; @media (max-width: $screen-xs-max) { float: none; margin: 0; - border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg; + border-bottom: 1px solid $o-navbar-inverse-link-hover-bg; color: transparent; } } @@ -64,13 +64,13 @@ > a { display: block; - height: $odoo-navbar-height; + height: $o-navbar-height; padding: 0 10px; color: white; - line-height: $odoo-navbar-height; + line-height: $o-navbar-height; &:hover { - background-color: $odoo-navbar-inverse-link-hover-bg; + background-color: $o-navbar-inverse-link-hover-bg; } &:focus, &:active, &:focus:active { @@ -80,7 +80,7 @@ &.o_extra_menu_items { > a { - width: $odoo-navbar-height; + width: $o-navbar-height; text-align: center; } &.open > ul { @@ -88,12 +88,12 @@ > li { > a { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; - border-bottom: 1px solid $odoo-brand-lightsecondary; + border-bottom: 1px solid $o-brand-lightsecondary; &.dropdown-toggle { - background-color: lighten($odoo-brand-primary, 15%); + background-color: lighten($o-brand-primary, 15%); pointer-events: none; // hack to prevent clicking on it because dropdown always opened } } @@ -127,19 +127,19 @@ @for $index from 3 through 5 { > li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} { - padding-left: $odoo-dropdown-hpadding + ($index - 2)*12px; + padding-left: $o-dropdown-hpadding + ($index - 2)*12px; } } } .open .dropdown-toggle { - background-color: $odoo-navbar-inverse-link-hover-bg; + background-color: $o-navbar-inverse-link-hover-bg; } .o_user_menu { margin-left: 6px; > a { - padding-right: $odoo-horizontal-padding; + padding-right: $o-horizontal-padding; } .oe_topbar_avatar { @@ -152,7 +152,7 @@ @include o-transition(height, 200ms, linear); position: relative; - height: $odoo-navbar-height; + height: $o-navbar-height; overflow: hidden; > ul { @@ -186,15 +186,15 @@ } &.o_menu_systray { - @include o-position-absolute(0px, $odoo-navbar-height, auto, $odoo-navbar-height); - height: $odoo-navbar-height; + @include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height); + height: $o-navbar-height; text-align: right; > li { display: inline-block; &.open .dropdown-menu { - @include o-position-absolute($odoo-navbar-height, 0, 0, 0); + @include o-position-absolute($o-navbar-height, 0, 0, 0); position: fixed; width: auto; } diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss index 83b17a4e751..3efddd8eab2 100644 --- a/addons/web/static/src/scss/pivot_view.scss +++ b/addons/web/static/src/scss/pivot_view.scss @@ -5,27 +5,27 @@ // items corresponding to the clicked cell &.o_enable_linking { .o_pivot_cell_value:hover { - color: $odoo-brand-optional; + color: $o-brand-optional; cursor: pointer; } } table { - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; width: auto; // bootstrap override th { font-weight: normal; // bootstrap override - background-color: lighten($odoo-brand-secondary, 40%); + background-color: lighten($o-brand-secondary, 40%); } @mixin o-pivot-header-cell { - background-color: lighten($odoo-brand-secondary, 40%); + background-color: lighten($o-brand-secondary, 40%); cursor: pointer; white-space: nowrap; @include user-select(none); &:hover { - background-color: lighten($odoo-brand-secondary, 30%); + background-color: lighten($o-brand-secondary, 30%); } } diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss new file mode 100644 index 00000000000..b394aeafe26 --- /dev/null +++ b/addons/web/static/src/scss/primary_variables.scss @@ -0,0 +1,92 @@ +/// +/// This file regroups the variables that style odoo components. +/// They are available in every asset bundle. +/// + +// Font sizes +$o-font-size-base: 13px; +$o-line-height-base: 1.428571429; // This is BS default + +// Colors +$o-brand-primary: #7c7bad; +$o-brand-optional: #7c7bad; +$o-brand-secondary: #f0eeee; +$o-brand-lightsecondary: #e2e2e0; +$o-color-silver: #F9F9F9; +$o-color-silver-dark: #E5E5E5; +$o-color-silver-darker: #d9d7d7; +$o-color-gray-light: lighten(#000, 46.7%); // This is BS default + +$o-color-pink: #875A7B; // Enterprise $o-brand-primary +$o-main-color-muted: #a8a8a8; +$o-main-text-color: #4c4c4c; + +$o-view-background-color: white; +$o-shadow-color: #303030; + +$o-form-lightsecondary: #ccc; + +$o-list-footer-bg-color: #eee; +$o-list-footer-font-weight: bold; + +$o-tooltip-background-color: black; +$o-tooltip-color: white; +$o-tooltip-arrow-color: black; +$o-tooltip-text-color: #777777; +$o-tooltip-title-text-color: #4c4c4c; + +// Layout +$screen-xs-min: 475px; +$screen-xl-min: 1534px; + +$o-form-group-cols: 12; +$o-form-spacing-unit: 5px; +$o-horizontal-padding: 16px; +$o-innergroup-rpadding: 45px; +$o-dropdown-hpadding: 20px; + +$o-sheet-vpadding: 24px; + +$o-notification-error-bg-color: #F16567; +$o-notification-info-bg-color: #FCFBEA; + +// Needed for having no spacing between sheet and mail body in mass_mailing: +// Different required cancel paddings between web and web_enterprise +$o-sheet-cancel-tpadding: 0px; + +$o-avatar-size: 90px; + +$o-statusbar-height: 33px; + +$o-label-font-size-factor: 0.8; +$o-navbar-height: 34px; + +$o-nb-calendar-colors: 24; + +$o-base-settings-mobile-tabs-height: 40px; +$o-base-settings-mobile-tabs-overflow-gap: 3%; + +$o-cp-breadcrumb-height: 30px; + +$o-datepicker-week-color: #8f8f8f; + +// Kanban + +$o-kanban-default-record-width: 300px; +$o-kanban-small-record-width: 240px; + +$o-kanban-header-title-height: 50px; + +$o-kanban-image-width: 64px; +$o-kanban-inside-vgutter: 8px; +$o-kanban-inside-hgutter: 8px; +$o-kanban-color-border-width: 3px; +$o-kanban-inner-hmargin: 5px; +$o-kanban-progressbar-height: 20px; + +$o-kanban-mobile-tabs-height: 40px; + +// ------- Kanban dashboard variables ------- + +// Used to manage spacing in complex dropdown menu +$o-kanban-dashboard-dropdown-complex-gap: 5px; diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss index e4322845c45..8aaade8812f 100644 --- a/addons/web/static/src/scss/progress_bar.scss +++ b/addons/web/static/src/scss/progress_bar.scss @@ -14,16 +14,16 @@ height: 15px; vertical-align: middle; - border: 1px solid lighten($odoo-brand-secondary, 25%); + border: 1px solid lighten($o-brand-secondary, 25%); overflow: hidden; background-color: white; &.o_progress_overflow { - background-color: $odoo-brand-secondary; + background-color: $o-brand-secondary; } .o_progressbar_complete { - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; height: 100%; } } diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss index 102b76f02f8..eb6f4ce3c59 100644 --- a/addons/web/static/src/scss/rainbow.scss +++ b/addons/web/static/src/scss/rainbow.scss @@ -1,13 +1,11 @@ /************** rainbow *****************/ -// Variables -$reward-size: 400px; -$reward-size-mobile: 300px; -$reward-text-color: #727880; -$reward-base-time: 1.4s; - -// o_reward .o_reward { + $reward-size: 400px; + $reward-size-mobile: 300px; + $reward-text-color: #727880; + $reward-base-time: 1.4s; + will-change: transform; z-index: $zindex-modal; padding: 50px; diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss index 5f40760c2c6..f2b0f7fd14f 100644 --- a/addons/web/static/src/scss/search_view.scss +++ b/addons/web/static/src/scss/search_view.scss @@ -103,16 +103,16 @@ cursor: pointer; @include user-select(none); // Prevent text selection when toggling the dropdowns > a { // dropdown togglers - color: $odoo-main-text-color; + color: $o-main-text-color; &:hover { text-decoration: none; font-weight: bold; - color: darken($odoo-main-text-color, 10%); + color: darken($o-main-text-color, 10%); } } &.open > a { font-weight: bold; - color: darken($odoo-main-text-color, 10%); + color: darken($o-main-text-color, 10%); } } diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss index 247b188c396..d2098a5f9c3 100644 --- a/addons/web/static/src/scss/search_view_extra.scss +++ b/addons/web/static/src/scss/search_view_extra.scss @@ -6,7 +6,7 @@ .o_searchview_facet { border: 1px solid $gray-light; - background: lighten($odoo-brand-primary, 35%); + background: lighten($o-brand-primary, 35%); .o_searchview_facet_label { background-color: $gray-light; @@ -28,7 +28,7 @@ @include o-position-absolute($top: 6px, $right: 5px); } .o_searchview_autocomplete li.o-selection-focus { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; > a { color: white; } diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss new file mode 100644 index 00000000000..8ab2d5bc322 --- /dev/null +++ b/addons/web/static/src/scss/secondary_variables.scss @@ -0,0 +1,43 @@ +// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used +// for design purposes only (e.g. cards' borders). We avoid to overwrite the +// default $gray-light because it is deeply used by bootstrap to define muted +// elements. +$gray-lighter-dark: $o-color-silver-dark; +$gray-lighter-darker: $o-color-silver-darker; + +$o-webclient-background-color: $o-color-silver; +$o-control-panel-background-color: $o-color-silver; + +$o-list-footer-color: $o-main-text-color; +$o-list-group-header-color: lighten($o-brand-lightsecondary, 10%); + +// UI custom colors for tags, kanban records' colors, ...) +$o-colors: $o-color-gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, + #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8; + +$screen-xxs-max: ($screen-xs-min - 1); +$screen-lg-max: ($screen-xl-min - 1); + +$o-sheet-cancel-hpadding: $o-horizontal-padding; +$o-sheet-cancel-bpadding: $o-horizontal-padding; + +$o-statusbar-arrow-width: $o-statusbar-height / 3; +$o-statusbar-disabled-bg: lighten($o-brand-lightsecondary, 7%); + +$o-navbar-inverse-link-hover-bg: darken($o-brand-primary, 10%); + +$o-datepicker-week-bg-color: lighten($o-datepicker-week-color, 30%); + +// Kanban + +$o-kanban-record-margin: $o-horizontal-padding / 2; +$o-kanban-group-padding: $o-horizontal-padding; // Cannot be higher than this + +$o-kanban-inside-hgutter-mobile: $o-horizontal-padding; + +// ------- Kanban dashboard variables ------- + +// Since rows and containers are used inside cards, we're +// forced to set the padding relative to the grid system. +$o-kanban-dashboard-hpadding: $o-horizontal-padding; +$o-kanban-dashboard-vpadding: $o-horizontal-padding / 2; diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss index 79fb0b60fb7..765db1292da 100644 --- a/addons/web/static/src/scss/tooltip.scss +++ b/addons/web/static/src/scss/tooltip.scss @@ -7,17 +7,17 @@ .tooltip-inner { max-width: 300px; // fallback for browsers which do not support "vw" unit max-width: 100vw; - background-color: $odoo-tooltip-background-color; - color: $odoo-tooltip-color; + background-color: $o-tooltip-background-color; + color: $o-tooltip-color; border-radius: $border-radius-base; - box-shadow: 0px 0px 1px 1px $odoo-brand-secondary; + box-shadow: 0px 0px 1px 1px $o-brand-secondary; padding: 5px; text-align: left; .oe_tooltip_string { - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; color: white; font-weight: bold; padding: 5px; @@ -42,18 +42,18 @@ } &.top, &.top-left, &.top-right { .tooltip-arrow { - border-top-color: $odoo-tooltip-arrow-color!important; + border-top-color: $o-tooltip-arrow-color!important; } } &.bottom, &.bottom-left, &.bottom-right { .tooltip-arrow { - border-bottom-color: $odoo-tooltip-arrow-color!important; + border-bottom-color: $o-tooltip-arrow-color!important; } } &.left .tooltip-arrow { - border-left-color: $odoo-tooltip-arrow-color!important; + border-left-color: $o-tooltip-arrow-color!important; } &.right .tooltip-arrow { - border-right-color: $odoo-tooltip-arrow-color!important; + border-right-color: $o-tooltip-arrow-color!important; } } diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 6db15976bd5..f64d50fd240 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -3,16 +3,6 @@ /// // ------------------------------------------------------------------ -// Padding -// ------------------------------------------------------------------ -@mixin o-webclient-padding($top: 0px, $right: $odoo-horizontal-padding, $bottom: 0px, $left: $odoo-horizontal-padding) { - padding-top: $top; - padding-right: $right; - padding-bottom: $bottom; - padding-left: $left; -} - -// ------------------------------------------------------------------ // Caret // ------------------------------------------------------------------ @mixin utils-caret-boilerplate { @@ -22,38 +12,6 @@ height: 0; vertical-align: middle; } -@mixin o-caret-down($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: 0; - border-left: $caret-width solid transparent; - border-right: $caret-width solid transparent; - border-top: $caret-width solid; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} -@mixin o-caret-up($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: $caret-width solid; - border-left: $caret-width solid transparent; - border-right: $caret-width solid transparent; - border-top: 0; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} -@mixin o-caret-left($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: $caret-width solid transparent; - border-left: 0; - border-right: $caret-width solid; - border-top: $caret-width solid transparent; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} -@mixin o-caret-right($caret-width: $caret-width-base) { - @include utils-caret-boilerplate; - border-bottom: $caret-width solid transparent; - border-left: $caret-width solid; - border-right: 0; - border-top: $caret-width solid transparent; - -moz-transform: scale(0.9999); // Smooth the caret on firefox -} // ------------------------------------------------------------------ // Vendor prefixes @@ -121,33 +79,6 @@ } // ------------------------------------------------------------------ -// Dropdowns -// ------------------------------------------------------------------ -@mixin o-selected-li { - li { - position: relative; - > a { - color: $odoo-main-text-color; - &:hover { - color: darken($odoo-main-text-color, 10%); - } - } - &.selected { - > a { - color: darken($odoo-main-text-color, 10%); - font-weight: bold; - &:before { - font-family: FontAwesome; - position: absolute; - left: 6px; - content: "\f00c"; - } - } - } - } -} - -// ------------------------------------------------------------------ // Select Appearance // ------------------------------------------------------------------ @mixin o-appearance($value) { @@ -265,6 +196,95 @@ opacity: $hover-opacity; } } + +//------------------------------------------------------------------------------ +// Colors +//------------------------------------------------------------------------------ + +@function luma($color) { + @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%; +} +@function o-get-most-contrast($color, $c1, $c2) { + $luma: luma($color); + @return if(abs($luma - luma($c1)) > abs($luma - luma($c2)), $c1, $c2); +} + +// ------------------------------------------------------------------ +// Padding +// ------------------------------------------------------------------ +@mixin o-webclient-padding($top: 0px, $right: $o-horizontal-padding, $bottom: 0px, $left: $o-horizontal-padding) { + padding-top: $top; + padding-right: $right; + padding-bottom: $bottom; + padding-left: $left; +} + +// ------------------------------------------------------------------ +// Caret +// ------------------------------------------------------------------ +@mixin o-caret-down($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: 0; + border-left: $caret-width solid transparent; + border-right: $caret-width solid transparent; + border-top: $caret-width solid; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +@mixin o-caret-up($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid; + border-left: $caret-width solid transparent; + border-right: $caret-width solid transparent; + border-top: 0; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +@mixin o-caret-left($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid transparent; + border-left: 0; + border-right: $caret-width solid; + border-top: $caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} +@mixin o-caret-right($caret-width: $caret-width-base) { + @include utils-caret-boilerplate; + border-bottom: $caret-width solid transparent; + border-left: $caret-width solid; + border-right: 0; + border-top: $caret-width solid transparent; + -moz-transform: scale(0.9999); // Smooth the caret on firefox +} + +// ------------------------------------------------------------------ +// Dropdowns +// ------------------------------------------------------------------ +@mixin o-selected-li { + li { + position: relative; + > a { + color: $o-main-text-color; + &:hover { + color: darken($o-main-text-color, 10%); + } + } + &.selected { + > a { + color: darken($o-main-text-color, 10%); + font-weight: bold; + &:before { + font-family: FontAwesome; + position: absolute; + left: 6px; + content: "\f00c"; + } + } + } + } +} + +// ------------------------------------------------------------------ +// Hovering effects +// ------------------------------------------------------------------ @mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) { color: $default-color; @@ -273,11 +293,163 @@ } } -//------------------------------------------------------------------------------ -// Colors -//------------------------------------------------------------------------------ +// ------------------------------------------------------------------ +// Mixin to define variations for btn-links and muted btn-links +// ------------------------------------------------------------------ +@mixin o-btn-link-variant($color, $color-active) { + text-transform: none; + @include o-hover-text-color($default-color: $color, $hover-color: $color-active); -@function o-get-most-contrast($color, $c1, $c2) { - $brightness: brightness($color); - @return if(abs($brightness - brightness($c1)) > abs($brightness - brightness($c2)), $c1, $c2); + &, &:hover, &:focus, &:active, &.active { + border-color: transparent; + background-color: transparent + } + + &.text-muted, .text-muted { + @include o-hover-opacity; + @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active); + } +} + +// ------- Kanban grouped mixins ------- +@mixin o-kanban-icon($base-opacity: 0.5) { + display: block; + text-align: center; + color: $o-main-text-color; + font-size: $font-size-small; + cursor: pointer; + @include o-hover-opacity($base-opacity); +} +@mixin o-kanban-tag-color { + @for $size from 1 through length($o-colors) { + // Note: the first color is supposed to be invisible if there is a color + // field but it is used as a default color when there is no color field + &.o_tag_color_#{$size - 1} span { + background-color: nth($o-colors, $size); + } + } +} +@mixin o-kanban-record-color { + @for $size from 2 through length($o-colors) { + // Note: the first color is not defined as it is the 'no color' for kanban + .oe_kanban_color_#{$size - 1}::after { + background-color: nth($o-colors, $size); + } + } +} +@mixin o-kanban-slim-col { + position: relative; + @include o-flex(0, 0, auto); + margin: 0; + padding: 0 floor($o-kanban-group-padding * 0.7); + cursor: pointer; +} +@mixin o-kanban-header-title { + @include o-flex-display; + @include o-align-items(center); + height: $o-kanban-header-title-height; + line-height: 2.2; + color: $headings-color; +} +@mixin o-kanban-v-title { + @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2)); + @include o-transform-origin(left, bottom, $z: 0); + @include o-transform(rotate(90deg)); + overflow: visible; + white-space: nowrap; + font-size: 15px; +} + +// ------- Kanban records mixins ------- +@mixin o-kanban-record-title($font-size) { + color: $headings-color; + font-size: $font-size; + font-weight: 500; + margin-bottom: 0; + margin-top: 0; +} +@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) { + margin: -1px -1px auto auto; // compensate border + padding: $padding-base/2 $padding-base; + border: 1px solid transparent; + border-bottom: none; + vertical-align: top; + color: $text-color; + + &:hover { + color: $headings-color; + } + &:focus, &:active, &:focus:active { + outline: none; + } +} +@mixin o-kanban-dropdown-open { + position: relative; + background: white; + border-color: $gray-lighter-darker; + z-index: $zindex-dropdown + 1; +} +@mixin o-kanban-dropdown-menu { + @include o-position-absolute($right: -1px); + margin-top: -1px; + border-color: $gray-lighter-darker; +} +@mixin o-kanban-colorpicker { + max-width: 150px; + padding: 3px ($o-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $o-dropdown-hpadding; + + > li { + display: inline-block; + margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0; + border: 1px solid white; + box-shadow: 0 0 0 1px $gray-lighter-dark; + + > a { + display: block; + + &::after { + content: ""; + display: block; + width: 20px; + height: 15px; + } + } + + // No Color + &:first-child > a { + position: relative; + &::before { + content: ""; + @include o-position-absolute(-2px, $left: 10px); + display: block; + width: 1px; + height: 20px; + @include rotate(45deg); + background-color: red; + } + &::after { + background-color: white; + } + } + } +} + +// Emulate dropdown links +@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $o-dropdown-hpadding) { + padding: 0; + + > a { + margin: auto auto auto -$link-padding-gap; + padding: 3px $link-padding-gap; + color: $text-color; + display: block; + + &:hover { + background-color: $gray-lighter-dark; + color: $headings-color; + } + } + &:last-child { + margin-bottom: 5px; + } } diff --git a/addons/web/static/src/scss/variables.scss b/addons/web/static/src/scss/variables.scss deleted file mode 100644 index 20180488042..00000000000 --- a/addons/web/static/src/scss/variables.scss +++ /dev/null @@ -1,82 +0,0 @@ -/// -/// This file regroups the variables that style odoo components. -/// They are available in every asset bundle. -/// - -// Font sizes -$odoo-font-size-base: 13px; - -// Colors -$odoo-brand-primary: #7c7bad; -$odoo-brand-optional: #7c7bad; -$odoo-brand-secondary: #f0eeee; -$odoo-brand-lightsecondary: #e2e2e0; -$odoo-color-silver: #F9F9F9; -$odoo-color-silver-dark: #E5E5E5; -$odoo-color-silver-darker: #d9d7d7; - -// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used -// for design purposes only (e.g. cards' borders). We avoid to overwrite the -// default $gray-light because it is deeply used by bootstrap to define muted -// elements. -$gray-lighter-dark: $odoo-color-silver-dark; -$gray-lighter-darker: $odoo-color-silver-darker; - -$odoo-color-pink: #875A7B; // Enterprise $odoo-brand-primary -$odoo-main-color-muted: #a8a8a8; -$odoo-main-text-color: #4c4c4c; - -$odoo-view-background-color: white; -$odoo-shadow-color: #303030; - -$odoo-webclient-background-color: $odoo-color-silver; -$odoo-control-panel-background-color: $odoo-color-silver; -$odoo-form-lightsecondary: #ccc; - -$odoo-list-footer-color: $odoo-main-text-color; -$odoo-list-footer-bg-color: #eee; -$odoo-list-footer-font-weight: bold; - -$odoo-tooltip-background-color: black; -$odoo-tooltip-color: white; -$odoo-tooltip-arrow-color: black; -$odoo-tooltip-text-color: #777777; -$odoo-tooltip-title-text-color: #4c4c4c; - -// UI custom colors for tags, kanban records' colors, ...) -$odoo-nb-ui-color: 12; -$odoo-colors: $gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968, - #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8; - -// Layout -$screen-xs-min: 475px; -$screen-xxs-max: ($screen-xs-min - 1); - -$screen-xl-min: 1534px; -$screen-lg-max: ($screen-xl-min - 1); - -$odoo-form-group-cols: 12; -$odoo-form-spacing-unit: 5px; -$odoo-horizontal-padding: 16px; -$odoo-innergroup-rpadding: 45px; -$odoo-dropdown-hpadding: 20px; - -$border-radius-base: 3px; - -$odoo-sheet-vpadding: 24px; - -// Needed for having no spacing between sheet and mail body in mass_mailing: -// Different required cancel paddings between web and web_enterprise -$odoo-sheet-cancel-tpadding: 0px; -$odoo-sheet-cancel-hpadding: $odoo-horizontal-padding; -$odoo-sheet-cancel-bpadding: $odoo-horizontal-padding; - -$odoo-avatar-size: 90px; - -$odoo-statusbar-height: 33px; -$odoo-statusbar-arrow-width: $odoo-statusbar-height/3; -$odoo-statusbar-disabled-bg: lighten($odoo-brand-lightsecondary, 7%); - -$odoo-label-font-size-factor: 0.8; -$odoo-navbar-height: 34px; -$odoo-navbar-inverse-link-hover-bg: $navbar-inverse-link-active-bg; diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss index 790cec7746d..e3562026ffe 100644 --- a/addons/web/static/src/scss/views.scss +++ b/addons/web/static/src/scss/views.scss @@ -51,12 +51,12 @@ padding: 15px; z-index: 1000; text-align: center; - color: $odoo-tooltip-text-color; + color: $o-tooltip-text-color; font-size: 115%; > p:first-of-type { margin-top: 0; - color: $odoo-tooltip-title-text-color; + color: $o-tooltip-title-text-color; font-weight: bold; font-size: 125%; } diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss index 257e81bc89a..7091cbc3c98 100644 --- a/addons/web/static/src/scss/web_calendar.scss +++ b/addons/web/static/src/scss/web_calendar.scss @@ -1,20 +1,18 @@ -$nb-calendar-colors: 24; - @keyframes backgroundfade { - from {background-color: rgba($odoo-brand-primary, 0.5);} + from {background-color: rgba($o-brand-primary, 0.5);} to {background-color: #f5f5f5;} } .o_calendar_container { height: 100%; - @include o-webclient-padding($top: $odoo-horizontal-padding/2, $bottom: $odoo-horizontal-padding/2); + @include o-webclient-padding($top: $o-horizontal-padding/2, $bottom: $o-horizontal-padding/2); @include o-flex-display; - @for $index from 1 through $nb-calendar-colors { + @for $index from 1 through $o-nb-calendar-colors { .o_calendar_color_#{$index} { color: #0D0D0D; - background-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg); - border-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg); + background-color: adjust-hue(rgb(255, 192, 192), (360/($o-nb-calendar-colors+1) * $index) * 1deg); + border-color: adjust-hue(rgb(255, 192, 192), (360/($o-nb-calendar-colors+1) * $index) * 1deg); opacity: 0.7; &.o_event_hightlight { font-weight: bold; @@ -25,7 +23,7 @@ $nb-calendar-colors: 24; } } .o_underline_color_#{$index} { - border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($nb-calendar-colors+1) * $index) * 1deg); + border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($o-nb-calendar-colors+1) * $index) * 1deg); } } @@ -35,12 +33,12 @@ $nb-calendar-colors: 24; .o_calendar_widget { height: 100%; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; * { z-index: 0; // FIXME } .fc-week-number, .fc-widget-header { - background-color: lighten($odoo-brand-secondary, 30%); + background-color: lighten($o-brand-secondary, 30%); } .o_avatar_square { border-radius: 5px; @@ -64,14 +62,14 @@ $nb-calendar-colors: 24; } .o_calendar_sidebar_container { - @include o-flex(0, 0, $odoo-horizontal-padding); + @include o-flex(0, 0, $o-horizontal-padding); position: relative; &.o_sidebar_hidden { - margin-right: -$odoo-horizontal-padding; // hack to display the toggler in the gutter + margin-right: -$o-horizontal-padding; // hack to display the toggler in the gutter .o_calendar_sidebar_toggler { padding: 4px; - color: darken($odoo-webclient-background-color, 30%); + color: darken($o-webclient-background-color, 30%); } } @@ -88,7 +86,7 @@ $nb-calendar-colors: 24; .o_calendar_sidebar { width: 250px; margin-left: 8px; - background: $odoo-view-background-color; + background: $o-view-background-color; } .ui-datepicker { @@ -101,7 +99,7 @@ $nb-calendar-colors: 24; .ui-widget-header { @include o-flex-display; background: none; - background-color: lighten($odoo-brand-secondary, 30%); + background-color: lighten($o-brand-secondary, 30%); border-radius: 0; .ui-datepicker-prev, .ui-datepicker-next { @@ -110,7 +108,7 @@ $nb-calendar-colors: 24; cursor: pointer; padding: 2px; text-align: center; - color: $odoo-main-text-color; + color: $o-main-text-color; &.ui-state-hover { background: none; border: none; @@ -144,31 +142,31 @@ $nb-calendar-colors: 24; table { td { padding: 0 2px 2px 0; - background-color: $odoo-view-background-color; + background-color: $o-view-background-color; a { border: none; background: none; - background-color: lighten($odoo-brand-secondary, 40%); + background-color: lighten($o-brand-secondary, 40%); text-align: center; } } .ui-state-default { - color: $odoo-brand-primary; + color: $o-brand-primary; &:hover { background: none; - background-color: rgba($odoo-brand-primary, 0.5); - border-color: $odoo-brand-primary; - color: $odoo-view-background-color; + background-color: rgba($o-brand-primary, 0.5); + border-color: $o-brand-primary; + color: $o-view-background-color; }; } .ui-state-active { background: none; - background-color: $odoo-brand-primary; - color: $odoo-view-background-color; + background-color: $o-brand-primary; + color: $o-view-background-color; } .o_selected_range.o_color { background: none; - background-color: $odoo-brand-primary; + background-color: $o-brand-primary; animation: backgroundfade 3s forwards; } } diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss index d4bd0b4e0f2..b0f38b37fea 100644 --- a/addons/web/static/src/scss/webclient.scss +++ b/addons/web/static/src/scss/webclient.scss @@ -3,14 +3,12 @@ // ------------------------------------------------------------------ .o_web_client { position: relative; // normally useless but required by bootstrap-datepicker - background-color: $odoo-webclient-background-color; + background-color: $o-webclient-background-color; } // ------------------------------------------------------------------ // Misc. widgets // ------------------------------------------------------------------ -$notification-error-bg-color: #F16567; -$notification-info-bg-color: #FCFBEA; .o_notification_manager { width: 300px; max-width: 100%; @@ -24,8 +22,8 @@ $notification-info-bg-color: #FCFBEA; opacity: 0; - background-color: $notification-info-bg-color; - box-shadow: 0px 0px 5px 1px $odoo-main-text-color; + background-color: $o-notification-info-bg-color; + box-shadow: 0px 0px 5px 1px $o-main-text-color; position: relative; .o_close { @@ -56,7 +54,7 @@ $notification-info-bg-color: #FCFBEA; &.o_error { color: white; - background-color: $notification-error-bg-color; + background-color: $o-notification-error-bg-color; } } } @@ -103,7 +101,7 @@ div.o_boolean_toggle { } > input:checked + .slider { - background-color: $odoo-brand-optional; + background-color: $o-brand-optional; &:before { @include translate(14px, 0px); diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss index 701cfe2a9b3..cc87e526f8d 100644 --- a/addons/web/static/src/scss/webclient_extra.scss +++ b/addons/web/static/src/scss/webclient_extra.scss @@ -7,7 +7,7 @@ outline: none; } .o_input { - border: 1px solid $odoo-form-lightsecondary; + border: 1px solid $o-form-lightsecondary; border-radius: $border-radius-base; padding: 2px 4px; color: #1f1f1f; @@ -29,7 +29,7 @@ select { top: 0; right: 50%; padding: 4px 12px; - background-color: $odoo-color-pink; + background-color: $o-color-pink; color: white; text-align: center; border-top: none; @@ -44,3 +44,8 @@ select { @include o-text-overflow; max-width: 150px; } + +// Button +.btn-icon { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); +} diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss index 14892617b5e..f811df48802 100644 --- a/addons/web/static/src/scss/webclient_layout.scss +++ b/addons/web/static/src/scss/webclient_layout.scss @@ -1,4 +1,3 @@ -$odoo-submenu-width: 220px; .o_web_client { @include o-flex-display; @@ -37,11 +36,11 @@ $odoo-submenu-width: 220px; height: 100%; .o_sub_menu { - @include o-flex(0, 0, $odoo-submenu-width); + @include o-flex(0, 0, 220px); @include o-flex-display; @include o-flex-flow(column, nowrap); - border-right: 1px solid darken($odoo-control-panel-background-color, 20%); - background-color: $odoo-control-panel-background-color; + border-right: 1px solid darken($o-control-panel-background-color, 20%); + background-color: $o-control-panel-background-color; .o_sub_menu_logo { @include o-flex(0, 0, auto); @@ -75,13 +74,13 @@ $odoo-submenu-width: 220px; .oe_secondary_menu_section { font-weight: bold; margin-left: 8px; - color: $odoo-brand-optional; + color: $o-brand-optional; } .oe_secondary_submenu { margin: 3px 0px 10px; line-height: 1.1em; >li:not(.active) > a { - color: $odoo-main-text-color; + color: $o-main-text-color; } > li > a { padding: 4px 4px 4px 18px; @@ -135,7 +134,7 @@ $odoo-submenu-width: 220px; > a { font-weight: bold; > span { - color: $odoo-color-pink; + color: $o-color-pink; } } } |