js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve table styles; fixes #953 (#961)

Browse Source
This commit is contained in:
Cory LaViska
2025-05-21 13:32:34 -04:00
committed by GitHub
parent 2182d3c692
commit 1f2ebf5e7a
2 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/_layouts/component.njk
View File

@@ -19,7 +19,7 @@
<h2>Slots</h2>
<p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
<div class="table-scroll">
<wa-scroller>
<table class="component-table">
<thead>
<tr>
@@ -42,7 +42,7 @@
{% endfor %}
</tbody>
</table>
</div>
</wa-scroller>
{% endif %}
{# Properties #}
@@ -50,13 +50,13 @@
<h2>Attributes & Properties</h2>
<p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
<div class="table-scroll">
<wa-scroller>
<table class="component-table">
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-reflects">Reflects</th>
<th class="table-reflect">Reflects</th>
</tr>
</thead>
<tbody>
@@ -77,7 +77,7 @@
<div><small><strong>Default</strong>&nbsp;<code>{{ prop.default | inlineMarkdown | safe }}</code></small></div>
{% endif %}
</td>
<td class="table-checkmark">
<td class="table-reflect">
{% if prop.reflects %}
<wa-icon name="check"></wa-icon>
{% endif %}
@@ -89,7 +89,7 @@
{% endfor %}
</tbody>
</table>
</div>
</wa-scroller>
{% endif %}
{# Methods #}
@@ -97,7 +97,7 @@
<h2>Methods</h2>
<p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
<div class="table-scroll">
<wa-scroller>
<table class="component-table">
<thead>
<tr>
@@ -124,7 +124,7 @@
{% endfor %}
</tbody>
</table>
</div>
</wa-scroller>
{% endif %}
{# Events #}
@@ -132,7 +132,7 @@
<h2>Events</h2>
<p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
<div class="table-scroll">
<wa-scroller>
<table class="component-table">
<thead>
<tr>
@@ -151,7 +151,7 @@
{% endfor %}
</tbody>
</table>
</div>
</wa-scroller>
{% endif %}
{# Custom Properties #}
@@ -159,7 +159,7 @@
<h2>CSS custom properties</h2>
<p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
<div class="table-scroll">
<wa-scroller>
<table class="component-table">
<thead>
<tr>
@@ -183,7 +183,7 @@
{% endfor %}
</tbody>
</table>
</div>
</wa-scroller>
{% endif %}
{# Custom States #}
@@ -191,7 +191,7 @@
<h2>Custom States</h2>
<p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
<div class="table-scroll">
<wa-scroller>
<table class="component-table">
<thead>
<tr>
@@ -210,7 +210,7 @@
{% endfor %}
</tbody>
</table>
</div>
</wa-scroller>
{% endif %}
{# CSS Parts #}
@@ -218,7 +218,7 @@
<h2>CSS parts</h2>
<p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
<div class="table-scroll">
<wa-scroller>
<table class="component-table">
<thead>
<tr>
@@ -235,7 +235,7 @@
{% endfor %}
</tbody>
</table>
</div>
</wa-scroller>
{% endif %}
{# Dependencies #}

25
docs/assets/styles/docs.css
View File

@@ -717,13 +717,28 @@ table.colors {
gap: 1rem;
}
.component-table td > * + * {
margin-block-start: var(--wa-space-s);
/* Component API tables */
wa-scroller:has(.component-table) {
margin-block-end: var(--wa-space-xl);
}
.table-scroll {
overflow-x: auto;
margin-block-end: var(--wa-flow-spacing);
.component-table {
.table-name {
white-space: nowrap;
}
.table-arguments,
.table-description {
min-width: 40ch;
}
.table-reflect {
text-align: center;
}
code {
white-space: inherit;
}
}
/** desktop */