/* ========================================================================== paychain.forms.css — the MIS form layer -------------------------------------------------------------------------- LOADS LAST, after paychain.bridge.css. Forms are the one thing in this product people TYPE INTO rather than read, and four sheets had an opinion about them. One place now decides, and it decides last. WHAT THIS REPLACED, and why the forms looked raw: 1 A BARE HAD NO STYLING AT ALL. Nothing in any sheet targeted a plain `input` element — every rule needed .form-control or .bc-input. The newer screens (.mis-label, used by Long Distance) write bare inputs, so they fell straight through to the browser default: grey bevel, system font, native spinners. That is the "Edit route" modal. 2 `.form-control` CARRIED min-height:72px ON THE BASE CLASS. Meant for textareas, applied to every text input on 99 views. Every field on those screens was twice the height it should be. 3 `.btn-close` DREW AN X WITH PSEUDO-ELEMENTS AND NEVER HID ITS TEXT. The markup is on 71 views, so the word "Close" and the drawn × rendered on top of each other. Real Bootstrap hides the label; the compat layer forgot to. THE MODEL, and it is deliberately small: .field one label + control + help/error (the only unit) .field__label always ABOVE the control, always visible .field__help quiet, below .field__error replaces help when invalid .field-row two or three fields side by side, collapsing at 640px .fieldset a titled GROUP of fields with air around it Everything else — .mis-label, .form-control, .form-floating, .bc-input, .form-select, .input-group and bare elements — is mapped ONTO that model rather than restyled separately, so a screen written in any of the five idioms comes out the same shape with no view edited. TOP LABELS, NOT FLOATING. Materio's .form-floating is degraded to a top label on the 16 views that use it. Floating labels test worse on completion time, halve their own contrast at the moment they matter, collide with placeholders, and confuse autofill and screen readers. They also cannot hold "Company registration number" without truncating. ========================================================================== */ /* ========================================================================== 1 · THE CONTROL ========================================================================== One declaration for every typed control in the product, whatever class it carries and whether it carries one at all. The bare-element selectors are scoped to form contexts rather than applied globally: a global `input {}` would catch the OTP boxes, the table filter chips and anything a page builds by hand. Inside a
, a .mis-label, a .field or a modal body, a bare input IS a form field and should look like one — that assumption holds across all 181 views. ========================================================================== */ :where( :is(form, .mis-label, .mis-form, .field, .modal-body, .card-body, .bce-filterrow__field, .bce-toolbar) :is( input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input:not([type]), select, textarea ):not(.bc-otp input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) ), .form-control, .form-select, .bc-input, .bc-select, .bc-textarea { /* 44px is the CI's minimum touch target and this product is used on phones at a taxi rank. The old 36px was under it on every screen. */ /* :where(), NOT :is(), for the context prefix — and this is load-bearing. :is() takes the specificity of its most specific argument, which pushed this whole selector to roughly (0,3,2). Every rule AFTER it that tried to refine one control type — `.form-select { padding-right: 40px }` at (0,1,0) — silently lost. The chevron then drew at the right edge of a select whose text ran all the way under it, which is exactly what a person sees as "the dropdown text is overlapping". The ENTIRE descendant compound goes inside ONE :where(), not just the context prefix. The first attempt wrapped only the prefix and left the `:not(...)` chain outside it — and a `:not()` also carries the specificity of its argument, so the rule was still (0,5,1) and the select chevron was still losing. A :where() that does not enclose the whole compound buys nothing. At zero specificity the later, narrower rules win the way they read as though they should, and anything added below can refine a control without having to think about specificity at all. The explicit class selectors below stay OUTSIDE the :where() so they keep their natural (0,1,0) and still beat the upstream sheets. */ min-height: 44px; width: 100%; padding: 10px 13px; font: inherit; font-size: var(--bc-fs-base, 1rem); line-height: 1.45; color: var(--bc-text-strong); background-color: var(--bc-bg-surface); /* background-image is NOT reset here. It was, and it silently beat the select chevron three rules down: this selector's :is() context prefix pushes it to roughly (0,3,2) while `.form-select` alone is (0,1,0), so the later, more specific-looking rule lost. background-color rather than the shorthand is what keeps them independent, and nothing upstream sets an image on an input that needs clearing. */ border: 1px solid var(--bc-border-strong); border-radius: var(--bc-radius, 8px); /* the CI's control radius */ box-shadow: none; appearance: none; -webkit-appearance: none; transition: border-color var(--bc-motion-micro, 150ms) var(--bc-ease-out, ease), box-shadow var(--bc-motion-micro, 150ms) var(--bc-ease-out, ease), background-color var(--bc-motion-micro, 150ms) var(--bc-ease-out, ease); } /* THE 72px BUG. `.form-control{min-height:72px}` was written for textareas and landed on the base class. Textareas get the tall treatment by being textareas; nothing else should. */ textarea, textarea.form-control, .bc-textarea { min-height: 96px; padding-top: 10px; resize: vertical; } /* A