Lexical: Added form complex/tab ui support

[bookstack] / resources / sass / _editor.scss

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 17e4af97bb0dcc64930bf6f4dd0d876ed2f89970..1e52ad6a9b29703c0ccd965d118d1ff2acce8db6 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -398,6 +398,45 @@ textarea.editor-form-field-input {
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
   }
 }
+.editor-form-tab-container {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+}
+.editor-form-tab-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: .25rem;
+}
+.editor-form-tab-control {
+  font-weight: bold;
+  font-size: 14px;
+  color: #444;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  cursor: pointer;
+  padding: .25rem .5rem;
+  text-align: start;
+  &[aria-selected="true"] {
+    border-color: var(--editor-color-primary);
+    color: var(--editor-color-primary);
+  }
+  &[aria-selected="true"]:after, &:hover:after {
+    background-color: var(--editor-color-primary);
+    opacity: .15;
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+.editor-form-tab-contents {
+  width: 360px;
+}
 
 // Editor theme styles
 .editor-theme-bold {