/* * SHIPPED BY T23. This file is `docs/use-case-rollout/walk/2026-09-18/mock/design-walk/r2-add-asset-page.css` * as signed off, rule for rule and in its order, WITHOUT the section "OPTION B: the box as a sheet of rows" * (`.ftd-r2-rows`, `.ftd-r2-rowfull`, `.ftd-r2-help`: option B is not signed off and does not ship), followed by TWO * added sections at the foot, "THE BRIDGE" and "THE COLUMN IS A CARD-WIDTH CONTAINER" (DEFECTS F19), neither of * which declares a look of its own. It is linked once, site-wide, straight * after `film-tv-dashboard.css` (`resources/views/layouts/app.blade.php`), because the two central form components * it places (`AssetInfoSection.vue`, `StepCommonInfoBlock.vue`) are mounted on many pages. ADDITIVE ONLY: every * selector here starts `.ftd-r2-` or sits under `.ftd`, so nothing outside the redesign can move. * * THE FORM-HEADING RULE below (`.ftd .ftd-r2-cols .ftd-sec__title, .ftd .ftd-r2-simple .ftd-sec__title`) is this * page's own copy of a rule that belongs ONCE in the merged sheet's FOUNDATION section (the prerequisite's point 3). * It is raised as a build question in `throughput/notes/T23.md`; this copy goes when the sheet carries it. */ /* * R2. THE ADD ASSET PAGE, REDRAWN. Layout only. Every class is `ftd-` and lives under `.ftd`. * Colour comes only from the --ftd-* variables the approved sheet and foundation.css declare; not one is written here. * Every width rule is a container query on `ftd` (the approved sheet's own container), never a screen width. * * NO LONGER A TRAP: the approved sheet's margin reset on p, h4, dl, dt, dd used to carry specificity 0,1,1, so any * margin on one of those had to be written here as `.ftd .ftd-r2-...` to outrank it. The merged sheet's reset is now * `:where(.ftd) :where(h4, dl, dt, dd, p)` at 0,0,0 and cancels nothing. The `.ftd `-prefixed selectors below are * harmless and stay exactly as signed off. */ /* ---------------------------------------------------------------- the page: two columns, the right one narrower. Today's Add Asset is col-xl-6 / col-xl-6, but the right column holds only the upload, Usage and Advanced, so an even split leaves the left column's fields cramped and the right one half empty. The tracks below keep today's PLACES (left = the record, right = the image and the switches) and give the reading column the room. */ .ftd-r2-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .ftd-r2-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; } @container ftd (max-width: 900px) { .ftd-r2-cols { grid-template-columns: minmax(0, 1fr); } } /* a box in this page is never flush against the next one: 16px between, 16px inside (the boxed section's own padding) */ .ftd-r2-col > .ftd-sec { margin-bottom: 0; } /* ---------------------------------------------------------------- A HEADING IS NOT A LABEL THE REASON THE LAST ROUND FAILED: a section heading and a field label were the same small capitals, so "DESCRIPTION" sat over "DESCRIPTION" and nothing said which was the group and which was the field. The foundation draws the section title at 12.5px uppercase and a field label at 11px uppercase: a pixel and a half apart, both shouting. Here the box's heading takes TODAY'S OWN GRAMMAR, which screenshot 39 shows and which nobody ever complained about: sentence case, 14px, weight 600, full ink. The field label stays small, quiet, uppercase. They can no longer be mistaken for each other at any distance, and the page keeps one heading grammar with the approved card head. */ .ftd .ftd-r2-cols .ftd-sec__title, .ftd .ftd-r2-simple .ftd-sec__title { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ftd-ink); } /* ---------------------------------------------------------------- ONE FIELD, NO REPEATED LABEL Where a box holds one field whose label only repeats the box's heading (Department / Department, Supplier / Supplier), the heading is drawn once and the control sits under it on its own. This is the class that box's body wears, so the control keeps the same left edge as a labelled field elsewhere on the page. Such a box has one 32px control in it, so it does NOT need a full box of body around it: the padding drops to the 16px it needs and no more, or two dropdowns cost the top of the column two hundred pixels of white (which is the wasted space he objected to in today's boxes, not the grouping). */ .ftd-r2-solo { max-width: 460px; } .ftd-sec--boxed > .ftd-sec__body > .ftd-r2-solo:only-child { margin-bottom: 0; } .ftd .ftd-r2-cols .ftd-sec__body:has(> .ftd-r2-solo:only-child), .ftd .ftd-r2-simple .ftd-sec__body:has(> .ftd-r2-solo:only-child) { padding: 12px 16px; } /* the approved .ftd-field carries 14px under it for the next field. The LAST field in a box has no next field, and that 14px was drawn as a band of empty box under a lone control, which is exactly the wasted space he objects to. */ .ftd-sec--boxed > .ftd-sec__body > .ftd-field:last-child { margin-bottom: 0; } .ftd-sec--boxed > .ftd-sec__body > .ftd-field:last-child > .ftd-field__help:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------- THE FIELD GRID inside a box Two tracks that every box on the page shares, so labels and controls line up down the whole column. */ .ftd-r2-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; } .ftd-r2-fields > .ftd-field { margin-bottom: 0; } .ftd-r2-wide { grid-column: 1 / -1; } @container ftd (max-width: 1080px) { .ftd-r2-fields { grid-template-columns: minmax(0, 1fr); } } /* a tick box has no control box of its own, so on a row of its own it keeps the same height as a field beside it rather than sitting hard against the control above */ .ftd-r2-fields > .ftd-field > .ftd-checks { min-height: 32px; } /* the money block: four tracks of numbers, which is how Quantity & Costs reads as one table rather than nine boxes */ .ftd-r2-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; } .ftd-r2-money > .ftd-field { margin-bottom: 0; } @container ftd (max-width: 1080px) { .ftd-r2-money { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container ftd (max-width: 620px) { .ftd-r2-money { grid-template-columns: minmax(0, 1fr); } } /* a number in this form is entered, not read in a column, so it keeps the control's own width rather than the foundation's 150px cap: a "Gross Total" box half the width of the box above it reads as a mistake */ .ftd .ftd-r2-money .ftd-input--num, .ftd .ftd-r2-fields .ftd-input--num { max-width: none; } /* ---------------------------------------------------------------- THE USAGE BOX: four three-state choices Each one is its own row: the group's name, then its tiles under it (foundation F2 puts the heading above). The rows are divided by a hairline so four groups of tiles do not read as sixteen loose buttons. */ .ftd-r2-usage { display: flex; flex-direction: column; gap: 12px; } .ftd-r2-usage > * + * { padding-top: 12px; border-top: 1px solid var(--ftd-hairline); } .ftd .ftd-r2-usage__label { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ftd-label); } /* ---------------------------------------------------------------- THE FOOTER: Create and Cancel, at the right */ .ftd-r2-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--ftd-control-line); border-radius: 8px; background: var(--ftd-inset); } /* ---------------------------------------------------------------- the simple tabs (Bulk Photo Upload, Image Matching) */ .ftd-r2-simple { display: flex; flex-direction: column; gap: 16px; } .ftd-r2-simple > .ftd-sec { margin-bottom: 0; } .ftd-r2-simple > .ftd-alert { margin-bottom: 0; } /* a tab pane that is not the chosen one is not drawn at all (today every pane is `lazy`, one in the DOM at a time) */ .ftd-r2-pane[hidden] { display: none; } /* QUANTITY & COSTS, grouped (Tristian, 2026-09-19: "the costs are all over the place ... they should be grouped by Net/Gross/Tax and not all bundled together"). Currency, Quantity and Tax Rate lead; then three groups read left to right as the sum does: Net, Tax, Gross, each holding its per-unit figure over its total. Every field keeps today's label. */ .ftd .ftd-r2-costs__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; } .ftd .ftd-r2-costs__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 6px; } .ftd .ftd-r2-costgroup { min-width: 0; margin: 0; padding: 10px 12px 2px; border: 1px solid var(--ftd-line); border-radius: 6px; background: var(--ftd-inset); } .ftd .ftd-r2-costgroup > legend { padding: 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ftd-ink); } .ftd .ftd-r2-costgroup .ftd-input--num { max-width: none; } @container ftd (max-width: 560px) { .ftd .ftd-r2-costs__top, .ftd .ftd-r2-costs__groups { grid-template-columns: minmax(0, 1fr); } } .ftd .ftd-r2-costs__top .ftd-input--num { max-width: none; } /* ================================================================ THE BRIDGE (T23; not in the reference file) IT DECLARES NO LOOK OF ITS OWN. The reference draws a picker as `