` fell back to the flex default and shrank to its content — a table inside one rendered at ~1100px in a 1536px row instead of filling it. 324 templates use it, so this was quietly narrowing pages all over the admin (/navlinks and /plans were how it surfaced). Same definition Bootstrap gives it: grow, zero basis. */ .lasso-v2 .col{ flex:1 1 0%; max-width:100%; min-width:0; } .lasso-v2 .col-lg{ flex:1 1 auto; min-width:0; } /* A Bootstrap grid nested inside a table cell has nowhere near the ~320px flex basis the shim above hands a half-column, so the two halves wrapped onto separate lines — the Data | Settings pair on /hibu-campaigns stacked instead of sitting either side of its divider. In a cell the columns simply share whatever width the cell has. */ .lasso-v2 td .row, .lasso-v2 th .row{ gap:0; flex-wrap:nowrap; } .lasso-v2 td .row > [class*="col-"], .lasso-v2 th .row > [class*="col-"]{ flex:1 1 0; min-width:0; } /* 4b ── REAL 12-COLUMN SPANS (the shim above deliberately skipped these) ──── The flexible bases above cover the spans the v2 pages were designed against (12/6/8/4). Legacy admin pages also use the other spans, and with no rule at all they fell back to shrink-to-fit: the HNC big board's eight `col-lg-3` KPI tiles crammed onto one line at ~120px each instead of wrapping 4 + 4. These give the remaining spans their true Bootstrap width. The row's `gap:12px` is folded into the math — a span of s/12 is calc(s/12 * (100% + gap) - gap), so s columns plus their gaps total exactly 100%. Each starts full-width and takes its span at the matching breakpoint, which is how Bootstrap's col-{bp}-{n} behaves. */ .lasso-v2 .col-1{ flex:0 0 calc(1/12 * (100% + 12px) - 12px); max-width:calc(1/12 * (100% + 12px) - 12px); } .lasso-v2 .col-2{ flex:0 0 calc(2/12 * (100% + 12px) - 12px); max-width:calc(2/12 * (100% + 12px) - 12px); } .lasso-v2 .col-3{ flex:0 0 calc(3/12 * (100% + 12px) - 12px); max-width:calc(3/12 * (100% + 12px) - 12px); } .lasso-v2 .col-5{ flex:0 0 calc(5/12 * (100% + 12px) - 12px); max-width:calc(5/12 * (100% + 12px) - 12px); } .lasso-v2 .col-7{ flex:0 0 calc(7/12 * (100% + 12px) - 12px); max-width:calc(7/12 * (100% + 12px) - 12px); } .lasso-v2 .col-9{ flex:0 0 calc(9/12 * (100% + 12px) - 12px); max-width:calc(9/12 * (100% + 12px) - 12px); } .lasso-v2 .col-10{ flex:0 0 calc(10/12 * (100% + 12px) - 12px); max-width:calc(10/12 * (100% + 12px) - 12px); } .lasso-v2 .col-11{ flex:0 0 calc(11/12 * (100% + 12px) - 12px); max-width:calc(11/12 * (100% + 12px) - 12px); } /* col-sm-4 and col-sm-8 belong in THIS block, not with the flexible md/lg 8/4 pair above. They had no rule at either place, so they fell back to the flex default and shrank to their content while their col-sm-5 / col-sm-7 siblings sized correctly — which is what pulled the HBU order-edit form out of shape (it lays out on col-sm-4 eleven times, nested two rows deep). A flexible 260px basis would not fix it: nested inside a col-lg-4 parent, three such columns each demand 260px and wrap onto separate lines. True 12-column math is what that markup was written against. */ .lasso-v2 .col-sm-1,.lasso-v2 .col-sm-2,.lasso-v2 .col-sm-3,.lasso-v2 .col-sm-4,.lasso-v2 .col-sm-5,.lasso-v2 .col-sm-7,.lasso-v2 .col-sm-8,.lasso-v2 .col-sm-9,.lasso-v2 .col-sm-10,.lasso-v2 .col-sm-11{ flex:1 1 100%; max-width:100%; } @media (min-width:576px){ .lasso-v2 .col-sm-1{ flex:0 0 calc(1/12 * (100% + 12px) - 12px); max-width:calc(1/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-2{ flex:0 0 calc(2/12 * (100% + 12px) - 12px); max-width:calc(2/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-3{ flex:0 0 calc(3/12 * (100% + 12px) - 12px); max-width:calc(3/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-4{ flex:0 0 calc(4/12 * (100% + 12px) - 12px); max-width:calc(4/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-5{ flex:0 0 calc(5/12 * (100% + 12px) - 12px); max-width:calc(5/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-7{ flex:0 0 calc(7/12 * (100% + 12px) - 12px); max-width:calc(7/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-8{ flex:0 0 calc(8/12 * (100% + 12px) - 12px); max-width:calc(8/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-9{ flex:0 0 calc(9/12 * (100% + 12px) - 12px); max-width:calc(9/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-10{ flex:0 0 calc(10/12 * (100% + 12px) - 12px); max-width:calc(10/12 * (100% + 12px) - 12px); } .lasso-v2 .col-sm-11{ flex:0 0 calc(11/12 * (100% + 12px) - 12px); max-width:calc(11/12 * (100% + 12px) - 12px); } } .lasso-v2 .col-md-1,.lasso-v2 .col-md-2,.lasso-v2 .col-md-3,.lasso-v2 .col-md-5,.lasso-v2 .col-md-7,.lasso-v2 .col-md-9,.lasso-v2 .col-md-10,.lasso-v2 .col-md-11{ flex:1 1 100%; max-width:100%; } @media (min-width:768px){ .lasso-v2 .col-md-1{ flex:0 0 calc(1/12 * (100% + 12px) - 12px); max-width:calc(1/12 * (100% + 12px) - 12px); } .lasso-v2 .col-md-2{ flex:0 0 calc(2/12 * (100% + 12px) - 12px); max-width:calc(2/12 * (100% + 12px) - 12px); } .lasso-v2 .col-md-3{ flex:0 0 calc(3/12 * (100% + 12px) - 12px); max-width:calc(3/12 * (100% + 12px) - 12px); } .lasso-v2 .col-md-5{ flex:0 0 calc(5/12 * (100% + 12px) - 12px); max-width:calc(5/12 * (100% + 12px) - 12px); } .lasso-v2 .col-md-7{ flex:0 0 calc(7/12 * (100% + 12px) - 12px); max-width:calc(7/12 * (100% + 12px) - 12px); } .lasso-v2 .col-md-9{ flex:0 0 calc(9/12 * (100% + 12px) - 12px); max-width:calc(9/12 * (100% + 12px) - 12px); } .lasso-v2 .col-md-10{ flex:0 0 calc(10/12 * (100% + 12px) - 12px); max-width:calc(10/12 * (100% + 12px) - 12px); } .lasso-v2 .col-md-11{ flex:0 0 calc(11/12 * (100% + 12px) - 12px); max-width:calc(11/12 * (100% + 12px) - 12px); } } .lasso-v2 .col-lg-1,.lasso-v2 .col-lg-2,.lasso-v2 .col-lg-3,.lasso-v2 .col-lg-5,.lasso-v2 .col-lg-7,.lasso-v2 .col-lg-9,.lasso-v2 .col-lg-10,.lasso-v2 .col-lg-11{ flex:1 1 100%; max-width:100%; } @media (min-width:992px){ .lasso-v2 .col-lg-1{ flex:0 0 calc(1/12 * (100% + 12px) - 12px); max-width:calc(1/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-2{ flex:0 0 calc(2/12 * (100% + 12px) - 12px); max-width:calc(2/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-3{ flex:0 0 calc(3/12 * (100% + 12px) - 12px); max-width:calc(3/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-5{ flex:0 0 calc(5/12 * (100% + 12px) - 12px); max-width:calc(5/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-7{ flex:0 0 calc(7/12 * (100% + 12px) - 12px); max-width:calc(7/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-9{ flex:0 0 calc(9/12 * (100% + 12px) - 12px); max-width:calc(9/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-10{ flex:0 0 calc(10/12 * (100% + 12px) - 12px); max-width:calc(10/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-11{ flex:0 0 calc(11/12 * (100% + 12px) - 12px); max-width:calc(11/12 * (100% + 12px) - 12px); } } .lasso-v2 .col-xl-1,.lasso-v2 .col-xl-2,.lasso-v2 .col-xl-3,.lasso-v2 .col-xl-5,.lasso-v2 .col-xl-7,.lasso-v2 .col-xl-9,.lasso-v2 .col-xl-10,.lasso-v2 .col-xl-11{ flex:1 1 100%; max-width:100%; } @media (min-width:1200px){ .lasso-v2 .col-xl-1{ flex:0 0 calc(1/12 * (100% + 12px) - 12px); max-width:calc(1/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-2{ flex:0 0 calc(2/12 * (100% + 12px) - 12px); max-width:calc(2/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-3{ flex:0 0 calc(3/12 * (100% + 12px) - 12px); max-width:calc(3/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-5{ flex:0 0 calc(5/12 * (100% + 12px) - 12px); max-width:calc(5/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-7{ flex:0 0 calc(7/12 * (100% + 12px) - 12px); max-width:calc(7/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-9{ flex:0 0 calc(9/12 * (100% + 12px) - 12px); max-width:calc(9/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-10{ flex:0 0 calc(10/12 * (100% + 12px) - 12px); max-width:calc(10/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-11{ flex:0 0 calc(11/12 * (100% + 12px) - 12px); max-width:calc(11/12 * (100% + 12px) - 12px); } } .lasso-v2 .col-lg-auto{ flex:0 0 auto; max-width:100%; } .lasso-v2 .align-items-center{ align-items:center; } .lasso-v2 .align-items-start{ align-items:flex-start; } /* `align-items-end` is on 9 templates and `align-items-baseline` on 2, and neither was ever defined here — so a row that explicitly asked to bottom- align got top-aligned instead. That is what threw buttons out of line with the field beside them: a labelled input is taller than a bare button, so top-aligning sits the button level with the LABEL rather than the input. The category Google Audience row is the clearest case — it already carries `align-items-end` and was ignored. Also given a `.row`-qualified form so it outranks the generic `.row{align-items:center}` in lasso-theme.css. */ /* Sizing / auto-margin utilities the shim never picked up, all standard Bootstrap. `h-100` is on 41 templates and `mt-auto` on 8 — together they are the equal-height-card idiom (`card h-100` + `mt-auto` on the footer), which without them collapsed to ragged cards with their buttons at whatever height the copy happened to end. `ml-auto` / `mr-auto` push an item to one end of a flex row and are on 7 and 8 templates. */ .lasso-v2 .h-100{ height:100%; } .lasso-v2 .mt-auto{ margin-top:auto; } .lasso-v2 .mb-auto{ margin-bottom:auto; } .lasso-v2 .ml-auto,.lasso-v2 .ms-auto{ margin-left:auto; } .lasso-v2 .mr-auto,.lasso-v2 .me-auto{ margin-right:auto; } .lasso-v2 .text-nowrap{ white-space:nowrap; } .lasso-v2 .align-items-end, .lasso-v2 .row.align-items-end{ align-items:flex-end; } .lasso-v2 .align-items-baseline, .lasso-v2 .row.align-items-baseline{ align-items:baseline; } /* 5 ── DISPLAY / FLEX / SPACING UTILITY SHIMS (subset actually used) ─────── */ .lasso-v2 .d-none{ display:none !important; } .lasso-v2 .d-block{ display:block !important; } .lasso-v2 .d-inline-block{ display:inline-block !important; } .lasso-v2 .d-flex{ display:flex !important; } .lasso-v2 .flex-wrap{ flex-wrap:wrap; } .lasso-v2 .font-weight-bold{ font-weight:700; } .lasso-v2 .text-primary{ color:var(--teal-dark); } .lasso-v2 .align-top{ vertical-align:top; } .lasso-v2 .justify-content-start{ justify-content:flex-start; } .lasso-v2 .justify-content-end{ justify-content:flex-end; } .lasso-v2 .justify-content-center{ justify-content:center; } .lasso-v2 .justify-content-between{ justify-content:space-between; } .lasso-v2 .text-center{ text-align:center; } .lasso-v2 .text-right,.lasso-v2 .text-md-right{ text-align:right; } .lasso-v2 .text-left,.lasso-v2 .text-md-left{ text-align:left; } .lasso-v2 .text-white{ color:#fff; } .lasso-v2 .text-muted{ color:var(--muted); } /* Bootstrap position utilities aren't in the clean layout; without them an absolutely-positioned dropdown (e.g. the trust-badge autocomplete) escapes to the page instead of sitting under its input. */ .lasso-v2 .position-relative{ position:relative!important; } .lasso-v2 .position-absolute{ position:absolute!important; } /* common Bootstrap border utilities used by the review summary cards/rows */ .lasso-v2 .border{ border:1px solid var(--line)!important; } .lasso-v2 .border-0{ border:0!important; } .lasso-v2 .rounded{ border-radius:10px!important; } .lasso-v2 .w-100,.lasso-v2 .w100{ width:100%; } .lasso-v2 .mx-auto{ margin-left:auto; margin-right:auto; } /* margin/padding steps (Bootstrap-ish 0-3 → 0/.25/.5/1rem) */ .lasso-v2 .m-0{ margin:0; } .lasso-v2 .mb-0{ margin-bottom:0; } .lasso-v2 .mt-0{ margin-top:0; } .lasso-v2 .mb-1{ margin-bottom:.25rem; } .lasso-v2 .mb-2{ margin-bottom:.5rem; } .lasso-v2 .mb-3{ margin-bottom:1rem; } .lasso-v2 .mt-1{ margin-top:.25rem; } .lasso-v2 .mt-2{ margin-top:.5rem; } .lasso-v2 .mt-3{ margin-top:1rem; } .lasso-v2 .my-1{ margin-top:.25rem; margin-bottom:.25rem; } .lasso-v2 .mr-1,.lasso-v2 .me-1{ margin-right:.25rem; } .lasso-v2 .mr-2,.lasso-v2 .me-2{ margin-right:.5rem; } .lasso-v2 .ml-1,.lasso-v2 .ms-1{ margin-left:.25rem; } .lasso-v2 .ml-2,.lasso-v2 .ms-2{ margin-left:.5rem; } .lasso-v2 .p-0{ padding:0; } .lasso-v2 .p-1{ padding:.25rem; } .lasso-v2 .p-2{ padding:.5rem; } .lasso-v2 .pt-1{ padding-top:.25rem; } .lasso-v2 .pt-2{ padding-top:.5rem; } .lasso-v2 .pb-0{ padding-bottom:0; } .lasso-v2 .pb-1{ padding-bottom:.25rem; } .lasso-v2 .pb-2{ padding-bottom:.5rem; } .lasso-v2 .pl-2,.lasso-v2 .ps-2{ padding-left:.5rem; } .lasso-v2 .pr-2,.lasso-v2 .pe-2{ padding-right:.5rem; } .lasso-v2 .px-2{ padding-left:.5rem; padding-right:.5rem; } .lasso-v2 .py-2{ padding-top:.5rem; padding-bottom:.5rem; } .lasso-v2 .no-pad{ padding:0 !important; } /* Steps 4 and 5 (1.5rem / 3rem). The shim stopped at 3, so every -4 and -5 utility silently did nothing on a converted page — that is 200+ uses across templates, `mb-4` alone in 68 of them, and it is why the welcome dashboard's lead buttons sat flush against the table above them (`pt-5`). Same Bootstrap 4 scale as the steps above: 0/.25/.5/1/1.5/3rem. */ .lasso-v2 .m-4{ margin:1.5rem; } .lasso-v2 .m-5{ margin:3rem; } .lasso-v2 .mt-4{ margin-top:1.5rem; } .lasso-v2 .mt-5{ margin-top:3rem; } .lasso-v2 .mb-4{ margin-bottom:1.5rem; } .lasso-v2 .mb-5{ margin-bottom:3rem; } .lasso-v2 .ml-4,.lasso-v2 .ms-4{ margin-left:1.5rem; } .lasso-v2 .ml-5,.lasso-v2 .ms-5{ margin-left:3rem; } .lasso-v2 .mr-4,.lasso-v2 .me-4{ margin-right:1.5rem; } .lasso-v2 .mr-5,.lasso-v2 .me-5{ margin-right:3rem; } .lasso-v2 .mx-4{ margin-left:1.5rem; margin-right:1.5rem; } .lasso-v2 .mx-5{ margin-left:3rem; margin-right:3rem; } .lasso-v2 .my-4{ margin-top:1.5rem; margin-bottom:1.5rem; } .lasso-v2 .my-5{ margin-top:3rem; margin-bottom:3rem; } .lasso-v2 .p-4{ padding:1.5rem; } .lasso-v2 .p-5{ padding:3rem; } .lasso-v2 .pt-4{ padding-top:1.5rem; } .lasso-v2 .pt-5{ padding-top:3rem; } .lasso-v2 .pb-4{ padding-bottom:1.5rem; } .lasso-v2 .pb-5{ padding-bottom:3rem; } .lasso-v2 .pl-4,.lasso-v2 .ps-4{ padding-left:1.5rem; } .lasso-v2 .pl-5,.lasso-v2 .ps-5{ padding-left:3rem; } .lasso-v2 .pr-4,.lasso-v2 .pe-4{ padding-right:1.5rem; } .lasso-v2 .pr-5,.lasso-v2 .pe-5{ padding-right:3rem; } .lasso-v2 .px-4{ padding-left:1.5rem; padding-right:1.5rem; } .lasso-v2 .px-5{ padding-left:3rem; padding-right:3rem; } .lasso-v2 .py-4{ padding-top:1.5rem; padding-bottom:1.5rem; } .lasso-v2 .py-5{ padding-top:3rem; padding-bottom:3rem; } /* flex-grow + step-3 (1rem) margin/padding + status text colours: standard Bootstrap utilities the shared cards emit (ele_package_usage_cards.php etc.). They were unshimmed, so card internals collapsed — icon glued to the text, the chevron never pushed to the card edge, the progress track was invisible. */ .lasso-v2 .flex-grow-1{ flex-grow:1; } .lasso-v2 .align-items-start{ align-items:flex-start; } .lasso-v2 .mr-3,.lasso-v2 .me-3{ margin-right:1rem; } .lasso-v2 .ml-3,.lasso-v2 .ms-3{ margin-left:1rem; } .lasso-v2 .mx-2{ margin-left:.5rem; margin-right:.5rem; } .lasso-v2 .p-3{ padding:1rem; } .lasso-v2 .px-3{ padding-left:1rem; padding-right:1rem; } .lasso-v2 .py-3{ padding-top:1rem; padding-bottom:1rem; } .lasso-v2 .pt-3{ padding-top:1rem; } .lasso-v2 .pb-3{ padding-bottom:1rem; } .lasso-v2 .text-success{ color:var(--green); } .lasso-v2 .text-warning{ color:var(--amber); } .lasso-v2 .text-decoration-none,.lasso-v2 a.text-decoration-none{ text-decoration:none; } /* ── Vocabulary the shim never covered ─────────────────────────────────────── An audit of every class the templates use against everything these two sheets define turned up 411 Bootstrap-vocabulary classes that are asked for and never answered. Each one fails silently — the markup requests a behaviour and simply does not get it, which is why breakage keeps surfacing a page at a time rather than all at once. The highest-traffic ones are filled in below; the count after each is how many templates use it. Audit is re-runnable: python3 tmp/audit-v2-css-coverage.py */ /* Tables. `table-condensed` is the Bootstrap 3 spelling of `table-sm` and is still on 243 templates; `table-hover` on 240 had no hover at all. */ .lasso-v2 .table-condensed th, .lasso-v2 .table-condensed td{ padding:6px 10px; } .lasso-v2 .table-hover tbody tr:hover{ background:#F2F5F8; } .lasso-v2 .table-borderless th, .lasso-v2 .table-borderless td{ border:0; } /* Without this a wide table pushes the whole PAGE sideways instead of scrolling inside its own box. 53 templates. */ .lasso-v2 .table-responsive{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .lasso-v2 .align-middle{ vertical-align:middle; } /* Floats. `pull-right` (Bootstrap 3) was shimmed earlier; its Bootstrap 4 replacement was not, and 82 templates use that one. */ .lasso-v2 .float-right{ float:right; } .lasso-v2 .float-left{ float:left; } .lasso-v2 .float-none{ float:none; } /* Grid offsets — 68 templates lean on these to indent a form column. */ @media (min-width:992px){ .lasso-v2 .offset-lg-1{ margin-left:calc(1/12 * 100%); } .lasso-v2 .offset-lg-2{ margin-left:calc(2/12 * 100%); } .lasso-v2 .offset-lg-3{ margin-left:calc(3/12 * 100%); } .lasso-v2 .offset-lg-4{ margin-left:calc(4/12 * 100%); } } @media (min-width:768px){ .lasso-v2 .offset-md-1{ margin-left:calc(1/12 * 100%); } .lasso-v2 .offset-md-2{ margin-left:calc(2/12 * 100%); } .lasso-v2 .offset-md-3{ margin-left:calc(3/12 * 100%); } } /* An offset column must not also grow. col-lg-4/6/8 are shimmed with a flex-grow above so dashboard cards fill their row — but a column carrying an offset is the centred-form idiom (indent a third, occupy a third). Growing swallowed the space the offset had reserved on the other side, so every such form sat pinned to the right edge with a blank third beside it (/campaigns/edit was how this surfaced). Give an offset column the rigid 12-col share its offset assumes. col-lg-10 and the other odd widths already have rigid rules and are untouched. */ @media (min-width:992px){ .lasso-v2 .col-lg-4[class*="offset-lg-"]{ flex:0 0 calc(4/12 * (100% + 12px) - 12px); max-width:calc(4/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-6[class*="offset-lg-"]{ flex:0 0 calc(6/12 * (100% + 12px) - 12px); max-width:calc(6/12 * (100% + 12px) - 12px); } .lasso-v2 .col-lg-8[class*="offset-lg-"]{ flex:0 0 calc(8/12 * (100% + 12px) - 12px); max-width:calc(8/12 * (100% + 12px) - 12px); } } /* Card sub-parts. The theme styles `.card` as one padded surface, so these only need to space and separate themselves rather than add padding again. */ .lasso-v2 .card-header{ font-weight:700; color:var(--ink); padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--line); background:none; } .lasso-v2 .card-footer{ padding-top:12px; margin-top:14px; border-top:1px solid var(--line); background:none; } .lasso-v2 .card-title{ font-weight:700; font-size:16px; color:var(--ink); margin:0 0 6px; } .lasso-v2 .card-text{ color:var(--text); margin:0 0 8px; } /* Text + background colours still missing from the palette. */ .lasso-v2 .text-danger{ color:var(--brand-red); } .lasso-v2 .text-info{ color:var(--blue); } .lasso-v2 .text-dark{ color:var(--ink); } .lasso-v2 .text-secondary{ color:var(--muted); } .lasso-v2 .text-uppercase{ text-transform:uppercase; } .lasso-v2 .text-lowercase{ text-transform:lowercase; } .lasso-v2 .text-capitalize{ text-transform:capitalize; } .lasso-v2 .bg-white{ background-color:#fff; } .lasso-v2 .bg-light{ background-color:var(--bg); } .lasso-v2 .alert-secondary{ background:#F1F3F5; color:var(--text); border-color:var(--line); } /* Small control sizes. */ .lasso-v2 input.form-control-sm, .lasso-v2 select.form-control-sm, .lasso-v2 .form-control-sm{ padding:5px 9px!important; font-size:12.5px; } .lasso-v2 .input-group-sm > .form-control, .lasso-v2 .input-group-sm > .input-group-prepend > .input-group-text, .lasso-v2 .input-group-sm > .input-group-append > .input-group-text{ padding:5px 9px; font-size:12.5px; } /* Buttons: the two legacy size/variant names still in the templates, plus the grouping wrapper. `btn-xs` is Bootstrap 3; `btn-default` is its neutral. */ .lasso-v2 .btn-xs{ padding:5px 11px; font-size:12.5px; } .lasso-v2 .btn-default{ background:#fff; color:var(--text); border:1.5px solid var(--line); } .lasso-v2 .btn-default:hover{ border-color:#CBD1D8; color:var(--ink); } .lasso-v2 .btn-link{ background:none; border-color:transparent; color:var(--teal-dark); padding:0; box-shadow:none; } .lasso-v2 .btn-link:hover{ text-decoration:underline; } .lasso-v2 .btn-group{ display:inline-flex; gap:6px; vertical-align:middle; } /* Position + shadow. `sticky-top` is on 15 templates INCLUDING the category sub-nav sidebar, which has been asking to stay in view and never did. */ .lasso-v2 .sticky-top{ position:sticky; top:0; z-index:1020; } .lasso-v2 .shadow-sm{ box-shadow:0 1px 2px rgba(20,25,35,.08); } .lasso-v2 .shadow{ box-shadow:var(--card-shadow); } .lasso-v2 .shadow-none{ box-shadow:none; } /* Remaining spacing steps in the 1/3 range that were skipped. */ .lasso-v2 .pl-0,.lasso-v2 .ps-0{ padding-left:0; } .lasso-v2 .pr-0,.lasso-v2 .pe-0{ padding-right:0; } .lasso-v2 .pl-1,.lasso-v2 .ps-1{ padding-left:.25rem; } .lasso-v2 .pr-1,.lasso-v2 .pe-1{ padding-right:.25rem; } .lasso-v2 .pl-3,.lasso-v2 .ps-3{ padding-left:1rem; } .lasso-v2 .pr-3,.lasso-v2 .pe-3{ padding-right:1rem; } .lasso-v2 .py-1{ padding-top:.25rem; padding-bottom:.25rem; } .lasso-v2 .py-2{ padding-top:.5rem; padding-bottom:.5rem; } .lasso-v2 .px-1{ padding-left:.25rem; padding-right:.25rem; } .lasso-v2 .px-2{ padding-left:.5rem; padding-right:.5rem; } /* Bootstrap 5 gutter classes used on a few rows already converted by hand. */ .lasso-v2 .g-2{ gap:.5rem; } .lasso-v2 .g-3{ gap:1rem; } /* Wider modal — 10 templates open a large dialog and got the default width. */ .lasso-v2 .modal-lg{ max-width:800px; } /* ── Second pass: the shared names still unanswered ────────────────────────── Same audit, filtered to classes used by two or more templates so page-local names (which their own page styles) drop out. Public marketing pages are left out of this: they render on a different shell entirely, so a carousel or a site navbar is not this theme's problem. */ /* The extra-large column set skipped exactly the spans people use: 1,2,3,5,7, 9,10,11 were defined and 4, 6, 8 and 12 were not, so a `col-xl-4` shrank to fit its content instead of taking a third. The task board is laid out on it. */ @media (min-width:1200px){ .lasso-v2 .col-xl-4{ flex:0 0 calc(4/12 * (100% + 12px) - 12px); max-width:calc(4/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-6{ flex:0 0 calc(6/12 * (100% + 12px) - 12px); max-width:calc(6/12 * (100% + 12px) - 12px); } .lasso-v2 .col-xl-8{ flex:0 0 calc(8/12 * (100% + 12px) - 12px); max-width:calc(8/12 * (100% + 12px) - 12px); } } .lasso-v2 .col-xl-12{ flex:1 1 100%; max-width:100%; } /* Dropdowns. Only the open/closed switch was defined, so the panel appeared but sat in the page flow unstyled with bare links inside it. NB: the red-strip mega-menu is excluded from both rules. It carries the same Bootstrap classes but is styled by `.lz-dropdown` / `.lz-dropdown-panel` in lasso-theme.css, which loads FIRST — so an unqualified rule here silently wins on equal specificity and undoes it: `position:relative` on the

makes the narrow nav link the panel's containing block (it must stay `static` so the panel can span the page), and the box styles override the panel's own padding, margin and 1120px max-width. Together they collapse a wide multi-column menu into a single narrow column. */ .lasso-v2 .dropdown:not(.lz-dropdown){ position:relative; } .lasso-v2 .dropdown-menu:not(.lz-dropdown-panel){ min-width:180px; padding:6px 0; margin-top:4px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 20px rgba(20,25,35,.12); } .lasso-v2 .dropdown-menu-right{ right:0; left:auto; } .lasso-v2 .dropdown-item{ display:block; width:100%; padding:7px 14px; font-size:13.5px; color:var(--text); text-decoration:none; background:none; border:0; text-align:left; } .lasso-v2 .dropdown-item:hover{ background:#F2F5F8; color:var(--ink); text-decoration:none; } .lasso-v2 .dropdown-toggle{ cursor:pointer; } /* The Actions menu (element/ele_dropdown_buttons) holds buttons, not dropdown-items: one action per row, each filling the panel. app.css states the same rule, but this layout deliberately does not load app.css — so without a copy here `.lasso-v2 .btn`'s inline-flex wins and four full-size actions wrap two-per-row inside the panel. Qualified with .dropdown-menu so it ties the :not(.lz-dropdown-panel) rule above on specificity and wins on order; the bare class alone would lose its padding. */ .lasso-v2 .dropdown-menu.clsDropdownMenuLinks{ min-width:190px; padding:6px; } .lasso-v2 .clsDropdownMenuLinks > .btn{ display:flex; justify-content:center; width:100%; margin:0 0 6px; padding:8px 12px; font-size:13px; } .lasso-v2 .clsDropdownMenuLinks > .btn:last-child{ margin-bottom:0; } /* Contextual borders — used to colour-code a panel by state. */ .lasso-v2 .border-danger{ border-color:var(--brand-red)!important; } .lasso-v2 .border-warning{ border-color:var(--amber)!important; } .lasso-v2 .border-success{ border-color:var(--green)!important; } .lasso-v2 .border-info{ border-color:var(--blue)!important; } .lasso-v2 .border-top{ border-top:1px solid var(--line)!important; } .lasso-v2 .border-bottom{ border-bottom:1px solid var(--line)!important; } .lasso-v2 .border-left,.lasso-v2 .border-start{ border-left:1px solid var(--line)!important; } .lasso-v2 .border-right,.lasso-v2 .border-end{ border-right:1px solid var(--line)!important; } .lasso-v2 .rounded-2{ border-radius:8px!important; } .lasso-v2 .rounded-circle{ border-radius:50%!important; } /* Button variants and the full-width modifier. */ .lasso-v2 .btn-block{ display:flex; width:100%; } .lasso-v2 .btn-lg{ padding:13px 24px; font-size:15px; } .lasso-v2 .btn-light{ background:#F1F3F5; color:var(--text); border-color:var(--line); } .lasso-v2 .btn-light:hover{ background:#E7EAEE; color:var(--ink); } .lasso-v2 .btn-outline-warning{ background:#fff; color:var(--amber); border:1.5px solid var(--amber); } .lasso-v2 .btn-outline-warning:hover{ background:var(--amber); color:#fff; } /* The file-input idiom: a styled button with a transparent file field laid over it. Without the overlay the raw browser file control shows through. */ .lasso-v2 .btn-file{ position:relative; overflow:hidden; display:inline-block; } .lasso-v2 .btn-file input[type="file"]{ position:absolute; top:0; right:0; min-width:100%; min-height:100%; opacity:0; cursor:pointer; display:block; } /* Form helpers. */ .lasso-v2 .form-label{ display:block; font-weight:600; font-size:13px; color:var(--ink); margin-bottom:6px; } .lasso-v2 .form-text{ display:block; font-size:12px; color:var(--muted); margin-top:4px; } .lasso-v2 .form-check{ position:relative; display:block; padding-left:1.5rem; } .lasso-v2 .form-check-input{ position:absolute; left:0; margin-top:.2rem; } .lasso-v2 .form-check-inline{ display:inline-flex; align-items:center; gap:6px; padding-left:0; margin-right:1rem; } .lasso-v2 .form-lh{ line-height:2; } /* List groups — the audience-segment picker is built on these. */ .lasso-v2 .list-group{ display:flex; flex-direction:column; padding-left:0; margin-bottom:0; list-style:none; border-radius:10px; } .lasso-v2 .list-group-item{ position:relative; display:block; padding:10px 14px; background:#fff; border:1px solid var(--line); border-bottom-width:0; color:var(--text); } .lasso-v2 .list-group-item:first-child{ border-top-left-radius:10px; border-top-right-radius:10px; } .lasso-v2 .list-group-item:last-child{ border-bottom-width:1px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; } .lasso-v2 .list-group-item.active{ background:#FEF6F5; border-color:var(--brand-red); color:var(--ink); } /* A tall modal body needs its own scroll, or the dialog runs off the screen. */ .lasso-v2 .modal-dialog-scrollable{ max-height:calc(100% - 3.5rem); } .lasso-v2 .modal-dialog-scrollable .modal-content{ max-height:100%; overflow:hidden; } .lasso-v2 .modal-dialog-scrollable .modal-body{ overflow-y:auto; } /* Odds and ends still in use. */ .lasso-v2 .spinner-border-sm{ width:1rem; height:1rem; border-width:.15em; } .lasso-v2 .w-auto{ width:auto!important; } .lasso-v2 .flex-shrink-0{ flex-shrink:0; } .lasso-v2 .fixed-bottom{ position:fixed; right:0; bottom:0; left:0; z-index:1030; } .lasso-v2 .nav-fill > .nav-item{ flex:1 1 auto; text-align:center; } /* Visually hidden but still read aloud — the accessible label on 5 templates. */ .lasso-v2 .sr-only,.lasso-v2 .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (min-width:768px){ .lasso-v2 .d-md-block{ display:block!important; } .lasso-v2 .d-md-none{ display:none!important; } .lasso-v2 .d-md-flex{ display:flex!important; } } /* Remaining spacing steps. */ .lasso-v2 .m-2{ margin:.5rem; } .lasso-v2 .m-3{ margin:1rem; } .lasso-v2 .mx-1{ margin-left:.25rem; margin-right:.25rem; } .lasso-v2 .my-2{ margin-top:.5rem; margin-bottom:.5rem; } .lasso-v2 .my-0{ margin-top:0; margin-bottom:0; } .lasso-v2 .py-0{ padding-top:0; padding-bottom:0; } @media (min-width:576px){ .lasso-v2 .mr-sm-2,.lasso-v2 .me-sm-2{ margin-right:.5rem; } .lasso-v2 .my-sm-0{ margin-top:0; margin-bottom:0; } } /* Bootstrap progress bar (usage cards): supply track + fill (CSS not loaded) */ .lasso-v2 .progress{ background:var(--bg); border-radius:6px; overflow:hidden; } .lasso-v2 .progress-bar{ height:100%; } /* responsive display (Bootstrap-4 lg breakpoint = 992px) */ @media (min-width:992px){ .lasso-v2 .d-lg-none{ display:none !important; } .lasso-v2 .d-lg-block{ display:block !important; } .lasso-v2 .d-lg-flex{ display:flex !important; } } @media (max-width:991.98px){ .lasso-v2 .d-lg-block,.lasso-v2 .d-lg-flex{ display:none; } /* shown only ≥lg */ } /* 6 ── COLLAPSE / NAVBAR SHIM (Bootstrap JS toggles `.show`) ──────────────── */ .lasso-v2 .collapse:not(.show){ display:none; } @media (min-width:992px){ /* desktop nav is always visible via d-lg-flex (…!important above wins over :not(.show)) */ .lasso-v2 .navbar-collapse.d-lg-flex{ display:flex !important; } } .lasso-v2 .navbar-collapse{ flex-basis:100%; flex-grow:1; align-items:center; } @media (max-width:991.98px){ /* Mobile: BS4 collapse JS opens #mobileNav by adding `.show`, but the element also carries `d-lg-flex`, whose ≤lg rule (display:none) otherwise keeps it hidden — so the hamburger looked dead. Re-reveal the opened nav below lg. Specificity (4 classes) + !important beats the d-lg-flex display:none. */ .lasso-v2 .navbar-collapse.collapse.show{ display:block !important; } } /* Dropdowns: Bootstrap CSS (which hides .dropdown-menu until its JS adds .show) is not loaded — without this the admin mega-menu panels all render expanded. BS4 dropdown JS + Popper toggle `.show` and position the open panel inline. */ .lasso-v2 .dropdown-menu{ position:absolute; z-index:1000; display:none; } .lasso-v2 .dropdown-menu.show{ display:block; } /* Bootstrap's `.nav-link` base — `display:block` plus no underline — is part of the same missing stylesheet. Without it a tab strip built on a container the theme doesn't name (`.meta-tabs`, not `.nav-tabs`/`.nav-pills`) renders as inline underlined anchors: the 9px/16px padding the page sets cannot lay out against an inline box, and the active tab's bottom border sits on the text rather than under the tab. Deliberately bare, so any custom tab container gets it; `.lz-partner .navbar-nav .nav-link` re-sets its own padding after this and is unaffected. */ .lasso-v2 .nav-link{ display:block; text-decoration:none; } .lasso-v2 .nav-link:hover, .lasso-v2 .nav-link:focus{ text-decoration:none; } /* Tabs: the same story as the dropdowns above. `.tab-pane` is hidden by Bootstrap CSS, not by the tab JS — the JS only moves `.show`/`.active` between panes. With Bootstrap CSS absent nothing hides the inactive ones, so every pane rendered at once and the tab strip above them degraded into a row of plain links over a wall of stacked content. Reported on /hnc-orders/campaign-validation/{id}?partner=meta, whose panes are `.tab-content.meta-tabpane > .tab-pane` and whose hand-rolled activate() (meta_tab.php) toggles exactly these two classes. 22 templates use .tab-content, so this is a shared shim, not a page fix. Scoped `.tab-content > .tab-pane` rather than a bare `.tab-pane` so a nested sub-tab set (.meta-subpane) only answers to its own container. */ .lasso-v2 .tab-content > .tab-pane{ display:none; } .lasso-v2 .tab-content > .tab-pane.active{ display:block; } /* `.fade` without Bootstrap is inert, so a pane that never gains `.show` would sit at full opacity anyway; defining both halves keeps the transition the markup already asks for instead of snapping. */ .lasso-v2 .tab-content > .tab-pane.fade{ opacity:0; transition:opacity .15s linear; } .lasso-v2 .tab-content > .tab-pane.fade.show{ opacity:1; } /* dev_header (LOGS / timestamp — admin only, right of the red strip) emits Bootstrap `navbar-nav flex-row`, which the clean layout doesn't style, so its

had "Call Summary", "Call Transcription" and "Remarks" labels hanging off the bottom-left of undersized boxes. Restore the stacked label -> full-width field rhythm the legacy stack gave these forms. Element-scoped so button/anchor .form-control (the Search button above) is untouched. */ .lasso-v2 .formDiv input.form-control, .lasso-v2 .formDiv select.form-control, .lasso-v2 .formDiv textarea.form-control{ display:block; width:100%; max-width:100%; } /* ...but NOT when the field is inside an input-group. The shim above is `width:100%` at specificity (0,3,1), which outranks the generic input-group rule in lasso-theme.css (0,3,0) — so the field ate the whole row and pushed its own addons onto separate lines. That is what stacked the index, the field and the character count vertically on the category Headlines and Descriptions pages, both of which sit inside a `.formDiv`. Listed with `.formDiv` first so this outranks the shim rather than merely tying with it. */ .lasso-v2 .formDiv .input-group > input.form-control, .lasso-v2 .formDiv .input-group > select.form-control, .lasso-v2 .formDiv .input-group > textarea.form-control, .lasso-v2 .input-group > input.form-control, .lasso-v2 .input-group > select.form-control, .lasso-v2 .input-group > textarea.form-control{ display:block; flex:1 1 auto; width:1%; max-width:none; min-width:0; } .lasso-v2 .formDiv .input > label{ display:block; font-weight:600; font-size:13px; color:var(--ink); margin-bottom:6px; } .lasso-v2 .formDiv .input{ margin-bottom:10px; } /* Same treatment keyed off the field wrapper instead of the page wrapper. Not every legacy form remembered the `.formDiv` div — /hibus/edit is the worst case, a ~60-field form with none of it, where every control fell back to the browser's intrinsic size and the page read as scattered boxes. `div.input` is what $this->Form->control() emits for a stacked field on EVERY legacy form, so it reaches them whether or not the page wrapper is there. Scoped to the direct child so `.input-group` / `.input-date-select` are untouched. */ .lasso-v2 .input > input.form-control, .lasso-v2 .input > select.form-control, .lasso-v2 .input > textarea.form-control{ display:block; width:100%; max-width:100%; } .lasso-v2 .input > label{ display:block; font-weight:600; font-size:13px; color:var(--ink); margin-bottom:6px; } /* ...except when that wrapper is itself a toolbar. The stacked rhythm above is the right default for a form field, and the wrong one for a row of controls meant to read as a sentence. The month picker shared by every report (ele_month_quicklinks) wraps its label, field and Submit in `div.input.select.form-inline`, so the field took the full row and put "Month:" above it and Submit below — three stacked lines where one was intended. Listed after and one class heavier than the `.input >` rules so it outranks them rather than tying, the same reason the `.input-group` exception above is written this way. */ .lasso-v2 .input.form-inline > input.form-control, .lasso-v2 .input.form-inline > select.form-control, .lasso-v2 .input.form-inline > .custom-select{ display:inline-block; width:auto; max-width:none; vertical-align:middle; } .lasso-v2 .input.form-inline > label{ display:inline-flex; align-items:center; width:auto; margin-bottom:0; margin-right:6px; } /* ...except when a small info icon follows the label. The icon is part of the label — the legacy markup emits `Rate