mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Restore docs indices (#1085)
* fix missing indices * fix search placeholder
This commit is contained in:
Lindsay M
@@ -315,8 +315,8 @@
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<!-- Color Palettes & Themes -->
|
||||
<h2>Color Palettes & Themes</h2>
|
||||
<!-- Theming -->
|
||||
<h2>Theming</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/color-palettes">Color Palettes</a></li>
|
||||
<li><a href="/docs/themes">Themes</a></li>
|
||||
|
||||
@@ -99,7 +99,7 @@ wa-page > header {
|
||||
#sidebar,
|
||||
#outline {
|
||||
h2 {
|
||||
font-size: var(--wa-font-size-m);
|
||||
font-size: var(--wa-font-size-s);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -108,7 +108,16 @@ wa-page > header {
|
||||
}
|
||||
|
||||
wa-details {
|
||||
--spacing: var(--wa-space-xs);
|
||||
--spacing: 0;
|
||||
|
||||
&::part(header) {
|
||||
padding: 0;
|
||||
padding-block-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
&::part(content) {
|
||||
padding-block-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
&::part(base) {
|
||||
border: none;
|
||||
@@ -171,6 +180,7 @@ wa-page > header {
|
||||
|
||||
/* Pro badges */
|
||||
wa-badge.pro {
|
||||
color: white;
|
||||
background-color: var(--wa-brand-orange);
|
||||
border-color: var(--wa-brand-orange);
|
||||
}
|
||||
@@ -405,6 +415,7 @@ wa-page > main:has(> .search-list) {
|
||||
|
||||
wa-card {
|
||||
--spacing: var(--wa-space-m);
|
||||
box-shadow: none;
|
||||
|
||||
[slot='header'] {
|
||||
display: flex;
|
||||
@@ -417,6 +428,11 @@ wa-page > main:has(> .search-list) {
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
box-shadow: 0 0 0 0.0625rem var(--wa-color-brand-border-loud);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,6 +4,46 @@ description: Layout components and utility classes help you organize content tha
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search layout utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.layoutUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/layout/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
@@ -21,3 +61,4 @@ Or, you can choose to import _only_ the utilities:
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
TODO
|
||||
43
packages/webawesome/docs/docs/tokens/index.njk
Normal file
43
packages/webawesome/docs/docs/tokens/index.njk
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search design tokens" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.tokens | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
3
packages/webawesome/docs/docs/tokens/tokens.json
Normal file
3
packages/webawesome/docs/docs/tokens/tokens.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"tags": ["tokens"]
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Align Items
|
||||
description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Cluster
|
||||
description: 'Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Color Variants
|
||||
description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Flank
|
||||
description: 'Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Reducing FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Frame
|
||||
description: 'Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Gap
|
||||
description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Grid
|
||||
description: 'Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
66
packages/webawesome/docs/docs/utilities/index.njk
Normal file
66
packages/webawesome/docs/docs/utilities/index.njk
Normal file
@@ -0,0 +1,66 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search style utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.styleUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
</div>
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Native Styles
|
||||
description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
|
||||
layout: page-outline
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Rounding Utilities
|
||||
description: Border radius utilities set an element's border radius property.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Split
|
||||
description: 'Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Stack
|
||||
description: 'Use `wa-stack` to arrange elements in the block direction with even spacing.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Text
|
||||
description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Visually Hidden
|
||||
description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
> "There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
|
||||
|
||||
Reference in New Issue
Block a user