1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-01-03 23:42:28 +03:00

Lexical: Started image resize controls, Defined thorough decorator model

This commit is contained in:
Dan Brown
2024-06-05 13:04:49 +01:00
parent a74e04141c
commit ba871ec46a
6 changed files with 244 additions and 16 deletions

View File

@@ -1,3 +1,8 @@
// Common variables
:root {
--editor-color-primary: #206ea7;
}
// Main UI elements
.editor-toolbar-main {
display: flex;
@@ -72,4 +77,47 @@
}
.editor-modal-title {
font-weight: 700;
}
}
// In-editor elements
.editor-image-wrap {
position: relative;
display: inline-flex;
}
.editor-image-decorator {
display: inline-block;
position: absolute;
border: 1px solid var(--editor-color-primary);
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.editor-image-decorator-handle {
position: absolute;
display: block;
width: 10px;
height: 10px;
background-color: var(--editor-color-primary);
user-select: none;
&.nw {
inset-inline-start: -5px;
inset-block-start: -5px;
cursor: nw-resize;
}
&.ne {
inset-inline-end: -5px;
inset-block-start: -5px;
cursor: ne-resize;
}
&.se {
inset-inline-end: -5px;
inset-block-end: -5px;
cursor: se-resize;
}
&.sw {
inset-inline-start: -5px;
inset-block-end: -5px;
cursor: sw-resize;
}
}