[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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user