mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
b96c3f318b
* move print styles * begin native styles split * unsplit button styles 😓 * unsplit callout; remove .wa-callout * merge forms * remove unused * remove unused * unsplit checkbox * remove old astro config * remove overflow * unsplit slider * fix tooltip position in RTL * unsplit radio * move required light DOM styles to <wa-page> * remove unused file * remove unused import * remove * goodbye * fix examples * unsplit dialog * unsplit select * remove select * unsplit input * unsplit details * update * update comment * update textarea * combine native docs; improvements * update * reorg and fix headings * fix details summary padding; fixes #684 * update * fix native details summary padding; fixes #684 * #684 * remove passthrough style nonsense * it's CSS not JS * fix details in sidebar * add spacing in native buttons for icons * whitespace * update docs * remove button group util * remove shadow folder, add component folder * layerize * default border radius * remove color contrast script from dist * add term * layerize themes + color folders * reorder * remove radio button; #504 * remove visual tests * remove visual tests * remove unused stylesheet * make search smarter * add radio styles * Fix filled textareas * re-introduce visual tests (with adjustments) * fix button appearances * fix textarea focus styles * re-introduce appearance classes * remove 'native styles' note from component pages * fix checked radio styles * touch up callout styles * remove errant `.wa-tag` * scope appearance classes to relevant elements * more visual test cases * fix details borders * minor visual tests reorg * add `--box-shadow` to buttons * fix Awesome theme * use same layer for all themes (allows unset properties to inherit from Default theme) * fix box-shadow in wa-textarea * set button box shadow to `initial` * fix Active theme * fix Brutalist theme * fix Glossy theme * fix Matter theme (mostly) * fix Playful theme * fix Premium theme * fix Shoelac theme * fix Tailspin theme * fix custom radio button styles * fix links to native styles doc --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
606 lines
17 KiB
Plaintext
606 lines
17 KiB
Plaintext
<h3>Button</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-button></code></th>
|
|
<th><code><button></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-button>Button</wa-button>
|
|
</td>
|
|
<td>
|
|
<button>Button</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>accent</code> + <code>outlined</code></th>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
|
|
<wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
|
|
<wa-button variant="success" appearance="accent outlined">Success</wa-button>
|
|
<wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
|
|
<wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<button class="wa-brand wa-accent wa-outlined">Brand</button>
|
|
<button class="wa-neutral wa-accent wa-outlined">Neutral</button>
|
|
<button class="wa-success wa-accent wa-outlined">Success</button>
|
|
<button class="wa-warning wa-accent wa-outlined">Warning</button>
|
|
<button class="wa-danger wa-accent wa-outlined">Danger</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>accent</code></th>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<wa-button variant="brand" appearance="accent">Brand</wa-button>
|
|
<wa-button variant="neutral" appearance="accent">Neutral</wa-button>
|
|
<wa-button variant="success" appearance="accent">Success</wa-button>
|
|
<wa-button variant="warning" appearance="accent">Warning</wa-button>
|
|
<wa-button variant="danger" appearance="accent">Danger</wa-button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<button class="wa-brand wa-accent">Brand</button>
|
|
<button class="wa-neutral wa-accent">Neutral</button>
|
|
<button class="wa-success wa-accent">Success</button>
|
|
<button class="wa-warning wa-accent">Warning</button>
|
|
<button class="wa-danger wa-accent">Danger</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>filled</code> + <code>outlined</code></th>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
|
|
<wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
|
|
<wa-button variant="success" appearance="filled outlined">Success</wa-button>
|
|
<wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
|
|
<wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<button class="wa-brand wa-filled wa-outlined">Brand</button>
|
|
<button class="wa-neutral wa-filled wa-outlined">Neutral</button>
|
|
<button class="wa-success wa-filled wa-outlined">Success</button>
|
|
<button class="wa-warning wa-filled wa-outlined">Warning</button>
|
|
<button class="wa-danger wa-filled wa-outlined">Danger</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>filled</code></th>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<wa-button variant="brand" appearance="filled">Brand</wa-button>
|
|
<wa-button variant="neutral" appearance="filled">Neutral</wa-button>
|
|
<wa-button variant="success" appearance="filled">Success</wa-button>
|
|
<wa-button variant="warning" appearance="filled">Warning</wa-button>
|
|
<wa-button variant="danger" appearance="filled">Danger</wa-button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<button class="wa-brand wa-filled">Brand</button>
|
|
<button class="wa-neutral wa-filled">Neutral</button>
|
|
<button class="wa-success wa-filled">Success</button>
|
|
<button class="wa-warning wa-filled">Warning</button>
|
|
<button class="wa-danger wa-filled">Danger</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>outlined</code></th>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<wa-button variant="brand" appearance="outlined">Brand</wa-button>
|
|
<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
|
|
<wa-button variant="success" appearance="outlined">Success</wa-button>
|
|
<wa-button variant="warning" appearance="outlined">Warning</wa-button>
|
|
<wa-button variant="danger" appearance="outlined">Danger</wa-button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<button class="wa-brand wa-outlined">Brand</button>
|
|
<button class="wa-neutral wa-outlined">Neutral</button>
|
|
<button class="wa-success wa-outlined">Success</button>
|
|
<button class="wa-warning wa-outlined">Warning</button>
|
|
<button class="wa-danger wa-outlined">Danger</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>plain</code></th>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<wa-button variant="brand" appearance="plain">Brand</wa-button>
|
|
<wa-button variant="neutral" appearance="plain">Neutral</wa-button>
|
|
<wa-button variant="success" appearance="plain">Success</wa-button>
|
|
<wa-button variant="warning" appearance="plain">Warning</wa-button>
|
|
<wa-button variant="danger" appearance="plain">Danger</wa-button>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="wa-cluster wa-gap-2xs">
|
|
<button class="wa-brand wa-plain">Brand</button>
|
|
<button class="wa-neutral wa-plain">Neutral</button>
|
|
<button class="wa-success wa-plain">Success</button>
|
|
<button class="wa-warning wa-plain">Warning</button>
|
|
<button class="wa-danger wa-plain">Danger</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>small</code></th>
|
|
<td>
|
|
<wa-button size="small">Small</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-size-s">Small</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>medium</code></th>
|
|
<td>
|
|
<wa-button size="medium">Medium</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-size-m">Medium</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>large</code></th>
|
|
<td>
|
|
<wa-button size="large">Large</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-size-l">Large</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>pill</code></th>
|
|
<td>
|
|
<wa-button pill>Pill</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-pill">Pill</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Checkbox</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-checkbox></code></th>
|
|
<th><code><input type="checkbox"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-checkbox>Checkbox</wa-checkbox>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox"></input> Checkbox</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>checked</code></th>
|
|
<td>
|
|
<wa-checkbox checked>Checkbox</wa-checkbox>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox" checked></input> Checkbox</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Color Picker</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-color-picker></code></th>
|
|
<th><code><input type="color"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-color-picker label="Color Picker" value="#ffa07a"></wa-color-picker>
|
|
</td>
|
|
<td>
|
|
<label>Color Picker <input type="color" value="#ffa07a"></input></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Details</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-details></code></th>
|
|
<th><code><details></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-details summary="Summary">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</wa-details>
|
|
</td>
|
|
<td>
|
|
<details>
|
|
<summary>Summary</summary>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</details>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>dir="rtl"</code></th>
|
|
<td>
|
|
<wa-details summary="تبديلني" lang="ar" dir="rtl">
|
|
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
|
|
</wa-details>
|
|
</td>
|
|
<td>
|
|
<details lang="ar" dir="rtl">
|
|
<summary>تبديلني</summary>
|
|
<p>استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن</p>
|
|
</details>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Input</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-input></code></th>
|
|
<th><code><input></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-input label="Input" placeholder="Placeholder"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>type="password"</code></th>
|
|
<td>
|
|
<wa-input label="Input (password)" type="password"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (password) <input type="password"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>type="date"</code></th>
|
|
<td>
|
|
<wa-input label="Input (date)" type="date"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (date) <input type="date"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>type="time"</code></th>
|
|
<td>
|
|
<wa-input label="Input (time)" type="time"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (time) <input type="time"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>filled</code></th>
|
|
<td>
|
|
<wa-input label="Input (filled)" placeholder="Placeholder" appearance="filled"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (filled) <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>small</code></th>
|
|
<td>
|
|
<wa-input label="Input (small)" placeholder="Placeholder" size="small"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-s">Input (small) <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>medium</code></th>
|
|
<td>
|
|
<wa-input label="Input (medium)" placeholder="Placeholder" size="medium"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-m">Input (medium) <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>large</code></th>
|
|
<td>
|
|
<wa-input label="Input (large)" placeholder="Placeholder" size="large"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-l">Input (large) <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Progress Bar</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-progress-bar></code></th>
|
|
<th><code><progress></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-progress-bar value="50" max="100"></wa-progress-bar>
|
|
</td>
|
|
<td>
|
|
<progress value="50" max="100"></progress>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Radio</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-radio></code></th>
|
|
<th><code><input type="radio"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-radio>Radio</wa-radio>
|
|
</td>
|
|
<td>
|
|
<label><input type="radio"></input> Radio</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>checked</code></th>
|
|
<td>
|
|
<wa-radio-group value="1">
|
|
<wa-radio value="1">Radio</wa-radio>
|
|
</wa-radio-group>
|
|
</td>
|
|
<td>
|
|
<label><input type="radio" checked></input> Radio</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Select</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-select></code></th>
|
|
<th><code><select></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-select label="Select" value="1">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label>Select
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>filled</code></th>
|
|
<td>
|
|
<wa-select label="Select (filled)" value="1" appearance="filled">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-filled">Select (filled)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>small</code></th>
|
|
<td>
|
|
<wa-select label="Select (small)" value="1" size="small">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-s">Select (small)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>medium</code></th>
|
|
<td>
|
|
<wa-select label="Select (medium)" value="1" size="medium">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-m">Select (medium)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>large</code></th>
|
|
<td>
|
|
<wa-select label="Select (large)" value="1" size="large">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-l">Select (large)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Slider</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-slider></code></th>
|
|
<th><code><input type="range"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-slider label="Slider"></wa-slider>
|
|
</td>
|
|
<td>
|
|
<label>Slider <input type="range"></input></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Textarea</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-textarea></code></th>
|
|
<th><code><textarea></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-textarea label="Textarea" placeholder="Placeholder" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label>Textarea <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>filled</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (filled)" placeholder="Placeholder" appearance="filled" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label>Textarea (filled) <textarea placeholder="Placeholder" class="wa-filled" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>small</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (small)" placeholder="Placeholder" size="small" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-s">Textarea (small) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>medium</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (medium)" placeholder="Placeholder" size="medium" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-m">Textarea (medium) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>large</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (large)" placeholder="Placeholder" size="large" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-l">Textarea (large) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div> |