/* Admin quote-builder editor (dark left region). Shared classes for the dark form controls so every editor partial (build / schedule / retainer) stays visually consistent. Navy fields, light text, light-blue (#8EB8DF) accents. Internal tool: clean + dense. Served via `stylesheet_link_tag :app`, which in this Propshaft setup links every top-level stylesheet (verified against the rendered ). */ /* --- text / number inputs --- */ .qba-input { background: #16224A; border: 1px solid #25315F; border-radius: 6px; color: #fff; font: 400 13px var(--font-body); padding: 8px 11px; outline: none; box-sizing: border-box; } .qba-input::placeholder { color: rgba(255, 255, 255, 0.4); } .qba-input:focus { border-color: #8EB8DF; } .qba-input--strong { font-weight: 600; } /* darker variant for inset fields (option label, retainer features) */ .qba-input--inset { background: #091435; border-color: #2C3A66; } /* A
that lays out its inputs inline and fills the available width. NOTE: form_with drops a top-level `style:` option — it only forwards `class:`/`data:` — so flex layout on a form MUST go through a class. */ .qba-rowform { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; } /* --- selects --- */ .qba-select { background: #091435; border: 1px solid #25315F; border-radius: 6px; color: #8EB8DF; font: 600 11px var(--font-body); letter-spacing: 0.04em; padding: 8px 10px; outline: none; cursor: pointer; } .qba-select:focus { border-color: #8EB8DF; } /* neutral select for catalogue pickers */ .qba-select--neutral { color: rgba(255, 255, 255, 0.85); font: 400 12px var(--font-body); letter-spacing: 0; } /* --- money field wrapper ($ prefix + right-aligned number) --- */ .qba-money { display: inline-flex; flex-shrink: 0; align-items: center; background: #091435; border: 1px solid #2C3A66; border-radius: 6px; padding-left: 10px; } .qba-money:focus-within { border-color: #8EB8DF; } .qba-money__sign { color: #6E7BA6; font: 400 13px var(--font-body); } .qba-money__input { width: 92px; background: transparent; border: none; color: #fff; font: 400 13px var(--font-body); padding: 8px 10px 8px 6px; outline: none; text-align: right; } /* --- icon buttons (↑ ↓ ×) --- */ .qba-iconbtn { background: none; border: none; color: rgba(255, 255, 255, 0.4); cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 6px; border-radius: 5px; flex-shrink: 0; } .qba-iconbtn:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .qba-iconbtn--danger:hover { color: #fff; background: rgba(229, 115, 115, 0.22); } .qba-iconbtn--lg { font-size: 16px; } /* --- editor cards --- */ .qba-card { background: #0C173A; border: 1px solid #25315F; border-radius: 12px; padding: 18px; } .qba-card + .qba-card { margin-top: 14px; } /* aligned single-line option row inside a card */ .qba-row { display: flex; gap: 11px; align-items: center; background: #0A1430; border: 1px solid #1C284F; border-radius: 9px; padding: 9px 12px; } /* --- add buttons (solid + dashed) --- */ .qba-addbtn { background: #16224A; border: 1px solid #25315F; color: rgba(255, 255, 255, 0.85); font: 600 12px var(--font-body); padding: 8px 14px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .qba-addbtn:hover { border-color: #8EB8DF; } .qba-addbtn--dashed { width: 100%; background: none; border: 1px dashed #25315F; color: rgba(255, 255, 255, 0.8); padding: 8px 0; border-radius: 6px; } .qba-addbtn--dashed:hover { border-color: #8EB8DF; color: #fff; } /* --- section heading (uppercase light-blue label) --- */ .qba-heading { font: 600 11px/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: #8EB8DF; } /* --- default toggle control (radio/checkbox-style) --- */ .qba-toggle { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; background: transparent; border: 1.5px solid #2C3A66; } .qba-toggle--on { background: #8EB8DF; border-color: #8EB8DF; } .qba-toggle--round { border-radius: 999px; } .qba-toggle--square { border-radius: 6px; }