[FIX] web_editor: make dashed purple overlay visible over purple

When hovering a set of options we display a purple dashed overlay, the
problem is that it was not visible over purple-like colors. Now it is
an alternance of purple and white.

Part of https://github.com/odoo/odoo/pull/36515

1 files changed, 34 insertions, 18 deletions

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 61228598b9d..2395a436e51 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -501,11 +501,27 @@ body.editor_enable.editor_has_snippets {
                 border-color: inherit;
                 transition: background 300ms ease 0s;
 
+                &::before {
+                    content: '';
+                    @include o-position-absolute(0, 0, 0, 0);
+                    z-index: -1;
+                    display: block;
+                    border-width: inherit;
+                    border-style: solid;
+                    border-color: white;
+                }
+
                 &.w {
                     border-width: $o-we-handle-border-width-preview;
                     border-right-width: 0;
                     cursor: e-resize;
 
+                    &::before {
+                        top: -$o-we-handle-border-width-preview;
+                        bottom: -$o-we-handle-border-width-preview;
+                        left: -$o-we-handle-border-width-preview;
+                    }
+
                     &:after {
                         @include o-position-absolute($top: 50%, $left: 40%);
                         margin-top: -$o-we-handles-btn-size/2;
@@ -515,6 +531,10 @@ body.editor_enable.editor_has_snippets {
                     border-right-width: $o-we-handle-border-width-preview;
                     cursor: w-resize;
 
+                    &::before {
+                        right: -$o-we-handle-border-width-preview;
+                    }
+
                     &:after {
                         @include o-position-absolute($top: 50%, $right: 40%);
                         margin-top: -$o-we-handles-btn-size/2;
@@ -524,6 +544,10 @@ body.editor_enable.editor_has_snippets {
                     border-top-width: $o-we-handle-border-width-preview;
                     cursor: ns-resize;
 
+                    &::before {
+                        top: -$o-we-handle-border-width-preview;
+                    }
+
                     &:after {
                         @include o-position-absolute($left: 50%, $top: 40%);
                         margin-left: -$o-we-handles-btn-size/2;
@@ -533,6 +557,10 @@ body.editor_enable.editor_has_snippets {
                     border-bottom-width: $o-we-handle-border-width-preview;
                     cursor: ns-resize;
 
+                    &::before {
+                        bottom: -$o-we-handle-border-width-preview;
+                    }
+
                     &:after {
                         @include o-position-absolute($left: 50%, $bottom: 40%);
                         margin-left: -$o-we-handles-btn-size/2;
@@ -566,25 +594,16 @@ body.editor_enable.editor_has_snippets {
                     background-color: rgba($o-we-handles-accent-color, 0.05);
                 }
                 > .o_handle {
+                    border-style: solid;
+
+                    &::before {
+                        display: none;
+                    }
+
                     &:hover,
                     &.o_active {
                         background-color: rgba($o-we-handles-accent-color, 0.2);
 
-                        &:before {
-                            content: '';
-                            @include o-position-absolute(0, $left: 50%);
-                            width: 1px;
-                            height: 100%;
-                            margin-left: -1px;
-                            background-color: rgba($o-we-handles-accent-color, 0.5);
-                        }
-
-                        &.w:before {
-                            @include o-position-absolute(50%, $left: 0);
-                            width: 100%;
-                            height: 1px;
-                        }
-
                         &:after {
                             border-color: darken($o-we-handles-accent-color, 10%);
                             background-color: darken($o-we-handles-accent-color, 20%);
@@ -656,9 +675,6 @@ body.editor_enable.editor_has_snippets {
                 }
             }
         }
-        &.o_we_options_opened > .o_handles > .o_handle {
-            border-style: solid;
-        }
     }
 
     .contact_menu {