diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index fbc066bc72c..4617e927199 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -6562,12 +6562,6 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
name: 'add_size_indicator',
data: this.$weight,
});
- // Hack to align on the right
- this.$weight.css({
- 'width': '200px', // Make parent row grow by faking a width
- 'flex': '0 0 0', // But force no forced width
- 'margin-left': 'auto',
- });
},
/**
* @override
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index a355dcf15c1..ad835195356 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -52,8 +52,8 @@ $o-we-toolbar-height: 40px !default;
$o-we-item-spacing: 8px !default;
$o-we-item-border-width: 1px !default;
-$o-we-item-border-color: $o-we-bg-darkest !default;
-$o-we-item-border-radius: 2px !default;
+$o-we-item-border-color: transparent !default;
+$o-we-item-border-radius: 4px !default;
$o-we-item-clickable-bg: $o-we-bg-lightest!default;
$o-we-item-clickable-color: $o-we-fg-light!default;
$o-we-item-clickable-hover-bg: $o-we-bg-dark!default;
@@ -144,7 +144,7 @@ $o-we-sidebar-content-main-title-font-size: 13px !default;
$o-we-sidebar-content-block-spacing: 10px !default;
-$o-we-sidebar-content-fold-block-bg: $o-we-bg-light !default;
+$o-we-sidebar-content-fold-block-bg: $o-we-bg-lighter !default;
$o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
$o-we-sidebar-content-field-color: $o-we-fg-darker !default;
@@ -194,7 +194,7 @@ $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
$o-we-sidebar-content-field-input-max-width: 60px !default;
$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
-$o-we-sidebar-content-field-input-font-family: $o-font-family-monospace !default;
+$o-we-sidebar-content-field-input-font-family: $o-we-font-family !default;
$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
@@ -212,7 +212,6 @@ $o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default;
$o-we-sidebar-content-field-toggle-control-width: 11px !default;
$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default;
$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;
-$o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default;
$o-we-technical-modal-zindex: 2001;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index e048394c1c3..57ed46d4f5e 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -142,12 +142,13 @@
border-radius: $o-we-sidebar-content-field-border-radius;
background-color: $o-we-sidebar-content-field-clickable-bg;
color: $o-we-sidebar-content-field-clickable-color;
+ text-align: center;
&:not([disabled]):hover, &.active:not(.o_we_no_toggle) {
@include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75);
}
- &.active:not(.o_we_no_toggle) {
+ &.active:not(.o_we_no_toggle, .o_we_collapse_toggler) {
background-color: $o-we-sidebar-content-field-pressed-bg;
}
}
@@ -731,6 +732,7 @@
we-title {
display: block;
text-transform: capitalize;
+ text-align: left;
}
we-customizeblock-options {
@@ -738,14 +740,12 @@
display: block;
padding: 0 0 ($o-we-sidebar-content-block-spacing * 1.5) 0;
background-color: $o-we-bg-lighter;
- box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
> we-title {
display: flex;
align-items: center;
padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
background-color: $o-we-bg-light;
- box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
font-size: $o-we-sidebar-content-main-title-font-size;
> span {
@@ -919,7 +919,6 @@
height: $o-we-sidebar-content-field-toggle-control-height;
border-radius: 10rem;
background-color: $o-we-sidebar-content-field-toggle-control-bg;
- box-shadow: $o-we-sidebar-content-field-toggle-control-shadow;
}
}
&.active we-checkbox {
@@ -935,6 +934,7 @@
we-selection-items {
.o_we_user_value_widget {
margin-top: 0;
+ flex-grow: 1;
}
}
@@ -1008,6 +1008,7 @@
background-color: $o-we-sidebar-content-field-dropdown-item-bg;
color: $o-we-sidebar-content-field-dropdown-item-color;
border-radius: 0;
+ text-align: left;
> we-title {
flex-grow: 1;
@@ -1098,6 +1099,10 @@
width: percentage(1 / 4);
padding: 0;
justify-content: center;
+ flex-grow: 0;
+ border-radius: 2px;
+ border: $o-we-item-border-width solid $o-we-bg-darkest;
+
img {
padding: $o-we-sidebar-content-field-spacing;
}
@@ -1124,6 +1129,7 @@
we-button-group.o_we_user_value_widget {
we-selection-items {
display: flex;
+ flex-grow: 1;
max-width: 100%;
we-button {
@@ -1149,9 +1155,8 @@
we-button {
display: flex;
justify-content: center;
- flex: 0 1 percentage(1/4);
+ flex: 1 1 percentage(1/4);
padding: ($o-we-sidebar-content-field-button-group-button-spacing / 4) ($o-we-sidebar-content-field-button-group-button-spacing / 3);
- text-align: center;
}
}
@@ -1183,6 +1188,22 @@
// 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;
+ }
+ }
+ }
.o_we_color_preview {
@extend %o-preview-alpha-background;
@@ -1190,7 +1211,7 @@
display: block;
width: $o-we-sidebar-content-field-colorpicker-size;
height: $o-we-sidebar-content-field-colorpicker-size;
- border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+ border: $o-we-sidebar-content-field-border-width solid $o-we-bg-darkest;
border-radius: 10rem;
cursor: pointer;
@@ -1582,15 +1603,23 @@
width: 100%;
}
> div {
- flex: 0 1 auto;
+ flex: 1 1 auto;
min-width: 0;
margin-top: $o-we-sidebar-content-field-spacing;
+
+ svg {
+ margin: 0 auto;
+ }
}
&:not(.o_we_fw) {
flex-flow: row nowrap;
align-items: center;
+ &:not(we-input):not(.o_we_so_color_palette) {
+ flex-grow: 1;
+ }
+
> we-title {
flex: 0 0 auto;
@include o-text-overflow();
@@ -1649,7 +1678,6 @@
}
}
&.active {
- box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-dark, .5), $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
we-collapse.active {
&, we-toggler.o_we_collapse_toggler {
background-color: $o-we-bg-lighter;
@@ -1686,6 +1714,10 @@
margin-left: $o-we-sidebar-content-field-label-spacing * 2;
}
+ we-button + .o_we_image_weight {
+ margin-left: $o-we-sidebar-content-field-label-spacing;
+ }
+
.o_we_tag {
background-color: $o-we-bg-darkest;
white-space: nowrap;
@@ -2146,7 +2178,6 @@
&.o_handle_start:after {
background-color: rgba($o-we-sidebar-content-field-clickable-bg, .6);
- border-color: rgba($o-we-sidebar-content-field-border-color, .2);
}
&:hover,
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 8a486fb3997..fa2ebec0885 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -396,10 +396,12 @@
data-exclude="[data-oe-xpath], a[href^='/website/social/'] > i.fa, a[class*='s_share_'] > i.fa">
Replace
-
+
+
+
div, we-toggler {
+ justify-content: flex-end;
height: 100%;
}
@@ -202,11 +197,10 @@ html[data-edit_translations="1"] {
// CC Edition
.o_we_cc_preview_wrapper {
- // Use box-shadow rather than border-bottom in order to
+ // Use box-shadow rather than borders in order to
// avoid misalignments in the 'Options' tab.
- border: 1px solid;
- border-color: rgba($o-we-item-standup-color-light, .2) $o-we-sidebar-content-field-dropdown-border-color transparent;
- box-shadow: 0 1px 0 $o-we-item-standup-color-dark;
+ border: $o-we-item-border-width solid $o-we-item-border-color;
+ box-shadow: 0 0 0 1px $o-we-sidebar-content-field-dropdown-border-color;
+ .o_we_collapse_toggler {
height: 35px; // FIXME hardcoded...