From b5db4c26616c29360116a72c4427ccc0dc2218f8 Mon Sep 17 00:00:00 2001 From: "Chrysanthe (chgo)" Date: Fri, 19 Jan 2024 10:35:53 +0100 Subject: [PATCH] [FIX] web_editor: fix colorpicker buttons design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit fixes an issue related to the colorpicker component, present in both back-end and front-end. They use the same XML template but they have two different selectors within our SCSS files. Some months ago, commit[1] removed some `@extend` rules related to button design within the `web_editor`, and replaced them with a `.btn` BS class. This affected both colorpicker and causes layout issues on the "front-end web editor", which was not the expected output. The issue was fixed directly with commit[2], but by removing the `.btn` class from the template, it removed the whole styling on the back-end color picker, making it use the user agent button styling. == After == Since the colorpicker already has some CSS variables to handle its design depending on the context, we make use of the CSS variables to customize the design of the component when it is inside the backend, and make it look as it was before it lost its `.btn` class. [1]: ee38c69503a0fd9175751f054d88bf760ec660b8 [2]: 711fc86368eb5283cb0962620f0557d381904fde task-3693078 closes odoo/odoo#150157 Signed-off-by: Geelen Sébastien (sge) --- addons/web_editor/static/src/scss/wysiwyg.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index d76889fe298..7221ae7c0c2 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -344,11 +344,17 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; .o_we_colorpicker_switch_panel button { margin-bottom: -1px; + border: 0; + padding: $btn-padding-y-sm $btn-padding-x-sm; + background: transparent; + color: var(--o-we-toolbar-color-clickable, #{$o-we-toolbar-color-clickable}); + + &:hover { + color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active}); + } &.active { - border-bottom: 1px solid var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent}); - background: none; - box-shadow: none; + box-shadow: inset 0 ($border-width * -1) 0 var(--o-we-toolbar-color-accent, #{$o-we-toolbar-color-accent}); color: var(--o-we-toolbar-color-clickable-active, #{$o-we-toolbar-color-clickable-active}); }