Lexical: Added button icon system

[bookstack] / resources / sass / _editor.scss

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 87cc70c9bf3e2e1610223f06ccd5b09f46219e0d..f8c895afd351ec4dd4962c29c56361a500c1e7c3 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -6,6 +6,7 @@
 // Main UI elements
 .editor-toolbar-main {
   display: flex;
+  flex-wrap: wrap;
 }
 
 // Buttons
@@ -28,6 +29,11 @@
   padding: 4px 6px;
   display: block;
 }
+.editor-button-icon svg {
+  width: 24px;
+  height: 24px;
+  fill: #000;
+}
 
 // Containers
 .editor-dropdown-menu-container {
@@ -79,6 +85,22 @@
   font-weight: 700;
 }
 
+// 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;