pdf-button.mjs
12 lines · kit/pdf-button.mjs at 1482e84
1const escape = (text) => String(text).replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
3const ICON = '<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 1.5h4l2.5 2.5v6.5h-6.5z"/><path d="M7 1.5V4h2.5"/><path d="M6.25 5.5v3.2M4.9 7.4l1.35 1.35L7.6 7.4"/></svg>';
5export const PDF_BUTTON_CSS = `.iso-plate-pdf{position:absolute;top:12px;right:13px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:6px;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10px;line-height:1;letter-spacing:.08em;text-decoration:none;transition:color .2s var(--anatomy-ease),background-color .2s var(--anatomy-ease)}
6.iso-plate-pdf:hover,.iso-plate-pdf:focus-visible{color:var(--anatomy-strong);background:color-mix(in srgb,var(--anatomy-text) 14%,transparent);outline:none}
7.iso-plate-pdf svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
8.iso-plate:has(.iso-plate-pdf) .iso-plate-corner[data-corner="title"]{right:52px}`;
10export function pdfButton(href, label = "Open the printable PDF") {
11 return `<style>${PDF_BUTTON_CSS}</style><a class="iso-plate-pdf" href="${escape(href)}" target="_blank" rel="noopener" aria-label="${escape(label)}">${ICON}PDF</a>`;
12}