Skip to content

Commit

Permalink
fix(Design View): show Design View editing frame highlighting inside …
Browse files Browse the repository at this point in the history
…the component to avoid cut display (#1651)

* show edit panel inside the highlighted element instead of outside which may be cut
* show the highlighted wrapping border inside the component and not outside any more
  • Loading branch information
andreassteinmann authored May 10, 2024
1 parent 46c2d29 commit 1347fd8
Showing 1 changed file with 16 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ $design-view-color-include: #ce5399;

> .design-view-wrapper-actions {
position: absolute;
top: -43px;
left: -2px;
z-index: 1000;
top: 0;
left: 0;
z-index: 2;
display: none;
align-items: center;
justify-content: flex-end;
Expand All @@ -36,10 +36,20 @@ $design-view-color-include: #ce5399;
* The class .last-design-view-wrapper is applied in TypeScript because &.pagelet:not(:has(.design-view-wrapper))
* does not work in Firefox yet. So it cannot be done in CSS only.
*/

&:hover {
outline-width: 3px;
outline-style: solid;
outline-offset: -1px;
&::before {
// create highlighted wrapping element which overlays the component
position: absolute;
top: 0;
z-index: 2;
display: block;
width: 100%;
height: 100%;
pointer-events: none; // important not to block mouse events on included components
content: '';
border: 2px solid $design-view-color-pagelet;
}

> .design-view-wrapper-actions {
display: flex;
Expand Down

0 comments on commit 1347fd8

Please sign in to comment.