[FIX] website: fix some components in case of contrasted boxed layout

In some cases, components had dark text over dark background (or light text over light background) by mistake. Example: - Enter edit mode. - In the theme tab, choose "boxed" as page layout. - A color picker appears below to control the color behind the box. - Set it to a dark color (if your box main color is light) - Go to a course page (install website_slides) - Check the mobile version => The bootstrap tab and its section uses the dark color you set up as body color instead of the expected boxed layout color (this can also be seen with standard "tabs" snippets, although their body is not buggy in that case). This is because of bootstrap which uses `$body-bg` as default value for other variables, such as `$nav-tabs-link-active-bg` in the case described above. It also uses the variable in the creation of CSS rules not controlled by explicit variables. In 16.0, bootstrap was updated to 5.1.3 with [1] and this actually increased the problem: input backgrounds now default to `$body-bg`, amongst other things. Since [2], `$body-bg` is also used as the default color for range thumbs. Those are for example visible on the shop main page with the price filter enabled. With a white boxed layout and dark background, those were broken as well. This commit focused on fixing the only critical component: nav-tabs, for which the fix in straightforward. CSS rules that depends on `$body-bg` in bootstrap are less easy to fix (without duplicating their rule), are mainly less important ones and would actually not really be possible to fix in a fully stable way. Those will be fixed only starting from 16.0 with an entirely different fix. [1]: https://github.com/odoo/odoo/commit/971e5a91aab96d36129a823e03f1f9f1b1293968 [2]: https://github.com/odoo/odoo/commit/46e53879749be7ba3d30338d0f25c0a68a88eb3c opw-3151962 closes odoo/odoo#111780 Signed-off-by: Romain Derie (rde) <rde@odoo.com>

[FIX] website: fix some components in case of contrasted boxed layout
03f238aa · qsm-odoo · 770f095e · 03f238aa
Commit 03f238aa authored 2 years ago by qsm-odoo
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -22,6 +22,14 @@ $spacer: 1rem !default; // Need to predefine as used below
 //
 // Settings for the `<body>` element.

+// Bootstrap uses $body-bg as default value for multiple variables but also in
+// the creation of CSS rules (not controlled by variables), which is wrong in
+// case of Odoo boxed layouts. In stable versions, this is fixed for default
+// variable values of critical components only. In 16.0, the problem increased
+// as $body-bg was even more used in BS 5.1.3. That will be fixed entirely in a
+// slightly less stable way: $body-bg will now be the boxed-layout color instead
+// of the behind-the-box color. In future bootstrap version (> 5.1.3), this
+// changed again so this logic may change again too.
 $body-bg: if(o-website-value('layout') != 'full', o-color('body'), o-color('o-cc1-bg')) !default;
 $body-color: o-color('o-cc1-text') or color-yiq(o-color('o-cc1-bg')) !default;

@@ -107,6 +115,10 @@ $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;

+// Navs
+
+$nav-tabs-link-active-bg: o-color('o-cc1-bg') !default;
+
 // Navbar

 // Increase default navbar padding for some navbar styles