83 lines
1.8 KiB
SCSS
83 lines
1.8 KiB
SCSS
|
|
/* Element widget */
|
|
.oe-sidewidget-move {
|
|
position: absolute;
|
|
opacity: 0.6;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgba(white, 0.4);
|
|
color: #6e727a;
|
|
border-radius: 3px;
|
|
padding: 2px 3px;
|
|
cursor: move; /* fallback if grab cursor is unsupported */
|
|
cursor: grab;
|
|
right: 5px;
|
|
top: 0px;
|
|
}
|
|
.oe-sidewidget-move:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Element widget drag & drop zone */
|
|
.oe-dropzone-box {
|
|
position: absolute;
|
|
}
|
|
$oe-dropzone-size-inside: 2px;
|
|
$oe-dropzone-size-outside: 1px;
|
|
$oe-dropzone-size: $oe-dropzone-size-outside + $oe-dropzone-size-inside;
|
|
.oe-dropzone-box-side {
|
|
position: absolute;
|
|
|
|
&.oe-dropzone-box-side-north {
|
|
width: 100%;
|
|
height: 50%;
|
|
top: -($oe-dropzone-size-outside);
|
|
}
|
|
&.oe-dropzone-box-side-south {
|
|
width: 100%;
|
|
height: 50%;
|
|
bottom: -($oe-dropzone-size-outside);
|
|
}
|
|
&.oe-dropzone-box-side-east {
|
|
height: 100%;
|
|
width: ($oe-dropzone-size);
|
|
right: -($oe-dropzone-size-outside);
|
|
}
|
|
&.oe-dropzone-box-side-west {
|
|
height: 100%;
|
|
width: ($oe-dropzone-size);
|
|
left: -($oe-dropzone-size-outside);
|
|
}
|
|
}
|
|
.debug {
|
|
.oe-dropzone-box {
|
|
background: rgba(255, 0, 0, 0.3);
|
|
}
|
|
.oe-dropzone-box-side {
|
|
background: rgb(255, 166, 0);
|
|
}
|
|
.oe-dropzone-hook {
|
|
background: rgba(255, 0, 132, 0.2);
|
|
}
|
|
}
|
|
.oe-dropzone-hook {
|
|
position: absolute;
|
|
}
|
|
[data-oe-local-overlay-id=oe-dropzones-container] {
|
|
opacity: 0.3;
|
|
}
|
|
[data-oe-local-overlay-id=oe-widget-hooks-container] {
|
|
opacity: 0.3;
|
|
}
|
|
[data-oe-local-overlay-id=oe-dropzone-hint-container] {
|
|
pointer-events: none;
|
|
}
|
|
.oe-current-drop-hint {
|
|
position: absolute;
|
|
background: rgba(0, 136, 255, 0.508);
|
|
}
|
|
.oe-editor-dragging {
|
|
pointer-events: none;
|
|
}
|