From fe4f1efb70c0a9c4ebcb2b51fe090c4731c399b4 Mon Sep 17 00:00:00 2001 From: Romeo Fragomeli Date: Tue, 26 Apr 2022 13:04:49 +0000 Subject: [PATCH] [REF] *: BS5: Restore BS4 behaviour - new prefix `bs-` for the root CSS variables As some website snippet relay on these values we need to restore the old behaviour by setting this prefix to an empty string. - restore negative margins disabled in BS5 by default - restore BS4 behaviour for setting element content Fix some cases when we want to render more than one node on the root level. In BS4 the jQuery was using all node but in the jQuery compatibility layer in BS5 it takes only the first node if the jQuery Element is used in the function. This hack try to restore the old behaviour wrapping all element in a DIV element (to be single root node). PS: this can break some querySelector and some CSS selector if they are too fragile. e.g. of element that break before this hack: Popover content for PaymentPopOver XML in ShowPaymentLineWidget - restore old value from BS4 and adapt to new value $table-cell-padding -> $table-cell-padding-x $table-cell-padding -> $table-cell-padding-y $table-cell-padding-sm -> $table-cell-padding-x-sm $table-cell-padding-sm -> $table-cell-padding-y-sm - restore BS4 smooth-scroll behaviour - restore `text-X` from BS4 that use text-emphasis-variant In BS5, to generate the text utilities `test-X` its use BS5 utilities (See $utilities SCSS variables). To restore the old behaviour we replace with the custom `text-emphasis-variant` mixin. See odoo/odoo@e111cfd35eb0f0f2fac828cbdafd3b8093d70a1b - restore border and background of table In `_reboot.scss`, BS5 add `border-style` to all element of a table. In some case we customize the table with CSS rules (e.g. `listview`), these rules set a size of border. The mix of all rules made that the border of the `td` in `tfoot` are visible and make a black line. - reset block quote Y margin to 0 BS5 add a spacer and we reset that by puttin margin-y 0 - In BS5, border color is linked to the text color in it. We doesn't want that and we restore the same behavior as un BS4 by putting border-color in grey. - restore HR style like in BS4 Since in BS5, the height matter we remove the padding and added into the margin. Also, we restore the color of BS4 for the HR tag >
elements now use height instead of border to better support the > size attribute. This also enables use of padding utilities to create > thicker dividers (e.g.,
). https://getbootstrap.com/docs/5.1/migration/#content-reboot-etc - restore old value for grid gutter to avoid calc error In BS5 `$grid-gutter-width` is set in rem and in BS4 it was in px. So SCSS compiler generates error when it tries to calc rem and px. - restore badge, navbar paddings like in BS4 - restore link decoration in frontend (Portal) whiteout website Task ID: 2766483 Part-of: odoo/odoo#95450 --- .../static/src/scss/bootstrap_overridden.scss | 14 +++++++ .../static/src/legacy/js/libs/bootstrap.js | 19 +++++++++ .../src/legacy/scss/bootstrap_overridden.scss | 30 ++++++++++++- .../scss/bootstrap_overridden_frontend.scss | 3 ++ .../src/legacy/scss/bootstrap_review.scss | 6 +++ .../src/libs/bootstrap/utilities_custom.scss | 23 ++++++++++ .../web/static/src/webclient/webclient.scss | 7 ++++ .../static/src/scss/bootstrap_overridden.scss | 42 +++++++++++++++++++ .../views/event_exhibitor_templates_list.xml | 2 +- 9 files changed, 144 insertions(+), 2 deletions(-) diff --git a/addons/portal/static/src/scss/bootstrap_overridden.scss b/addons/portal/static/src/scss/bootstrap_overridden.scss index 9d5e5e57422..8527d8f0651 100644 --- a/addons/portal/static/src/scss/bootstrap_overridden.scss +++ b/addons/portal/static/src/scss/bootstrap_overridden.scss @@ -2,6 +2,16 @@ // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast $min-contrast-ratio: 3 !default; +//Restore BS4 Colors +$blue: #007bff !default; +$pink: #e83e8c !default; +$green: #28a745 !default; +$cyan: #17a2b8 !default; +$gray-900: #212529 !default; +//End Restore BS4 Colors + +$gray-300: #dee2e6 !default; + // This variable affects the `.h-*` and `.w-*` classes. $sizes: () !default; $sizes: map-merge(( @@ -20,6 +30,10 @@ $body-bg: $o-portal-default-body-bg !default; $font-size-sm: (12 / 16) * 1rem !default; +// Table +$table-border-color: $gray-300 !default; +$table-group-separator-color: $gray-300 !default; + // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. diff --git a/addons/web/static/src/legacy/js/libs/bootstrap.js b/addons/web/static/src/legacy/js/libs/bootstrap.js index 6e41fb4d2cc..48cb13c50fa 100644 --- a/addons/web/static/src/legacy/js/libs/bootstrap.js +++ b/addons/web/static/src/legacy/js/libs/bootstrap.js @@ -88,6 +88,25 @@ Tooltip.prototype.show = function () { } }; +// Fix some cases when we want to render more than one node on the root level +// In BS4 the jQuery was using all node but in the jQuery compatibility layer +// in BS5 it takes only the first node if the jQuery Element is used in the +// function. This hack try to restore the old behaviour wrapping all element +// in a DIV element (to be single root node) +// PS: this can break some querySelector and some CSS selector if they are too +// fragile. +// FIXME: Remove this hack and change all custom content to have only one node +// and/or remove use of jQuery and so use an HTMLElement. +const bootstrapSetElementContent = Tooltip.prototype.setElementContent; +Tooltip.prototype.setElementContent = function (element, content) { + if (content && content.jquery && content.length) { + const $rootElement = $('
'); + $rootElement.append(content); + content = $rootElement[0]; + } + return bootstrapSetElementContent.call(this, element, content); +}; + /* Bootstrap scrollspy fix for non-body to spy */ const bootstrapSpyRefreshFunction = ScrollSpy.prototype.refresh; diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss index 2def9250efa..87bf403e209 100644 --- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss @@ -7,6 +7,13 @@ // Color system // +//Restore BS4 Colors +$blue: #007bff !default; +$pink: #e83e8c !default; +$green: #28a745 !default; +$cyan: #17a2b8 !default; +//End Restore BS4 Colors + // All of those are BS default $white: #fff !default; $gray-100: $o-gray-100 !default; @@ -45,6 +52,16 @@ $min-contrast-ratio: 3 !default; // Options // // Quickly modify global styling by enabling or disabling optional features. +$enable-smooth-scroll: false !default; + +// Prefix for :root CSS variables +$variable-prefix: '' !default; + +// Restore negative margins disabled in BS5 by default +$enable-negative-margins: true !default; + +// Spacing +$spacer: 1rem !default; // Body // @@ -109,10 +126,14 @@ $headings-color: $o-main-headings-color !default; // // Customizes the `.table` component with basic values, each used across all table variations. -$table-accent-bg: rgba($black, .01) !default; +$table-striped-bg-factor: .01 !default; $table-hover-bg: rgba($black, .04) !default; $table-border-color: $gray-200 !default; $table-group-separator-color: $gray-200 !default; +$table-cell-padding-x: .75rem !default; +$table-cell-padding-y: .75rem !default; +$table-cell-padding-x-sm: .3rem !default; +$table-cell-padding-y-sm: .3rem !default; // Buttons // @@ -163,6 +184,9 @@ $custom-control-indicator-checked-disabled-bg: $gray-200 !default; // // $zindex-modal-backdrop: $zindex-modal; +// Navbar +$navbar-padding-x: $spacer !default; + // Navs $nav-tabs-link-active-bg: $white !default; @@ -231,3 +255,7 @@ $form-switch-icon-checked-color: $form-switch-checked-color !default; $form-switch-bg-image: url("data:image/svg+xml,") !default; $form-switch-checked-bg-image: url("data:image/svg+xml,") !default; +// Badge +$badge-color: inherit !default; +$badge-padding-y: 0.25em !default; +$badge-padding-x: 0.4em !default; diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss index 589e5d50280..508e07f38e8 100644 --- a/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss +++ b/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss @@ -13,6 +13,9 @@ $font-size-base: (14 / 16) * 1rem !default; // when used with background classes, it should not be forced to a gray color. $blockquote-small-color: inherit !default; +// Link +$link-decoration: none !default; + // Figures // Inherit color for figure-caption, use text-muted on top of it if you want diff --git a/addons/web/static/src/legacy/scss/bootstrap_review.scss b/addons/web/static/src/legacy/scss/bootstrap_review.scss index 517d064d4ac..7171da04e5a 100644 --- a/addons/web/static/src/legacy/scss/bootstrap_review.scss +++ b/addons/web/static/src/legacy/scss/bootstrap_review.scss @@ -17,6 +17,12 @@ @include text-emphasis-variant(".text-#{$color}", $value); } +// Restore text-X from BS4 that use text-emphasis-variant +@each $color, $value in $theme-colors { + @include text-emphasis-variant(".text-#{$color}", $value); +} + + .card-body { // BS4 colored cards do not have a very popular design. This will reset them // to a BS3-like one: only the header and footer are colored and the body diff --git a/addons/web/static/src/libs/bootstrap/utilities_custom.scss b/addons/web/static/src/libs/bootstrap/utilities_custom.scss index 10e12b0a1d0..da5f0965e8e 100644 --- a/addons/web/static/src/libs/bootstrap/utilities_custom.scss +++ b/addons/web/static/src/libs/bootstrap/utilities_custom.scss @@ -17,3 +17,26 @@ $utilities: map-merge( ), ) ); + +// Restore text-X from BS4 that use text-emphasis-variant +// we don't merge $utilities-text-colors into $utilities +// to avoid same utilises classes generated twice. +// See bootstrap_review.scss +$utilities: map-merge( + $utilities, + ( + "color": ( + property: color, + class: text, + local-vars: ( + "text-opacity": 1 + ), + values: ( + "muted": $text-muted, + "black-50": rgba($black, .5), // deprecated + "white-50": rgba($white, .5), // deprecated + "reset": inherit, + ), + ), + ) +); diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss index dabf2dc10c0..6852921a36f 100644 --- a/addons/web/static/src/webclient/webclient.scss +++ b/addons/web/static/src/webclient/webclient.scss @@ -8,6 +8,13 @@ html, body { height: 100%; } +// Disable default border-style added by _reboot.scss +tfoot { + tr, td, th { + border-style: none; + } +} + // ------------------------------------------------------------------ // General // ------------------------------------------------------------------ diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss index a5756d37789..fe377355cbb 100644 --- a/addons/website/static/src/scss/bootstrap_overridden.scss +++ b/addons/website/static/src/scss/bootstrap_overridden.scss @@ -2,6 +2,14 @@ // Color system // +//Restore BS4 Colors +$blue: #007bff !default; +$pink: #e83e8c !default; +$green: #28a745 !default; +$cyan: #17a2b8 !default; +$gray-900: #212529 !default; +//End Restore BS4 Colors + $white: #FFF !default; $black: #000 !default; @@ -9,6 +17,14 @@ $black: #000 !default; // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast $min-contrast-ratio: 3 !default; +// Prefix for :root CSS variables +$variable-prefix: '' !default; + +// Restore negative margins disabled in BS5 by default +$enable-negative-margins: true !default; + + + // Customize the light and dark text colors for use in our color contrast function. $color-contrast-dark: o-color('900') !default; $color-contrast-light: o-color('white') !default; @@ -39,6 +55,16 @@ $link-hover-color: auto-contrast(darken($link-color, 15%), o-color('o-cc1-bg'), $link-decoration: if(o-website-value('link-underline') == 'always', underline, none) !default; $link-hover-decoration: if(o-website-value('link-underline') != 'never', underline, none) !default; +// Table +$table-striped-bg-factor: .01 !default; +$table-cell-padding-x: .75rem !default; +$table-cell-padding-y: .75rem !default; +$table-cell-padding-x-sm: .3rem !default; +$table-cell-padding-y-sm: .3rem !default; + +// Grid +$grid-gutter-width: 30px !default; + // Components // // Define common padding and border radius sizes and more. @@ -70,6 +96,10 @@ $lead-font-size: 1.125rem !default; $text-muted: mute-color($body-color) !default; +// HR +$hr-color: $black !default; +$hr-opacity: 0.1 !default; + // Buttons // // For each of Bootstrap's buttons, define text, background, and border color. @@ -112,9 +142,18 @@ $input-border-radius: o-website-value('input-border-radius') !default; $input-border-radius-lg: o-website-value('input-border-radius-lg') !default; $input-border-radius-sm: o-website-value('input-border-radius-sm') !default; +// Badge +$badge-padding-y: 0.25em !default; +$badge-padding-x: 0.4em !default; + +// Breadcrumbs +$breadcrumb-padding-y: .75rem !default; +$breadcrumb-padding-x: 1rem !default; + // Navbar // Increase default navbar padding for some navbar styles +$navbar-padding-x: $spacer !default; $navbar-padding-y: if(index(('fill', 'pills', 'outline'), o-website-value('header-links-style')), ($spacer / 2) * 1.25, null) !default; $navbar-nav-link-padding-x: if(index(('outline', 'block'), o-website-value('header-links-style')), .5rem * 3, null) !default; $navbar-nav-link-padding-x: if(o-website-value('header-links-style') == 'border-bottom', .5rem * 2, null) !default; @@ -124,6 +163,9 @@ $navbar-nav-link-padding-x: if(o-website-value('header-links-style') == 'border- $jumbotron-bg: transparent !default; +// Block Quote +$blockquote-margin-y: 0 !default; + // Bootstrap Review $o-btn-outline-defaults: () !default; diff --git a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml index 995f01b818c..77458e5c90f 100644 --- a/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml +++ b/addons/website_event_exhibitor/views/event_exhibitor_templates_list.xml @@ -141,7 +141,7 @@

-
+