changes

Work in Progress/fusion_quotations/static/src/scss/flow_designer.scss

@@ -0,0 +1,227 @@
+/* ══════════════════════════════════════════════════════════════════
+   Flow Designer — Visual Configurator Styles
+   Uses Bootstrap 5.3 / Odoo CSS custom properties so light + dark
+   mode are handled automatically — zero manual overrides needed.
+   ══════════════════════════════════════════════════════════════════ */
+
+.fd-designer {
+    background: var(--bs-body-bg);
+    height: 100vh !important;
+    max-height: 100vh;
+    overflow: hidden;
+}
+
+/* ── Toolbar ── */
+.fd-toolbar {
+    background: var(--bs-body-bg);
+    border-bottom: 1px solid var(--bs-border-color);
+    min-height: 48px;
+    z-index: 10;
+    flex-shrink: 0;
+}
+
+.fd-toolbar-title {
+    font-size: 1rem;
+    color: var(--bs-body-color);
+    max-width: 250px;
+}
+
+/* Measurement button — no inline styles, uses a custom class */
+.fd-btn-measure {
+    border-color: var(--bs-border-color);
+    color: var(--bs-body-color);
+
+    &:hover,
+    &:focus {
+        background-color: var(--bs-tertiary-bg);
+        border-color: var(--bs-secondary-color);
+        color: var(--bs-emphasis-color);
+    }
+}
+
+/* ── SVG Canvas ── */
+.fd-canvas-wrapper {
+    flex: 1;
+    min-height: 0;
+}
+
+.fd-svg-canvas {
+    width: 100%;
+    height: 100%;
+    background: var(--bs-secondary-bg);
+    cursor: grab;
+
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+/* SVG grid dots — themed */
+.fd-grid-dot {
+    fill: var(--bs-border-color);
+}
+
+/* ── Nodes ── */
+.fd-node-group {
+    &:hover .fd-node-rect {
+        filter: brightness(0.97);
+    }
+}
+
+.fd-node-content {
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+/* Node text adapts to theme */
+.fd-node-name {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--bs-emphasis-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.fd-node-detail {
+    font-size: 10px;
+    color: var(--bs-secondary-color);
+    margin-top: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* ── Ports ── */
+
+/* Visible decorative port circle — no pointer events */
+.fd-port-visual {
+    stroke: var(--bs-body-bg);
+    stroke-width: 2;
+    pointer-events: none;
+    transition: r 0.15s ease, stroke-width 0.15s ease;
+}
+
+/* Invisible hit area — this is the actual click target */
+.fd-port-hit {
+    fill: transparent;
+    stroke: none;
+    stroke-width: 0;
+    pointer-events: all;
+    cursor: crosshair;
+
+    /* Grow the visible sibling on hover via CSS ~  */
+    &:hover + .fd-port-visual {
+        r: 9;
+        stroke-width: 3;
+    }
+}
+
+/* Input port fill is now set directly as SVG attribute (#8b95a1) */
+
+/* Port labels — concrete color; var() doesn't resolve reliably in SVG */
+.fd-port-label {
+    fill: #8b95a1;
+    font-size: 9px;
+    pointer-events: none;
+}
+
+/* ── Connections ── */
+
+/* Custom property so both light & dark themes get a visible stroke.
+   Defined on SVG so markers and all children inherit reliably. */
+.fd-svg-canvas {
+    --fd-conn-stroke: #8b95a1;
+    --fd-conn-label-bg: rgba(55, 65, 81, 0.85);   /* slate-700 @ 85 — visible on dark bg */
+    --fd-conn-label-color: #e5e7eb;                 /* gray-200 — bright text */
+}
+
+@media (prefers-color-scheme: light) {
+    .fd-svg-canvas {
+        --fd-conn-stroke: #9ca3af;
+        --fd-conn-label-bg: rgba(255, 255, 255, 0.9);
+        --fd-conn-label-color: #4b5563;
+    }
+}
+
+.fd-connection-path {
+    transition: stroke 0.15s ease, stroke-width 0.15s ease;
+}
+
+.fd-connection-temp {
+    stroke: var(--fd-conn-stroke);
+    stroke-width: 2.5;
+    stroke-dasharray: 8 4;
+    stroke-linecap: round;
+    fill: none;
+    pointer-events: none;
+}
+
+/* Label background pill */
+.fd-conn-label-bg {
+    fill: var(--fd-conn-label-bg);
+    pointer-events: none;
+}
+
+.fd-conn-label {
+    fill: var(--fd-conn-label-color);
+    user-select: none;
+    pointer-events: none;
+}
+
+/* Arrow marker fills are set directly as SVG attributes
+   because CSS custom properties don't cascade into marker contexts */
+
+/* ── Properties Panel ── */
+.fd-properties-panel {
+    width: 320px;
+    min-width: 320px;
+    background: var(--bs-body-bg);
+    border-left: 1px solid var(--bs-border-color);
+    overflow-y: auto;
+    flex-shrink: 0;
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+}
+
+.fd-panel-header {
+    background: var(--bs-tertiary-bg);
+    border-bottom: 1px solid var(--bs-border-color);
+    min-height: 42px;
+    flex-shrink: 0;
+}
+
+.fd-panel-body {
+    flex: 1;
+    overflow-y: auto;
+}
+
+.fd-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--bs-secondary-color);
+    margin-bottom: 0.25rem;
+}
+
+/* Option list items */
+.fd-option-row {
+    padding: 4px 0;
+}
+
+.fd-option-bullet {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+/* ── Loading Overlay ── */
+.fd-loading-overlay {
+    position: absolute;
+    inset: 0;
+    background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
+    z-index: 50;
+}