File size: 3,620 Bytes
2183dbe | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | /* wave 41 lane stylesheet: map. Kept separate so no lane edits index.css.
Tokens live in index.css :root and customer-grid/theme.ts -- declare there, consume here. */
/* SELECTED PIN (wave 41 item 18): deliberately NO rule here, and that is the point of this note.
Every pin colour on the map is painted from customer-grid/MapView.tsx as an SVG PRESENTATION
ATTRIBUTE (SERIES, DEFAULT_PIN, OVERFLOW, and now LP_MAP_SELECTED), so the selected fill and
ring live in TS beside their siblings instead of being split across two seams.
Two reasons not to move any of that here:
1. Any CSS declaration outranks a presentation attribute, so a `fill:` or `stroke:` rule added
to this file would SILENTLY WIN over the TS value. The constant would go dead, the pin would
still paint, and nothing would look wrong in a diff.
2. This file is scanned by neither gate: verify_icons.py reads a hardcoded STYLESHEETS list of
five files that does not include it, and verify_map.py's css_scan reads
customer-grid/map.css, a different file. A rule placed here is unverified by both.
To change the selected pin colour, change theme.ts::LP_MAP_SELECTED and its --lp-map-selected
mirror in index.css :root, which is the pair verify_icons.py::token_parity actually compares.
The .cg-map-pin.is-selected { paint-order: stroke } rule stays in index.css and is what makes
the ring paint OUTSIDE the fill disc rather than straddling its edge. */
/* ROUTE FOOT ROW (wave 41 item 19 / R13): THREE BUTTONS NOW, NOT TWO.
`Update calculation` joins `Save route` / `Update route` and `Clear route` in .cg-route-foot,
so the row that was built for a pair has to carry a trio without any of them changing shape.
index.css gives every button in that row `flex: 1 1 0`, which is equal thirds: inside a 360px
panel that is roughly 109px each, and only one of the three labels needs more than that. The
result would be a middle button wrapped onto two lines between two single-line neighbours,
which is a new control shape by accident (DESIGN.md §4 authorises none). `flex-basis: auto`
sizes each button from its own label and still shares the leftover width, so the three read as
siblings. `nowrap` keeps a label whole and `flex-wrap` is what pays for it: on a narrowed panel
the ROW breaks between whole buttons instead of squeezing every label past reading width.
⚠ SPECIFICITY, NOT ORDER, AND THE DIFFERENCE IS LOAD-BEARING HERE. This file is @imported near
the TOP of index.css, so its rules sit BEFORE the .cg-route-foot rules in the cascade and an
equal-specificity selector would lose every tie to them. The .cg-route-popover prefix wins
outright whatever the order. The second selector below exists for the same reason and not as a
duplicate: `.cg-route-popover .cg-btn.cg-route-cta` already sets `white-space: normal` at three
classes, which is exactly the weight of the first selector here, so only a four-class selector
can answer it. Clear route and Update calculation both carry that class.
⚠ UNGATED, SAID OUT LOUD. Per this file's own note above, neither verify_icons.py nor
verify_map.py::css_scan reads this stylesheet, and verify_map.py's `css route-foot-is-a-row`
leg reads src/index.css by name. Nothing reds if these two rules are deleted; the foot row
simply goes back to equal thirds with one wrapped label. */
.cg-route-popover .cg-route-foot {
flex-wrap: wrap;
}
.cg-route-popover .cg-route-foot .cg-btn,
.cg-route-popover .cg-route-foot .cg-btn.cg-route-cta {
flex: 1 1 auto;
white-space: nowrap;
}
|