[IMP] website, web_editor: redesign the drop zone

This commit adapts the drop zone to maintain consistency with the style
of web editor.

task-3368793

Part-of: odoo/odoo#132653
This commit is contained in:
Brieuc-brd
2023-10-03 12:52:33 +00:00
committed by qsm-odoo
parent 70f723a9f7
commit 8ca644252e
2 changed files with 13 additions and 9 deletions
@@ -2050,19 +2050,22 @@ we-select.o_we_border_preview_aligned_select {
// DROPZONES
@keyframes dropZoneInsert {
to {
background-color: rgba($o-brand-odoo, 0.3);
box-shadow: inset 0 0 $o-we-dropzone-size 0 rgba($o-we-handles-accent-color, .5);
}
}
.oe_drop_zone {
background-color: rgba($o-brand-odoo, 0.15);
background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
animation: dropZoneInsert 1s linear 0s infinite alternate;
&.oe_insert {
position: relative;
z-index: $o-we-overlay-zindex;
width: 100%;
border: 2px dashed $o-we-border-color;
border-radius: $border-radius-lg;
outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
outline-offset: -$o-we-dropzone-border-width;
backdrop-filter: blur(2px);
z-index: $o-we-overlay-zindex;
}
}
@@ -1,8 +1,11 @@
$-editor-messages-margin-x: 2%;
%o-editor-messages {
border: 2px dashed #999999;
background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
text-align: center;
color: white;
color: $o-we-handles-accent-color;
outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
outline-offset: -$o-we-dropzone-border-width;
backdrop-filter: blur(2px);
&:before {
content: attr(data-editor-message);
@@ -87,7 +90,6 @@ $-editor-messages-margin-x: 2%;
> .oe_drop_zone.oe_insert:not(.oe_vertical) {
@extend %o-editor-messages;
height: auto;
text-shadow: -1px -1px 0 $o-brand-odoo, 1px -1px 0 $o-brand-odoo, -1px 1px 0 $o-brand-odoo, 1px 1px 0 $o-brand-odoo;
// Empty editable element during drag & drop
&:only-child {
@@ -111,13 +113,12 @@ $-editor-messages-margin-x: 2%;
@extend %o-editor-messages;
padding: 112px 0px;
margin: 20px $-editor-messages-margin-x;
color: #999999;
border-radius: $border-radius-lg;
}
// Exception 2: empty wrap during drag & drop (override of base case)
&#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
padding: 112px 0px;
color: #999999;
text-shadow: none;
}