Skip to main navigation Skip to main content Skip to page footer

KKS-27 — Download listing

The default File Links element (uploads_type = 0) now renders as the Figma download link. Measured off two nodes that turn out to be the same component: 281-12208 on the Kostenkalkulation page (the long two-line case Kostas pinned as »Download Link«) and 281-11337 in the Vertragsgestaltung panel.

PropertyValue
fontFigtree 700, 18px, line-height 150 %, letter-spacing 0
decorationunderline, solid, offset 0, thickness 0, skip-ink true
arrow14×12, 15px after the label, rotated to point down
colourfollows the frame — see below

Two checks that those numbers are the real ones: 18 × 1.5 = 27, the short node’s height; 2 × 27 = 54, the long node’s, so it wraps to exactly two lines.

Nothing new was drawn. The arrow is KKS-17’s list-arrow-kks (14×12 — Figma reports 13×12, which is the group bounding box of the same artwork) rotated 90°, and the light/dark switch reuses the --sitepack-link-arrow-icon custom property that _btn-arrow.scss already defines for .link-arrow. Restyling the default type means no mask.json, no TCA and no schema diff.

Measure it:

var a = document.querySelector('.filelink-list.type-0 .filelink-heading > a');
var s = getComputedStyle(a), b = getComputedStyle(a, '::after');
[s.fontSize, s.fontWeight, s.lineHeight, s.textDecorationLine, s.color, b.width, b.height, b.transform].join(' | ');
// expect "18px | 700 | 27px | underline | rgb(25, 46, 95) | 14px | 12px | matrix(0, 1, -1, 0, 0, 0)"

What to look at

The three listings above are the same element on three different frames. The link and its arrow should be navy on the white one and white on the navy and gradient ones — that is the whole point of the colour finding: Figma shows this component in #192E5F on the Kostenkalkulation page and in #FFFFFF inside the Vertragsgestaltung panel, so it reads --frame-link-color rather than hardcoding a token.

The first listing carries a deliberately over-long title so the two-line wrap from node 281-12208 can be checked — the arrow must stay with the label rather than being orphaned on a line of its own.

One deliberate deviation. Figma’s row is a fixed 1080px flex row, so on the long case the arrow sits at the far right of the row. Here it sits 15px after the last word instead. In both Figma instances the text happens to fill its column (1052 of 1080; 373 of a 373 column), so those are the same pixel there — they only diverge for a short filename in a wide column, where the Figma arrangement would strand the arrow about 1000px from its label.

⚠️ The files are JPEGs on purpose. There is not a single pdf/doc/xls/zip in sys_file on either database, and putting real documents on Mittwald needs SSH access this work did not have. Each reference carries a realistic document title instead, which is what the template renders. The styling is what is under review, and a title is a title whatever the bytes behind it are.

Regression — type 1, the icon-font variant

Regression — type 2, preview plus Download button

Datenschutz Einstellungen
KKSN KKSN