From 838564e0acf2f1c2e1727473c8804c010aebae2d Mon Sep 17 00:00:00 2001 From: mano-odoo Date: Tue, 26 Sep 2023 16:16:18 +0200 Subject: [PATCH] [FIX] web_editor: fix colorpicker margin and dropdown UI The negative margin used for the colorpicker was creating a weird spacing when we use the oval shape image or if we have a button group without the colorpicker. This commit adapts the margin on the element itself by overriding it with an !important instead of relying on a negative margin. The dropdown caret from the colorpicker dropdown was misaligned, it happened because the default CSS rule for we-select had priority due to more specific selector. This is fixed by making the selector more relevant to take priority over the default rule. task-3503975 X-original-commit: 2f81c6ae68751d5f93c30aef822730ee04ead391 Part-of: odoo/odoo#136871 Co-authored-by: bvr-odoo --- .../static/src/scss/wysiwyg_snippets.scss | 24 +++++++------------ 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 23bcf4f3cf9..1b70fe2c8d2 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -1268,21 +1268,11 @@ // Color Pickers .o_we_so_color_palette.o_we_user_value_widget { - &:first-of-type { - margin-right: $o-we-sidebar-content-field-multi-spacing * 4; - } - - + .o_we_so_color_palette { - // Countering the margin of the first colorpicker and targeting - // the div to avoid misalignment of we-title (theme tab) - &:nth-of-type(2) { - > div { - margin-left: -$o-we-sidebar-content-field-multi-spacing * 4; - } - we-title + div { - margin-left: 0; - } - } + // Add a margin between color pickers and button groups / widgets + // when next to another without impacting the margin of sibling + // color pickers + + .o_we_user_value_widget:not(.o_we_so_color_palette) { + margin-left: $o-we-sidebar-content-field-multi-spacing * 4 !important; } .o_we_color_preview { @@ -1305,7 +1295,9 @@ .o_we_color_preview { border: 2px solid $o-we-accent; } - .o_we_dropdown_caret { + + // "span" added to make the selector more specific + span.o_we_dropdown_caret { &::before, &::after { right: $o-we-sidebar-content-field-colorpicker-size / 2; }