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

💅 Docs: Sidebar Visual + UI Polish (#1341)

Browse Source 
* using layout utilities for sidebar heading link styling
* syncing up sidebar heading + general link styles
* updating sidebar heading text + icon alignment
* updating layout of experimental + pro badge decoratives
* increasing visual padding of `#search-trigger`'s `<kbd>`
* fixing `<li>` indentations
This commit is contained in:
Brian Talbot
2025-08-20 17:24:36 -04:00
committed by GitHub
parent 3e3e5276a6
commit 9d82749abb
2 changed files with 58 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
packages/webawesome/docs/_includes/sidebar.njk
View File

@@ -31,16 +31,19 @@
<!-- Components -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/components/" title="Overview">
Components
<a class="wa-cluster wa-gap-xs" href="/docs/components/" title="Overview">
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
Components
</a>
</h2>
<ul>
<li>
<a href="/docs/components/page/">Page</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<span class="wa-split">
<a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</span>
</li>
<li><a href="/docs/components/animated-image/">Animated Image</a></li>
<li><a href="/docs/components/animation/">Animation</a></li>
@@ -57,12 +60,16 @@
<li><a href="/docs/components/callout/">Callout</a></li>
<li><a href="/docs/components/card/">Card</a></li>
<li>
<a href="/docs/components/carousel/">Carousel</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<a class="wa-cluster wa-gap-xs" href="/docs/components/carousel/">
Carousel
<wa-icon name="flask" aria-hidden="true"></wa-icon>
</a>
<ul>
<li>
<a href="/docs/components/carousel-item/">Carousel Item</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<a class="wa-cluster wa-gap-xs" href="/docs/components/carousel-item/">
Carousel Item
<wa-icon name="flask" aria-hidden="true"></wa-icon>
</a>
</li>
</ul>
</li>
@@ -70,8 +77,10 @@
<li><a href="/docs/components/color-picker/">Color Picker</a></li>
<li><a href="/docs/components/comparison/">Comparison</a></li>
<li>
<a href="/docs/components/copy-button/">Copy Button</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
Copy Button
<wa-icon name="flask" aria-hidden="true"></wa-icon>
</a>
</li>
<li><a href="/docs/components/details/">Details</a></li>
<li><a href="/docs/components/dialog/">Dialog</a></li>
@@ -136,9 +145,9 @@
<!-- Style utilities -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/utilities/" title="Overview">
Style Utilities
<a class="wa-cluster wa-gap-xs" href="/docs/utilities/" title="Overview">
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
Style Utilities
</a>
</h2>
<ul>
@@ -154,9 +163,9 @@
<!-- Layout -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/layout/" title="Overview">
Layout
<a class="wa-cluster wa-gap-xs" href="/docs/layout/" title="Overview">
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
Layout
</a>
</h2>
<ul>
@@ -169,9 +178,12 @@
<li><a href="/docs/utilities/split/">Split</a></li>
<li><a href="/docs/utilities/stack/">Stack</a></li>
<li>
<a href="/docs/components/page/">Page</a>
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<span class="wa-split">
<a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</span>
</li>
</ul>
</wa-details>
@@ -179,15 +191,17 @@
<!-- Patterns -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/patterns/" title="Overview">
Patterns
<a class="wa-cluster wa-gap-xs" href="/docs/patterns/" title="Overview">
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
Patterns
</a>
</h2>
<ul>
<li>
<a href="/docs/patterns/app/">App</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<span class="wa-split">
<a href="/docs/patterns/app/">App</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</span>
<ul>
<li>
<a href="/docs/patterns/app/action-panel/">Action Panel</a>
@@ -230,8 +244,10 @@
</ul>
</li>
<li>
<a href="/docs/patterns/blog-news/">Blog &amp; News</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<span class="wa-split">
<a href="/docs/patterns/blog-news/">Blog &amp; News</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</span>
<ul>
<li>
<a href="/docs/patterns/blog-news/banners/">Banners</a>
@@ -275,7 +291,7 @@
<li>
<a href="/docs/patterns/blog-news/login/">Sign Up &amp; Login</a>
</li>
<li>
<li>
<a href="/docs/patterns/blog-news/numbers/">Numbers</a>
</li>
<li>
@@ -284,14 +300,16 @@
<li>
<a href="/docs/patterns/blog-news/teams/">Teams</a>
</li>
<li>
<li>
<a href="/docs/patterns/blog-news/testimonials/">Testimonials</a>
</li>
</ul>
</li>
<li>
<a href="/docs/patterns/ecommerce/">Ecommerce</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<span class="wa-split">
<a href="/docs/patterns/ecommerce/">Ecommerce</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</span>
<ul>
<li>
<a href="/docs/patterns/ecommerce/category-filter/">Category Filter</a>
@@ -329,8 +347,10 @@
</ul>
</li>
<li>
<a href="/docs/patterns/layouts/">Layouts</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<span class="wa-split">
<a href="/docs/patterns/layouts/">Layouts</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</span>
<ul>
<li>
<a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
@@ -352,17 +372,19 @@
<li><a href="/docs/color-palettes">Color Palettes</a></li>
<li><a href="/docs/themes">Themes</a></li>
<li>
<a href="/themer" data-turbo="false">Theme Builder</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
<span class="wa-split">
<a href="/themer" data-turbo="false">Theme Builder</a>
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
</span>
</li>
</ul>
<!-- Design tokens -->
<wa-details appearance="outlined">
<h2 slot="summary">
<a href="/docs/tokens/" title="Overview">
Design Tokens
<a class="wa-cluster wa-gap-xs" href="/docs/tokens/" title="Overview">
<wa-icon name="grid-2" aria-hidden="true"></wa-icon>
Design Tokens
</a>
</h2>
<ul>

17
packages/webawesome/docs/assets/styles/docs.css
View File

@@ -181,11 +181,6 @@ wa-page > header {
li wa-icon {
color: var(--wa-color-text-quiet);
vertical-align: middle;
&[name='flask'] {
margin-inline: 0.125em;
}
}
}
@@ -205,25 +200,16 @@ wa-badge.pro {
color: var(--wa-color-text-quiet);
a {
display: flex;
align-items: center;
gap: 0.4em;
color: var(--wa-color-text-normal);
text-decoration: none;
wa-icon {
margin-block-end: -0.15em;
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-action);
color: var(--wa-color-gray-70);
}
&:hover {
color: var(--wa-color-brand-on-normal);
wa-icon {
color: var(--wa-color-brand-on-quiet);
}
text-decoration: underline;
}
}
}
@@ -415,6 +401,7 @@ wa-button#search-trigger {
#search-trigger kbd {
font-size: var(--wa-font-size-2xs);
line-height: var(--wa-form-control-value-line-height);
padding-inline: 0.33em;
}
/* Search list pages */