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

[FIX] web: report: remove CSSCustomProperties in bg and text colors

Browse Source 
After the migration to Bootstrap5 (odoo/odoo#95450), some standard
bootstrap classes did not work anymore when *printing* the report
via wkhtmltopdf (bg-dark, bg-black etc.....).
This is because wkhtmltopdf doesn't support CSS Custom Properties and many
Bootstrap5 rules use them (many have already been adapted in the referenced PR or linked ones)
wkhtmltopdf doesn"t support rgba CSS function either.

This fix allows for thoses classes to work when printing as they can be used
if the report was edited via Studio's Report Editor.

closes odoo/odoo#150214

X-original-commit: 9e32609e6920485d690b3bdb1e4dc83b338c8b36
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
This commit is contained in:
Lucas Perais
2024-01-22 15:56:56 +00:00
parent d64fe336b7
commit 3ba89c75be
1 changed files with 30 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/webclient/actions/reports/report.scss
+30
View File
@@ -2,6 +2,36 @@ $o-default-report-font: 'Lato' !default;
$o-default-report-primary-color: rgb(0, 0, 0) !default;
$o-default-report-secondary-color: rgb(0, 0, 0) !default;
// wkhtmltopdf doesn't support CSS custom properties (--name-stuff)
// It doesn't support CSS's rgba function
// We re-define here the .bg-[theme-colors] (and text)
// In order to define them as a css rgb function
$report-extended-theme-colors: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
@each $color-name, $color-value in $report-extended-theme-colors {
.text-#{$color-name} {
color: RGB($color-value) if($enable-important-utilities, !important, null);
}
.bg-#{$color-name} {
background-color: RGB($color-value) if($enable-important-utilities, !important, null);
}
}
// Do a similar operation than before for grays.
@each $color-name, $color-value in $grays {
.text-#{$color-name} {
color: $color-value if($enable-important-utilities, !important, null);
}
.bg-#{$color-name} {
background-color: $color-value if($enable-important-utilities, !important, null);
}
}
html, body {
height: 100%;
direction: ltr;