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

Expand component trees with padding when dragging and dropping

This commit is contained in:
Andrew Kingston 2022-09-28 14:16:09 +01:00
parent 7bcc4efde6
commit e0fcb20fbe
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/client/src/components/Component.svelte
View File

@ -453,6 +453,7 @@
class:interactive class:interactive
class:editing class:editing
class:block={isBlock} class:block={isBlock}
class:explode={children.length && !isLayout && $builderStore.isDragging}
data-id={id} data-id={id}
data-name={name} data-name={name}
data-icon={icon} data-icon={icon}
@ -481,15 +482,19 @@
.component { .component {
display: contents; display: contents;
} }
.component :global(> *) {
transition: padding 250ms ease, border 250ms ease;
}
.component.explode :global(> *) {
padding: 12px 4px !important;
border: 2px dashed var(--spectrum-global-color-gray-400) !important;
}
.interactive :global(*:hover) { .interactive :global(*:hover) {
cursor: pointer; cursor: pointer;
} }
.draggable :global(*:hover) { .draggable :global(*:hover) {
cursor: grab; cursor: grab;
} }
.editing :global(*:hover) { .editing :global(*:hover) {
cursor: auto; cursor: auto;
} }