MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update the style of edge anchors

This commit is contained in:
Andrew Kingston 2024-08-09 09:14:53 +01:00
parent 86061543dd
commit 46beead098
No known key found for this signature in database
1 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
packages/client/src/components/preview/Indicator.svelte
View File

@ -131,6 +131,7 @@
display: grid;
place-items: center;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
}
.anchor-inner {
width: calc(var(--size) / 2);
@ -140,45 +141,66 @@
pointer-events: none;
border-radius: 2px;
}
/* Thinner anchors for each edge */
.anchor.right,
.anchor.left {
height: calc(var(--size) * 2);
}
.anchor.top,
.anchor.bottom {
width: calc(var(--size) * 2);
}
.anchor.right .anchor-inner,
.anchor.left .anchor-inner {
height: calc(var(--size) * 1.4);
width: calc(var(--size) * 0.3);
}
.anchor.top .anchor-inner,
.anchor.bottom .anchor-inner {
width: calc(var(--size) * 1.4);
height: calc(var(--size) * 0.3);
}
/* Anchor positions */
.anchor.right {
right: calc(var(--size) / -2 - 1px);
top: calc(50% - var(--size) / 2);
left: calc(100% + 1px);
top: 50%;
cursor: e-resize;
}
.anchor.left {
left: calc(var(--size) / -2 - 1px);
top: calc(50% - var(--size) / 2);
left: -1px;
top: 50%;
cursor: w-resize;
}
.anchor.bottom {
left: calc(50% - var(--size) / 2 + 1px);
bottom: calc(var(--size) / -2 - 1px);
left: 50%;
top: calc(100% + 1px);
cursor: s-resize;
}
.anchor.top {
left: calc(50% - var(--size) / 2 + 1px);
top: calc(var(--size) / -2 - 1px);
left: 50%;
top: -1px;
cursor: n-resize;
}
.anchor.bottom-right {
right: calc(var(--size) / -2 - 1px);
bottom: calc(var(--size) / -2 - 1px);
top: 100%;
left: 100%;
cursor: se-resize;
}
.anchor.bottom-left {
left: calc(var(--size) / -2 - 1px);
bottom: calc(var(--size) / -2 - 1px);
left: 0;
top: 100%;
cursor: sw-resize;
}
.anchor.top-right {
right: calc(var(--size) / -2 - 1px);
top: calc(var(--size) / -2 - 1px);
left: 100%;
top: 0;
cursor: ne-resize;
}
.anchor.top-left {
left: calc(var(--size) / -2 - 1px);
top: calc(var(--size) / -2 - 1px);
left: 0;
top: 0;
cursor: nw-resize;
}
</style>