feat: add [data-demo] attribute, purge all inline CSS from docs
New data-demo attribute for demo blocks in documentation. Replaced 16 files worth of inline style="" wrappers with <div data-demo>. Only remaining style= is charts --size data injection (legitimate). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
414ede2957
commit
fe8ddd6153
17 changed files with 32 additions and 20 deletions
|
|
@ -14,7 +14,7 @@ ai-provider: "Anthropic"
|
|||
|
||||
## Inline Demo
|
||||
|
||||
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
|
||||
<div data-demo>
|
||||
<button>Primary</button>
|
||||
<button data-variant="secondary">Secondary</button>
|
||||
<button data-variant="danger">Danger</button>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Add `data-callout="<type>"` to any block element to style it as a callout. Four
|
|||
|
||||
## Inline Demo
|
||||
|
||||
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:1rem">
|
||||
<div data-demo>
|
||||
<div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
|
||||
<div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
|
||||
<div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ ASW styles the native `<dialog>` element — no JavaScript modal libraries requi
|
|||
|
||||
## Inline Demo
|
||||
|
||||
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
|
||||
<div data-demo>
|
||||
<button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
|
||||
<dialog id="demo-dialog">
|
||||
<article>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ All standard form elements are styled out of the box. Labels, inputs, selects, a
|
|||
|
||||
## Inline Demo
|
||||
|
||||
<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
|
||||
<form style="display:flex;flex-direction:column;gap:1rem;max-width:28rem" onsubmit="return false">
|
||||
<div data-demo>
|
||||
<form onsubmit="return false">
|
||||
<label>
|
||||
Name
|
||||
<input type="text" placeholder="Jane Smith">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue