bb-plane-fork/packages/editor/src/styles/drag-drop.css
M. Palanikannan 20e569294d
[WEB-2528] fix: side menu rendering even if created already (#5687)
* fix: side menu rendering even if created already

* fix: drag handles position
2024-09-24 20:11:49 +05:30

116 lines
2.3 KiB
CSS

/* side menu */
#editor-side-menu {
position: fixed;
display: flex;
align-items: center;
opacity: 1;
transition: opacity 0.2s ease 0.2s;
&.side-menu-hidden {
opacity: 0;
pointer-events: none;
}
}
/* end side menu */
/* drag handle */
#drag-handle {
opacity: 1;
&.drag-handle-hidden {
opacity: 0;
pointer-events: none;
}
}
/* end drag handle */
/* ai handle */
#ai-handle {
opacity: 1;
&.handle-hidden {
opacity: 0;
pointer-events: none;
}
}
/* end ai handle */
.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-imageComponent):not(.node-image) {
position: relative;
cursor: grab;
outline: none !important;
box-shadow: none;
--horizontal-offset: 5px;
&:has(.issue-embed),
&.table-wrapper {
--horizontal-offset: 0px;
}
&::after {
content: "";
position: absolute;
top: 0;
left: calc(-1 * var(--horizontal-offset));
height: 100%;
width: calc(100% + (var(--horizontal-offset) * 2));
background-color: rgba(var(--color-primary-100), 0.2);
border-radius: 4px;
pointer-events: none;
}
&.node-imageComponent,
&.node-image {
--horizontal-offset: 0px;
&::after {
background-color: rgba(var(--color-background-100), 0.2);
}
}
}
/* for targeting the task list items */
li.ProseMirror-selectednode:not(.dragging)[data-checked]::after {
margin-left: -5px;
}
/* for targeting the unordered list items */
ul > li.ProseMirror-selectednode:not(.dragging)::after {
margin-left: -10px; /* Adjust as needed */
}
/* Initialize a counter for the ordered list */
ol {
counter-reset: item;
}
/* for targeting the ordered list items */
ol > li.ProseMirror-selectednode:not(.dragging)::after {
counter-increment: item;
margin-left: -18px;
}
/* for targeting the ordered list items after the 9th item */
ol > li:nth-child(n + 10).ProseMirror-selectednode:not(.dragging)::after {
margin-left: -25px;
}
/* for targeting the ordered list items after the 99th item */
ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
margin-left: -35px;
}
.ProseMirror node-image,
.ProseMirror node-imageComponent {
transition: filter 0.1s ease-in-out;
cursor: pointer;
&:hover {
filter: brightness(90%);
}
&.ProseMirror-selectednode {
filter: brightness(90%);
}
}