[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 <bvr@odoo.com>
This commit is contained in:
mano-odoo
2023-09-28 10:22:08 +00:00
committed by qsm-odoo
co-authored by bvr-odoo
parent 521176c2b8
commit 838564e0ac
@@ -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;
}