63 lines
1.0 KiB
SCSS
63 lines
1.0 KiB
SCSS
.c-frame-edit {
|
|
// In Layouts, this is the editing rect and handles
|
|
display: none; // Set to display: block in DisplayLayout.vue
|
|
pointer-events: none;
|
|
@include abs();
|
|
border: $editMarqueeBorder;
|
|
|
|
&__handle {
|
|
$d: 6px;
|
|
$o: floor($d * -0.5);
|
|
background: $editFrameColorHandleFg;
|
|
box-shadow: $editFrameColorHandleBg 0 0 0 2px;
|
|
pointer-events: all;
|
|
position: absolute;
|
|
width: $d;
|
|
height: $d;
|
|
top: auto;
|
|
right: auto;
|
|
bottom: auto;
|
|
left: auto;
|
|
|
|
&:before {
|
|
// Extended hit area
|
|
@include abs(-10px);
|
|
content: '';
|
|
display: block;
|
|
z-index: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: $editUIColor;
|
|
}
|
|
|
|
&--nwse {
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
&--nw {
|
|
cursor: nw-resize;
|
|
left: $o;
|
|
top: $o;
|
|
}
|
|
|
|
&--ne {
|
|
cursor: ne-resize;
|
|
right: $o;
|
|
top: $o;
|
|
}
|
|
|
|
&--se {
|
|
cursor: se-resize;
|
|
right: $o;
|
|
bottom: $o;
|
|
}
|
|
|
|
&--sw {
|
|
cursor: sw-resize;
|
|
left: $o;
|
|
bottom: $o;
|
|
}
|
|
}
|
|
}
|