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; display: grid;
place-items: center; place-items: center;
border-radius: 50%; border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
} }
.anchor-inner { .anchor-inner {
width: calc(var(--size) / 2); width: calc(var(--size) / 2);
@ -140,45 +141,66 @@
pointer-events: none; pointer-events: none;
border-radius: 2px; 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 { .anchor.right {
right: calc(var(--size) / -2 - 1px); left: calc(100% + 1px);
top: calc(50% - var(--size) / 2); top: 50%;
cursor: e-resize; cursor: e-resize;
} }
.anchor.left { .anchor.left {
left: calc(var(--size) / -2 - 1px); left: -1px;
top: calc(50% - var(--size) / 2); top: 50%;
cursor: w-resize; cursor: w-resize;
} }
.anchor.bottom { .anchor.bottom {
left: calc(50% - var(--size) / 2 + 1px); left: 50%;
bottom: calc(var(--size) / -2 - 1px); top: calc(100% + 1px);
cursor: s-resize; cursor: s-resize;
} }
.anchor.top { .anchor.top {
left: calc(50% - var(--size) / 2 + 1px); left: 50%;
top: calc(var(--size) / -2 - 1px); top: -1px;
cursor: n-resize; cursor: n-resize;
} }
.anchor.bottom-right { .anchor.bottom-right {
right: calc(var(--size) / -2 - 1px); top: 100%;
bottom: calc(var(--size) / -2 - 1px); left: 100%;
cursor: se-resize; cursor: se-resize;
} }
.anchor.bottom-left { .anchor.bottom-left {
left: calc(var(--size) / -2 - 1px); left: 0;
bottom: calc(var(--size) / -2 - 1px); top: 100%;
cursor: sw-resize; cursor: sw-resize;
} }
.anchor.top-right { .anchor.top-right {
right: calc(var(--size) / -2 - 1px); left: 100%;
top: calc(var(--size) / -2 - 1px); top: 0;
cursor: ne-resize; cursor: ne-resize;
} }
.anchor.top-left { .anchor.top-left {
left: calc(var(--size) / -2 - 1px); left: 0;
top: calc(var(--size) / -2 - 1px); top: 0;
cursor: nw-resize; cursor: nw-resize;
} }
</style> </style>