mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Merge branch 'next' into konnorrogers/set-outline-false-on-page
This commit is contained in:
Cory LaViska
@@ -45,6 +45,7 @@
|
||||
"dogfood",
|
||||
"dropdowns",
|
||||
"easings",
|
||||
"ecommerce",
|
||||
"endraw",
|
||||
"endregion",
|
||||
"enterkeyhint",
|
||||
|
||||
@@ -22,12 +22,15 @@ const isDeveloping = process.argv.includes('--develop');
|
||||
export default function (eleventyConfig) {
|
||||
// NOTE - alpha setting removes certain pages
|
||||
if (isAlpha) {
|
||||
eleventyConfig.ignores.add('**/components/page.md');
|
||||
eleventyConfig.ignores.add('**/experimental/**');
|
||||
eleventyConfig.ignores.add('**/layout/**');
|
||||
eleventyConfig.ignores.add('**/patterns/**');
|
||||
eleventyConfig.ignores.add('**/style-utilities/**');
|
||||
}
|
||||
|
||||
// Add template data
|
||||
eleventyConfig.addGlobalData('package', packageData);
|
||||
eleventyConfig.addGlobalData('isAlpha', isAlpha);
|
||||
|
||||
// Template filters - {{ content | filter }}
|
||||
eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
|
||||
|
||||
@@ -20,11 +20,12 @@
|
||||
</ul>
|
||||
|
||||
{# Components #}
|
||||
<h2>Components</h2>
|
||||
<h2>
|
||||
<a href="/docs/components/" title="Overview">Components
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/components/">Components Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/animated-image">Animated Image</a>
|
||||
</li>
|
||||
@@ -127,6 +128,11 @@
|
||||
<li>
|
||||
<a href="/docs/components/mutation-observer">Mutation Observer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/page">Page</a>
|
||||
<wa-icon name="flask"></wa-icon>
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/components/popup">Popup</a>
|
||||
</li>
|
||||
@@ -216,9 +222,14 @@
|
||||
</ul>
|
||||
|
||||
{# Layout #}
|
||||
{% if not isAlpha %}
|
||||
<h2>Layout</h2>
|
||||
<h2>
|
||||
<a href="/docs/layout" title="Overview">Layout
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/layout">Layout Overview</a></li>
|
||||
<li><a href="/docs/components/page">Page</a></li>
|
||||
<li><a href="/docs/layout/cluster">Cluster</a></li>
|
||||
<li><a href="/docs/layout/flank">Flank</a></li>
|
||||
@@ -227,13 +238,12 @@
|
||||
<li><a href="/docs/layout/split">Split</a></li>
|
||||
<li><a href="/docs/layout/stack">Stack</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{# Patterns #}
|
||||
{% if not isAlpha %}
|
||||
<h2>Patterns</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/patterns/">Pattern Overview</a>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/app">Web App</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce">E-commerce</a>
|
||||
<ul>
|
||||
@@ -242,14 +252,14 @@
|
||||
<li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>mary">Order Summaries</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/blog">Blog</a></li>
|
||||
<li><a href="/docs/patterns/news">News</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{# Theming #}
|
||||
<h2>Theming</h2>
|
||||
@@ -284,10 +294,12 @@
|
||||
</ul>
|
||||
|
||||
{# Style Utilities #}
|
||||
{% if not isAlpha %}
|
||||
<h2>Style Utilities</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/style-utilities/align-items">Align Items</a></li>
|
||||
<li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
|
||||
<li><a href="/docs/style-utilities/gap">Gap</a></li>
|
||||
<li><a href="/docs/style-utilities/text">Text</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
69
docs/_layouts/blank.njk
Normal file
69
docs/_layouts/blank.njk
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{ description }}">
|
||||
{% if noindex %}<meta name="robots" content="noindex">{% endif %}
|
||||
|
||||
<title>{{ title }}</title>
|
||||
|
||||
<link rel="icon" href="/assets/images/webawesome-logo.svg" />
|
||||
<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
|
||||
|
||||
{# Scripts #}
|
||||
{# Hydration stuff #}
|
||||
<script src="/assets/scripts/hydration-errors.js"></script>
|
||||
<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
|
||||
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" />
|
||||
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
|
||||
{# Set the theme to prevent flashing #}
|
||||
<script>
|
||||
function getColorScheme() {
|
||||
return localStorage.getItem('colorScheme') || 'auto';
|
||||
}
|
||||
|
||||
function getPresetTheme () {
|
||||
return localStorage.getItem('presetTheme') || 'default';
|
||||
}
|
||||
|
||||
function isDark() {
|
||||
const colorScheme = getColorScheme()
|
||||
if (colorScheme === 'auto') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
return colorScheme === 'dark';
|
||||
}
|
||||
|
||||
const stylesheet = document.getElementById("theme-stylesheet")
|
||||
let preset = getPresetTheme()
|
||||
|
||||
stylesheet.href = `/dist/themes/${preset}.css`
|
||||
|
||||
document.documentElement.classList.toggle(
|
||||
`wa-theme-${preset}-dark`,
|
||||
isDark()
|
||||
);
|
||||
</script>
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
|
||||
{% block beforeContent %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -17,6 +17,10 @@
|
||||
>
|
||||
{{ component.status }}
|
||||
</wa-badge>
|
||||
{# TODO - add a pro flag for pro components #}
|
||||
{% if component.tagName == 'wa-page' %}
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="component-summary">
|
||||
{{ component.summary | inlineMarkdown | safe }}
|
||||
@@ -62,7 +66,7 @@
|
||||
|
||||
{# Properties #}
|
||||
{% if component.properties.length %}
|
||||
<h2>Properties</h2>
|
||||
<h2>Attributes & Properties</h2>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table class="component-table">
|
||||
@@ -77,9 +81,9 @@
|
||||
{% for prop in component.properties %}
|
||||
<tr>
|
||||
<td class="table-name">
|
||||
<code>{{ prop.name }}</code><br>
|
||||
<code title="JS property">{{ prop.name }}</code><br>
|
||||
{% if prop.attribute %}
|
||||
<div><small><code>{{ prop.attribute }}</code></small></div>
|
||||
<div><small><code title="HTML attribute">{{ prop.attribute }}</code></small></div>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="table-description">
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" fill="#f68a4c">
|
||||
<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"/>
|
||||
</svg>
|
||||
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 684 B After Width: | Height: | Size: 742 B |
@@ -18,10 +18,12 @@ document.addEventListener('click', event => {
|
||||
const cdnUrl = document.documentElement.dataset.cdnUrl;
|
||||
const html =
|
||||
`<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/layout.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}themes/utilities.css">\n\n` +
|
||||
`${code.textContent}`;
|
||||
const css = 'body {\n font: 16px sans-serif;\n padding: 2rem;\n}';
|
||||
const css = 'html > body {\n font: 16px sans-serif;\n padding: 2rem;\n}';
|
||||
const js = '';
|
||||
|
||||
const form = document.createElement('form');
|
||||
|
||||
@@ -88,9 +88,10 @@ wa-page > header {
|
||||
h2 {
|
||||
font-size: var(--wa-font-size-m);
|
||||
margin-block-end: var(--wa-space-m);
|
||||
}
|
||||
h2:not(:first-of-type) {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
|
||||
@@ -113,6 +114,55 @@ wa-page > header {
|
||||
li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
li wa-badge::part(base) {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
li wa-icon {
|
||||
color: var(--wa-color-text-quiet);
|
||||
vertical-align: middle;
|
||||
|
||||
&[name='flask'] {
|
||||
margin-inline: 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Pro badges */
|
||||
wa-badge.pro::part(base) {
|
||||
background-color: var(--wa-brand-orange);
|
||||
border-color: var(--wa-brand-orange);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
h2 {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-close-button {
|
||||
@@ -143,6 +193,14 @@ wa-page > main {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
h1.title wa-badge {
|
||||
vertical-align: middle;
|
||||
|
||||
&::part(base) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.component-info {
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
}
|
||||
|
||||
238
docs/docs/components/page-samples/documentation.md
Normal file
238
docs/docs/components/page-samples/documentation.md
Normal file
@@ -0,0 +1,238 @@
|
||||
---
|
||||
title: Sample Docs Page
|
||||
description: TODO
|
||||
layout: blank
|
||||
---
|
||||
|
||||
<style>
|
||||
wa-page {
|
||||
--menu-width: 15rem;
|
||||
--aside-width: 15rem;
|
||||
}
|
||||
wa-page[view='desktop'] [data-toggle-nav] {
|
||||
display: none;
|
||||
}
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
--aside-width: auto;
|
||||
}
|
||||
wa-page[view='mobile'] [slot='aside'] {
|
||||
display: none;
|
||||
}
|
||||
wa-page[view='mobile'] #brand-name {
|
||||
display: none;
|
||||
}
|
||||
wa-page[view='mobile'] #search {
|
||||
display: none;
|
||||
}
|
||||
[slot='banner'] {
|
||||
--wa-color-text-link: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
[slot='header'] {
|
||||
--wa-link-decoration-default: none;
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot*='header'] a {
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
[slot='subheader'] {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot='navigation-header'] {
|
||||
border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
wa-page[view='desktop'] [slot*='navigation'] {
|
||||
border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot*='navigation'] a {
|
||||
--wa-color-text-link: var(--wa-color-text-normal);
|
||||
}
|
||||
[slot='navigation-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot='main-header'],
|
||||
main,
|
||||
[slot='main-footer'] {
|
||||
max-inline-size: 60rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
[slot='main-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
[slot='footer'] {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
<wa-page mobile-breakpoint="920">
|
||||
<div slot="banner" class="wa-body-s">
|
||||
<a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
|
||||
<wa-icon name="gift"></wa-icon>
|
||||
<span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
|
||||
</div>
|
||||
</div>
|
||||
<header slot="header" class="wa-split">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
|
||||
<span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
|
||||
<a href="#">Our Work</a>
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Discover</a>
|
||||
<a href="#">Get Involved</a>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
|
||||
<wa-button size="small" variant="brand">Donate</wa-button>
|
||||
</div>
|
||||
</header>
|
||||
<nav slot="subheader">
|
||||
<div class="wa-cluster" style="flex-wrap: nowrap;">
|
||||
<wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
|
||||
<wa-breadcrumb style="font-size: var(--wa-font-size-s);">
|
||||
<wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Owls</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
</div>
|
||||
<wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
</nav>
|
||||
<nav slot="navigation-header">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Great Horned Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav slot="navigation">
|
||||
<a href="#identification">Identification</a>
|
||||
<a href="#range">Range and Habitat</a>
|
||||
<a href="#behavior">Behavior</a>
|
||||
<a href="#conservation">Conservation</a>
|
||||
</nav>
|
||||
<nav slot="navigation-footer">
|
||||
<a href="#" class="wa-flank" style="--flank-size: 1.25em;">
|
||||
<wa-icon name="camera"></wa-icon>
|
||||
<span>Photo Gallery</span>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="--flank-size: 1.25em;">
|
||||
<wa-icon name="map-location-dot"></wa-icon>
|
||||
<span>Interactive Range Map</span>
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-tag size="small">Owls</wa-tag>
|
||||
<wa-tag size="small">Birds of Prey</wa-tag>
|
||||
<wa-tag size="small">Pleistocene Birds</wa-tag>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="ruler"></wa-icon>
|
||||
<span class="wa-caption-m">L 21.5" | WS 48.5"</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="earth-americas"></wa-icon>
|
||||
<span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="shield-heart"></wa-icon>
|
||||
<span class="wa-caption-m">Least Concern</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
|
||||
<img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="wa-body-l">
|
||||
<h2 id="identification">Identification</h2>
|
||||
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
|
||||
<h2 id="range">Range and Habitat</h2>
|
||||
<p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
|
||||
<h2 id="behavior">Behavior</h2>
|
||||
<p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
|
||||
<h2 id="conservation">Conservation</h2>
|
||||
<p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
|
||||
</main>
|
||||
<footer slot="main-footer">
|
||||
<section>
|
||||
<h2 class="wa-heading-m">Sources</h2>
|
||||
<ul class="wa-body-s">
|
||||
<li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
|
||||
<li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
|
||||
<li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
<aside slot="aside">
|
||||
<h2 class="wa-heading-m">Discover More Birds</h2>
|
||||
<wa-card with-image>
|
||||
<div slot="image" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Long-eared Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-image>
|
||||
<div slot="image" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Northen Hawk Owl</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-image>
|
||||
<div slot="image" class="wa-frame">
|
||||
<img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-heading-s">Golden Eagle</span>
|
||||
<span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
|
||||
</div>
|
||||
</wa-card>
|
||||
</aside>
|
||||
<footer slot="footer" class="wa-grid wa-gap-xl">
|
||||
<div class="wa-cluster" style="flex-wrap: nowrap;">
|
||||
<wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
|
||||
<span class="wa-heading-s">Audubon Worldwide</span>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Our Work</h3>
|
||||
<a href="#">Habitat Restoration</a>
|
||||
<a href="#">Migration Science</a>
|
||||
<a href="#">Advocacy</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">About Us</h3>
|
||||
<a href="#">Our History</a>
|
||||
<a href="#">Leadership</a>
|
||||
<a href="#">Fiscal Reports</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Discover</h3>
|
||||
<a href="#">Field Guides</a>
|
||||
<a href="#">Photo Search</a>
|
||||
<a href="#">Gear and Resources</a>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xs">Get Involved</h3>
|
||||
<a href="#">Adopt a Bird</a>
|
||||
<a href="#">Your Local Audubon</a>
|
||||
<a href="#">Youth Audubon Camps</a>
|
||||
</div>
|
||||
</footer>
|
||||
</wa-page>
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Page
|
||||
description: Layouts offer an easy way to scaffold pages using minimal markup.
|
||||
layout: component
|
||||
isPro: true
|
||||
---
|
||||
|
||||
The layout component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
|
||||
|
||||
100
docs/docs/experimental/default-page-spacing.md
Normal file
100
docs/docs/experimental/default-page-spacing.md
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
title: Default Layout and Spacing
|
||||
description: TODO
|
||||
layout: blank
|
||||
---
|
||||
|
||||
<style>
|
||||
[slot='banner'] {
|
||||
background-color: pink;
|
||||
}
|
||||
[slot='header'] {
|
||||
background-color: peachpuff;
|
||||
}
|
||||
[slot='subheader'] {
|
||||
background-color: papayawhip;
|
||||
}
|
||||
[slot='navigation-header'] {
|
||||
background-color: lemonchiffon;
|
||||
}
|
||||
[slot='navigation'] {
|
||||
background-color: honeydew;
|
||||
}
|
||||
[slot='navigation-footer'] {
|
||||
background-color: paleturquoise;
|
||||
}
|
||||
[slot='main-header'] {
|
||||
background-color: lavenderblush;
|
||||
}
|
||||
main {
|
||||
background-color: lavender;
|
||||
height: 100%;
|
||||
}
|
||||
[slot='main-footer'] {
|
||||
background-color: thistle;
|
||||
}
|
||||
[slot='aside'] {
|
||||
background-color: lightcyan;
|
||||
height: 100%;
|
||||
}
|
||||
[slot='footer'] {
|
||||
background-color: lightsteelblue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<wa-page>
|
||||
<section slot="banner">
|
||||
<strong>Banner</strong>
|
||||
<span>Banner</span>
|
||||
<span>Banner</span>
|
||||
</section>
|
||||
<header slot="header">
|
||||
<strong>Header</strong>
|
||||
<span>Header</span>
|
||||
<span>Header</span>
|
||||
</header>
|
||||
<nav slot="subheader">
|
||||
<strong>Subheader</strong>
|
||||
<span>Subheader</span>
|
||||
<span>Subheader</span>
|
||||
</nav>
|
||||
<nav slot="navigation-header">
|
||||
<strong>Nav Header</strong>
|
||||
<span>Nav Header</span>
|
||||
<span>Nav Header</span>
|
||||
</nav>
|
||||
<nav slot="navigation">
|
||||
<strong>Navigation</strong>
|
||||
<span>Navigation</span>
|
||||
<span>Navigation</span>
|
||||
</nav>
|
||||
<nav slot="navigation-footer">
|
||||
<strong>Nav Footer</strong>
|
||||
<span>Nav Footer</span>
|
||||
<span>Nav Footer</span>
|
||||
</nav>
|
||||
<div slot="main-header">
|
||||
<strong>Main Header</strong>
|
||||
<span>Main Header</span>
|
||||
<span>Main Header</span>
|
||||
</div>
|
||||
<main>
|
||||
<h1>Main</h1>
|
||||
<p>No flex properties here! The author can specify their own preferred content flow and layout in the default slot.</p>
|
||||
</main>
|
||||
<div slot="main-footer">
|
||||
<strong>Main Footer</strong>
|
||||
<span>Main Footer</span>
|
||||
<span>Main Footer</span>
|
||||
</div>
|
||||
<aside slot="aside">
|
||||
<strong>Aside</strong>
|
||||
<span>Aside</span>
|
||||
<span>Aside</span>
|
||||
</aside>
|
||||
<footer slot="footer">
|
||||
<strong>Footer</strong>
|
||||
<span>Footer</span>
|
||||
<span>Footer</span>
|
||||
</footer>
|
||||
</wa-page>
|
||||
@@ -21,6 +21,8 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Added more resilient support for lazy loaded options in `<wa-select>`
|
||||
- Added support for vertical button groups
|
||||
- Added the `focus()` method to `<wa-radio-group>`
|
||||
- Fixed a bug in `<wa-dialog>` with scroll locking shifting viewports.
|
||||
- Fixed a bug in `<wa-dialog>` when using `.show()`
|
||||
- Fixed a bug in `<wa-rating>` when using `precision`
|
||||
- Fixed a bug in `<wa-rating>` that allowed tabbing into the rating when readonly
|
||||
- Fixed a bug in `<wa-relative-time>` where the title attribute would show with redundant info
|
||||
|
||||
@@ -106,10 +106,9 @@ async function generateStyles() {
|
||||
// NOTE - alpha setting omits all stylesheets except for these because we use them in the docs
|
||||
if (isAlpha) {
|
||||
await copy(join(rootDir, 'src/themes/applied.css'), join(cdnDir, 'themes/applied.css'), { overwrite: true });
|
||||
await copy(join(rootDir, 'src/themes/color_standard.css'), join(cdnDir, 'themes/color_standard.css'), {
|
||||
overwrite: true
|
||||
});
|
||||
await copy(join(rootDir, 'src/themes/default.css'), join(cdnDir, 'themes/default.css'), { overwrite: true });
|
||||
await copy(join(rootDir, 'src/themes/layout.css'), join(cdnDir, 'themes/layout.css'), { overwrite: true });
|
||||
await copy(join(rootDir, 'src/themes/utilities.css'), join(cdnDir, 'themes/utilities.css'), { overwrite: true });
|
||||
} else {
|
||||
await copy(join(rootDir, 'src/themes'), join(cdnDir, 'themes'), { overwrite: true });
|
||||
}
|
||||
@@ -288,12 +287,18 @@ if (isDeveloping) {
|
||||
callbacks: {
|
||||
ready: (_err, instance) => {
|
||||
// 404 errors
|
||||
instance.addMiddleware('*', (req, res) => {
|
||||
instance.addMiddleware('*', async (req, res) => {
|
||||
if (req.url.toLowerCase().endsWith('.svg')) {
|
||||
// Make sure SVGs error out in dev instead of serve the 404 page
|
||||
res.writeHead(404);
|
||||
} else {
|
||||
res.writeHead(302, { location: '/404.html' });
|
||||
try {
|
||||
const notFoundTemplate = await readFile(join(siteDir, '404.html'), 'utf-8');
|
||||
res.writeHead(404);
|
||||
res.write(notFoundTemplate || 'Page Not Found');
|
||||
} catch {
|
||||
// We're probably disconnected for some reason, so fail gracefully
|
||||
}
|
||||
}
|
||||
|
||||
res.end();
|
||||
|
||||
@@ -186,7 +186,7 @@ export default class WaDialog extends WebAwesomeElement {
|
||||
// Open or close the dialog
|
||||
if (this.open && !this.dialog.open) {
|
||||
this.show();
|
||||
} else if (this.dialog.open) {
|
||||
} else if (!this.open && this.dialog.open) {
|
||||
this.open = true;
|
||||
this.requestClose(this.dialog);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { css } from 'lit';
|
||||
export default css`
|
||||
:host {
|
||||
display: block;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
--menu-width: auto;
|
||||
@@ -14,6 +15,82 @@ export default css`
|
||||
--scroll-margin-top: calc(var(--header-height, 0px) + var(--subheader-height, 0px));
|
||||
}
|
||||
|
||||
::slotted(
|
||||
:is(
|
||||
[slot='banner'],
|
||||
[slot='header'],
|
||||
[slot='subheader'],
|
||||
[slot='navigation-header'],
|
||||
[slot='navigation'],
|
||||
[slot='navigation-footer'],
|
||||
[slot='menu'],
|
||||
[slot='main-header'],
|
||||
[slot='main-footer'],
|
||||
[slot='aside'],
|
||||
[slot='footer']
|
||||
)
|
||||
) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
::slotted([slot='banner']) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--wa-space-m);
|
||||
padding: var(--wa-space-xs) var(--wa-space-m);
|
||||
}
|
||||
|
||||
::slotted([slot='header']) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
padding: var(--wa-space-m);
|
||||
}
|
||||
|
||||
::slotted([slot='subheader']) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
padding: var(--wa-space-xs) var(--wa-space-m);
|
||||
}
|
||||
|
||||
::slotted([slot*='navigation']),
|
||||
::slotted([slot='menu']),
|
||||
::slotted([slot='aside']) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--wa-space-m);
|
||||
padding: var(--wa-space-m);
|
||||
}
|
||||
|
||||
::slotted([slot='main-header']) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
padding: var(--wa-space-m) var(--wa-space-3xl);
|
||||
}
|
||||
|
||||
::slotted(:not([slot])) {
|
||||
padding: var(--wa-space-3xl);
|
||||
}
|
||||
|
||||
::slotted([slot='main-footer']),
|
||||
::slotted([slot='footer']) {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
padding: var(--wa-space-3xl);
|
||||
}
|
||||
|
||||
:host([disable-sticky~='banner']) :is([part~='header'], [part~='subheader']) {
|
||||
--banner-height: 0px !important;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,24 @@
|
||||
import { getOffset } from './offset.js';
|
||||
import { isServer } from 'lit';
|
||||
|
||||
const locks = new Set();
|
||||
const lockStyles = isServer ? null : document.createElement('style');
|
||||
|
||||
if (lockStyles) {
|
||||
lockStyles.textContent = `
|
||||
.wa-scroll-lock {
|
||||
scrollbar-gutter: stable !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
`;
|
||||
/** Returns the width of the document's scrollbar */
|
||||
function getScrollbarWidth() {
|
||||
const documentWidth = document.documentElement.clientWidth;
|
||||
return Math.abs(window.innerWidth - documentWidth);
|
||||
}
|
||||
|
||||
/**
|
||||
* Used in conjunction with `scrollbarWidth` to set proper body padding in case the user has padding already on the `<body>` element.
|
||||
*/
|
||||
function getExistingBodyPadding() {
|
||||
const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ''));
|
||||
|
||||
if (isNaN(padding) || !padding) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return padding;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -20,9 +28,27 @@ if (lockStyles) {
|
||||
export function lockBodyScrolling(lockingEl: HTMLElement) {
|
||||
locks.add(lockingEl);
|
||||
|
||||
if (lockStyles && !lockStyles.isConnected) {
|
||||
document.body.append(lockStyles);
|
||||
// When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from
|
||||
// shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.
|
||||
if (!document.documentElement.classList.contains('wa-scroll-lock')) {
|
||||
/** Scrollbar width + body padding calculation can go away once Safari has scrollbar-gutter support. */
|
||||
const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding(); // must be measured before the `wa-scroll-lock` class is applied
|
||||
|
||||
let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
|
||||
|
||||
// default is auto, unsupported browsers is "undefined"
|
||||
if (!scrollbarGutterProperty || scrollbarGutterProperty === 'auto') {
|
||||
scrollbarGutterProperty = 'stable';
|
||||
}
|
||||
|
||||
/** Sometimes the scrollbar width is 1px, even then, we assume nothing is overflowing. */
|
||||
if (scrollbarWidth < 2) {
|
||||
// if there's no scrollbar, just set it to an empty string so whatever the user has set gets used. This is useful if the page is not overflowing and showing a scrollbar, or if the user has overflow: hidden, or any other reason a scrollbar may not be showing.
|
||||
scrollbarGutterProperty = '';
|
||||
}
|
||||
document.documentElement.style.setProperty('--wa-scroll-lock-gutter', scrollbarGutterProperty);
|
||||
document.documentElement.classList.add('wa-scroll-lock');
|
||||
document.documentElement.style.setProperty('--wa-scroll-lock-size', `${scrollbarWidth}px`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,7 +60,7 @@ export function unlockBodyScrolling(lockingEl: HTMLElement) {
|
||||
|
||||
if (locks.size === 0) {
|
||||
document.documentElement.classList.remove('wa-scroll-lock');
|
||||
lockStyles?.remove();
|
||||
document.documentElement.style.removeProperty('--wa-scroll-lock-size');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,6 +9,13 @@ html {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:is(html, body):has(wa-page) {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
||||
@@ -229,7 +229,7 @@
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,3 +1,24 @@
|
||||
/* #region Scroll Lock */
|
||||
/* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
|
||||
@supports (scrollbar-gutter: stable) {
|
||||
.wa-scroll-lock {
|
||||
scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
|
||||
}
|
||||
|
||||
.wa-scroll-lock body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** This can go away once Safari has scrollbar-gutter support. */
|
||||
@supports not (scrollbar-gutter: stable) {
|
||||
.wa-scroll-lock body {
|
||||
padding-right: var(--wa-scroll-lock-size) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Align Items */
|
||||
.wa-align-items-start {
|
||||
align-items: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user