diff options
Diffstat (limited to 'addons/web/static/src')
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; } } } |