ngx-register-base 1.2.3 → 1.3.1

package/src/lib/components/menu-constructor/sproc-menu-constructor.component.less

@@ -0,0 +1,183 @@
+.menu-constructor {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  height: calc(100vh - var(--header-height));
+}
+
+.pane {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 12px;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+
+  &.editor {
+    height: 100%;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.root-title {
+  width: 100%;
+}
+
+.collapse-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  color: #334155;
+  margin-right: 4px;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    color: #1e3a8a;
+  }
+}
+
+
+.pane-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 6px;
+  }
+}
+
+.btn {
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid #94a3b8;
+  background: #f8fafc;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+
+  &.primary {
+    border-color: #3b82f6;
+    background: #e0f2fe;
+  }
+
+  &.secondary {
+    border-color: #b5b5b5;
+    background: #d1d1d1;
+  }
+
+  &.small {
+    padding: 2px 6px;
+    margin-left: 2px;
+  }
+
+  &:hover {
+    background: #e2e8f0;
+  }
+}
+
+.list-wrapper {
+  flex: 1;
+  overflow: auto;
+  min-height: 200px;
+}
+
+.left-control {
+  gap: 6px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.node {
+  border: 1px dashed #cbd5e1;
+  border-radius: 8px;
+  margin: 6px 0;
+  background: #fafafa;
+  padding: 4px;
+}
+
+.node-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 6px;
+  align-items: center;
+  background: #f1f5f9;
+  padding: 4px 6px;
+  border-radius: 6px;
+}
+
+.grip {
+  cursor: grab;
+  text-align: center;
+  color: #475569;
+}
+
+.inp {
+  border: 1px solid #cbd5e1;
+  width: 100%;
+  border-radius: 6px;
+  padding: 3px 6px;
+  font-size: 12px;
+}
+
+.depth-controls {
+  display: flex;
+  gap: 2px;
+}
+
+.node.dragged {
+  background: #e0f2fe;
+  border-color: #3b82f6;
+  opacity: 0.85;
+}
+
+.drag-branch-preview {
+  background: #ffffff;
+  border: 1px solid #94a3b8;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 15%);
+  border-radius: 8px;
+  padding: 6px;
+  min-width: 160px;
+}
+
+.preview-bar {
+  background: #f8fafc;
+  border-left: 3px solid #3b82f6;
+  border-radius: 4px;
+  margin: 3px 0;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.drag-branch-placeholder {
+  padding: 6px 0;
+}
+
+.placeholder-row {
+  height: 32px;
+  margin: 3px 0;
+  background: repeating-linear-gradient(-45deg,
+  #e2e8f0,
+  #e2e8f0 6px,
+  #f1f5f9 6px,
+  #f1f5f9 12px);
+  border-radius: 4px;
+}
+
+