[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
This commit is contained in:
qsm-odoo
2019-09-10 11:49:34 +00:00
parent d174ed0a83
commit 1d22cac139
@@ -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 {