Lexical: Added button icon system

[bookstack] / resources / sass / _editor.scss

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 2633e85396567bb628579de3691c26315173e06a..f8c895afd351ec4dd4962c29c56361a500c1e7c3 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -1,6 +1,12 @@
+// Common variables
+:root {
+  --editor-color-primary: #206ea7;
+}
+
 // Main UI elements
 .editor-toolbar-main {
   display: flex;
+  flex-wrap: wrap;
 }
 
 // Buttons
@@ -23,6 +29,11 @@
   padding: 4px 6px;
   display: block;
 }
+.editor-button-icon svg {
+  width: 24px;
+  height: 24px;
+  fill: #000;
+}
 
 // Containers
 .editor-dropdown-menu-container {
@@ -72,4 +83,66 @@
 }
 .editor-modal-title {
   font-weight: 700;
-}
\ No newline at end of file
+}
+
+// Specific UI elements
+.editor-color-select-row {
+  display: flex;
+}
+.editor-color-select-option {
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+.editor-color-select-option:hover {
+  border-radius: 3px;
+  box-sizing: border-box;
+  z-index: 3;
+  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
+}
+
+// In-editor elements
+.editor-image-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.editor-image-decorator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  &.selected {
+    border: 1px dashed var(--editor-color-primary);
+  }
+}
+.editor-image-decorator-handle {
+  position: absolute;
+  display: block;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--editor-color-primary);
+  background-color: #FFF;
+  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;
+  }
+}