mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
8 Commits
epic/pac-m
...
demo-patte
| Author | SHA1 | Date | |
|---|---|---|---|
|
ec07b7dd74 | ||
|
|
2d5fde324a | ||
|
|
22e7fd2e9d | ||
|
|
4bb032ad2c | ||
|
|
c0b6dbc305 | ||
|
|
77e4655b68 | ||
|
|
118f520289 | ||
|
|
afe861c9c4 |
@@ -38,6 +38,8 @@
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
<link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
|
||||
<link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_patterns.css" />
|
||||
<link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/demo_sublayout.css" />
|
||||
<script type="module" src="/dist/autoloader.js"></script>
|
||||
|
||||
{# Set the initial theme and menu states here to prevent flashing #}
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
});
|
||||
</script>
|
||||
<li><a href="/experimental/sandbox">Sandbox</a></li>
|
||||
<li><a href="/experimental/patterns">Patterns</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
282
docs/pages/experimental/demo_patterns/blog_listing.md
Normal file
282
docs/pages/experimental/demo_patterns/blog_listing.md
Normal file
@@ -0,0 +1,282 @@
|
||||
---
|
||||
meta:
|
||||
title: Blog Listing
|
||||
description: TODO
|
||||
toc: false
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--docs-content-max-width: 72rem;
|
||||
}
|
||||
#menu-toggle,
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
padding: var(--docs-content-vertical-spacing) var(--docs-content-padding);
|
||||
margin: 0;
|
||||
}
|
||||
.anchor-heading a {
|
||||
display: none;
|
||||
}
|
||||
.preview-container {
|
||||
container: preview / inline-size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="preview-container wa:block-flow:3xl">
|
||||
<div class="wa:blog_header wa:background:college_ruled">
|
||||
<h1>Latest from the Blog</h1>
|
||||
<p>Don't miss the hottest takes on art and design from respected industry experts.</p>
|
||||
</div>
|
||||
<div class="wa:arrange:aside-end" style="--wa-grid-size: 45ch;">
|
||||
<div class="wa:block-flow:m">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://bit.ly/3Irq42Q" alt="">
|
||||
</div>
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<small><wa-format-date month="long" year="numeric"></wa-format-date></small>
|
||||
<wa-tag size="small">Design</wa-tag>
|
||||
</div>
|
||||
<h1>Pantone's Color of the Year 2024</h1>
|
||||
<p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
|
||||
<small>Jane Doe</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:arrange" style="align-content: start;">
|
||||
<div class="wa:arrange:side-by-side:gap-s">
|
||||
<div class="wa:block-flow:xs">
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
<h4>Lorem Ipsum Dolor Sit Amet</h4>
|
||||
</div>
|
||||
<div class="wa:frame">
|
||||
<img src="https://images.pexels.com/photos/1181676/pexels-photo-1181676.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:arrange:side-by-side:gap-s">
|
||||
<div class="wa:block-flow:xs">
|
||||
<small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
<h4>Consectetur Adipiscing Elit</h4>
|
||||
</div>
|
||||
<div class="wa:frame">
|
||||
<img src="https://images.pexels.com/photos/4219654/pexels-photo-4219654.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:arrange:side-by-side:gap-s">
|
||||
<div class="wa:block-flow:xs">
|
||||
<small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
<h4>Nunc Rhoncus Enim Ligula</h4>
|
||||
</div>
|
||||
<div class="wa:frame">
|
||||
<img src="https://images.pexels.com/photos/14822510/pexels-photo-14822510.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:arrange:side-by-side:gap-s">
|
||||
<div class="wa:block-flow:xs">
|
||||
<small><wa-format-date date="2023-10-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
<h4>Donec Quis Tincidunt Massa</h4>
|
||||
</div>
|
||||
<div class="wa:frame">
|
||||
<img src="https://images.pexels.com/photos/7988116/pexels-photo-7988116.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:arrange:gap-m" style="background-color:var(--wa-color-brand-fill-subtle); padding:var(--wa-space-3xl); border-radius:var(--wa-panel-corners); box-shadow:var(--wa-shadow-level-1);">
|
||||
<div class="wa:block-flow:s">
|
||||
<h2 style="color:var(--wa-color-brand-text-on-fill)"><strong>Don't miss a thing.</strong></h2>
|
||||
<p style="color:var(--wa-color-neutral-text-on-fill)">Subscribe to receive the latest posts in your inbox.</p>
|
||||
</div>
|
||||
<div class="wa:arrange:flex:justify-space_between:gap-s">
|
||||
<wa-input class="wa:fill_space" type="email" placeholder="your@email.com">
|
||||
<wa-icon name="envelope" variant="regular" label="email" slot="prefix"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button variant="brand">Subscribe</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:block-flow:xl">
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<h2>Arts & Culture</h2>
|
||||
<wa-button outline variant="brand">
|
||||
See more arts & culture posts
|
||||
<wa-icon name="arrow-right" slot="suffix"></wa-icon>
|
||||
</wa-button>
|
||||
</div>
|
||||
<div class="wa:arrange:size-s">
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/14363192/pexels-photo-14363192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Dolore eu Fugiat Nulla</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/8843689/pexels-photo-8843689.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Sed Tincidunt Nibh Felis</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/1646953/pexels-photo-1646953.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Curabitur Cursus Eleifend</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/3184188/pexels-photo-3184188.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Ante Est Non Ligula</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:block-flow:xl">
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<h2>Design</h2>
|
||||
<wa-button outline variant="brand">
|
||||
See more design posts
|
||||
<wa-icon name="arrow-right" slot="suffix"></wa-icon>
|
||||
</wa-button>
|
||||
</div>
|
||||
<div class="wa:arrange:size-s">
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/1762851/pexels-photo-1762851.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Maecenas ut Metus</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/196645/pexels-photo-196645.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Morbi Vitae Sapien Non Velit</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Vestibulum Ante Ipsum Primis</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Viverra Eros Vitae</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:block-flow:xl">
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<h2>Web Development</h2>
|
||||
<wa-button outline variant="brand">
|
||||
See more web development posts
|
||||
<wa-icon name="arrow-right" slot="suffix"></wa-icon>
|
||||
</wa-button>
|
||||
</div>
|
||||
<div class="wa:arrange:size-s">
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/6321244/pexels-photo-6321244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Ante Est Non Ligula Imperdiet</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/5473956/pexels-photo-5473956.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Viverra Eros Vitae</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/4709289/pexels-photo-4709289.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Maecenas ut Metus</h4>
|
||||
</div>
|
||||
<div class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://images.pexels.com/photos/3184340/pexels-photo-3184340.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
<h4>Dolore eu Fugiat Nulla</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:arrange:size-s wa:collection">
|
||||
<div>
|
||||
<h2>So Fetch <wa-icon name="arrow-trend-up" style="color: var(--wa-color-brand-spot);"></wa-icon></h2>
|
||||
<p style="margin-block-end:0;">Other readers have been into these trending posts recently.</p>
|
||||
</div>
|
||||
<wa-card class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape" slot="image">
|
||||
<img src="https://images.pexels.com/photos/1194420/pexels-photo-1194420.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
<h4>Vestibulum Ante Ipsum Primis</h4>
|
||||
<wa-tag size="small">Design</wa-tag>
|
||||
</wa-card>
|
||||
<wa-card class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape" slot="image">
|
||||
<img src="https://images.pexels.com/photos/4219654/pexels-photo-4219654.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
<h4>Consectetur Adipiscing Elit</h4>
|
||||
<wa-tag size="small">Arts & Culture</wa-tag>
|
||||
</wa-card>
|
||||
<wa-card class="wa:block-flow:xs">
|
||||
<div class="wa:frame:landscape" slot="image">
|
||||
<img src="https://images.pexels.com/photos/6321244/pexels-photo-6321244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<small><wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date></small>
|
||||
<h4>Ante Est Non Ligula Imperdiet</h4>
|
||||
<wa-tag size="small">Web Development</wa-tag>
|
||||
</wa-card>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Browse All Topics</h2>
|
||||
<div class="wa:arrange:gap-m">
|
||||
<wa-button outline>Accessibility <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
|
||||
<wa-button outline>Arts & Culture <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
|
||||
<wa-button outline>Design <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
|
||||
<wa-button outline>News <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
|
||||
<wa-button outline>Typography <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
|
||||
<wa-button outline>Web Development <wa-icon name="arrow-right" slot="suffix"></wa-icon></wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
171
docs/pages/experimental/demo_patterns/blog_patterns.md
Normal file
171
docs/pages/experimental/demo_patterns/blog_patterns.md
Normal file
@@ -0,0 +1,171 @@
|
||||
---
|
||||
meta:
|
||||
title: Patterns List
|
||||
description: TBD
|
||||
toc: false
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--docs-content-max-width: 72rem;
|
||||
}
|
||||
#menu-toggle,
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
margin: var(--wa-space-xl);
|
||||
}
|
||||
h2:not(.code-preview h2) {
|
||||
font-size: large;
|
||||
}
|
||||
</style>
|
||||
|
||||
# Blog Patterns
|
||||
|
||||
## Overflowing Hero
|
||||
|
||||
```html:preview
|
||||
<section class="wa:blog-hero-overflowing">
|
||||
<div class="wa:hero-backdrop">
|
||||
<div class="wa:hero-content">
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Design</wa-tag>
|
||||
</div>
|
||||
<h1>Pantone's Color of the Year 2024</h1>
|
||||
<p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
|
||||
<div class="wa:post-author">
|
||||
<wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
|
||||
<small>Jane Doe</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:frame:square">
|
||||
<img src="https://bit.ly/3Irq42Q" alt="Vast, peach-colored desert">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Post Body with Drop Cap
|
||||
|
||||
```html:preview
|
||||
<section class="wa:blog-post">
|
||||
<div class="wa:post-body">
|
||||
<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>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Footer with Reactions
|
||||
|
||||
```html:preview
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa:post-footer">
|
||||
<wa-radio-group name="reactions" class="wa:post-reactions">
|
||||
<wa-radio-button value="applaud"><wa-icon name="hands-clapping" label="Applaud"></wa-icon><small class="wa:count">74</small></wa-radio-button>
|
||||
<wa-radio-button value="love"><wa-icon name="heart" label="Love"></wa-icon><small class="wa:count">161</small></wa-radio-button>
|
||||
<wa-radio-button value="laugh"><wa-icon name="face-laugh-beam" label="Laugh"></wa-icon><small class="wa:count">9</small></wa-radio-button>
|
||||
<wa-radio-button value="cry"><wa-icon name="face-sad-tear" label="Cry"></wa-icon><small class="wa:count">1</small></wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<div class="wa:post-actions">
|
||||
<wa-tooltip content="Save">
|
||||
<wa-icon-button name="bookmark" label="Save"></wa-icon-button>
|
||||
</wa-tooltip>
|
||||
<wa-tooltip content="Share">
|
||||
<wa-icon-button name="share-from-square" label="Share"></wa-icon-button>
|
||||
</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Comment Field
|
||||
|
||||
```html:preview
|
||||
<article class="wa:comment-composer">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<wa-textarea rows="1" placeholder="Add a comment"></wa-textarea>
|
||||
</article>
|
||||
```
|
||||
|
||||
## Comment
|
||||
|
||||
```html:preview
|
||||
<article class="wa:comment">
|
||||
<wa-avatar image="https://bit.ly/3V9kV7a" label="User avatar"></wa-avatar>
|
||||
<div class="wa:comment-content">
|
||||
<div class="wa:comment-bubble">
|
||||
<div class="wa:comment-details">
|
||||
<strong>Pedro Pascal</strong>
|
||||
<small>1d</small>
|
||||
</div>
|
||||
<span>You expect me to search the galaxy for the home of this creature and deliver it to a race of enemy sorcerers?</span>
|
||||
</div>
|
||||
<div class="wa:comment-actions">
|
||||
<div class="wa:reaction-like">
|
||||
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
|
||||
<small>(3)</small>
|
||||
</div>
|
||||
<wa-button variant="text" size="small">Reply</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
```
|
||||
|
||||
## Call to Action
|
||||
|
||||
```html:preview
|
||||
<section class="wa:blog-subscribe-cta">
|
||||
<div class="wa:cta-description">
|
||||
<h2><strong>Don't miss a thing.</strong></h2>
|
||||
<p>Subscribe to receive the latest posts in your inbox.</p>
|
||||
</div>
|
||||
<form>
|
||||
<wa-input type="email" placeholder="your@email.com">
|
||||
<wa-icon name="envelope" variant="regular" label="email" slot="prefix"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button type="submit" variant="brand">Subscribe</wa-button>
|
||||
</form>
|
||||
</section>
|
||||
```
|
||||
|
||||
## Recommended Posts
|
||||
|
||||
```html:preview
|
||||
<section class="wa:blog-recommended-posts">
|
||||
<h2>You may also like</h2>
|
||||
<div class="wa:post-list">
|
||||
<article class="wa:post-link">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="http://bit.ly/49ThK7O" alt="">
|
||||
</div>
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date date="2024-02-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Arts & Culture</wa-tag>
|
||||
</div>
|
||||
<h4>Eget Consequat Libero</h4>
|
||||
</article>
|
||||
<article class="wa:post-link">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://bit.ly/3wHdFFp" alt="">
|
||||
</div>
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date date="2024-01-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Design</wa-tag>
|
||||
</div>
|
||||
<h4>Sed a Leo Tempus Aute Irure</h4>
|
||||
</article>
|
||||
<article class="wa:post-link">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://bit.ly/49LxbPx" alt="">
|
||||
</div>
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Arts & Culture</wa-tag>
|
||||
</div>
|
||||
<h4>Ultrices Posuere Cubilia Curae</h4>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
175
docs/pages/experimental/demo_patterns/blog_post.md
Normal file
175
docs/pages/experimental/demo_patterns/blog_post.md
Normal file
@@ -0,0 +1,175 @@
|
||||
---
|
||||
meta:
|
||||
title: Blog Post
|
||||
description: TODO
|
||||
toc: false
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--docs-content-max-width: 72rem;
|
||||
}
|
||||
#menu-toggle,
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
padding: var(--docs-content-vertical-spacing) var(--docs-content-padding);
|
||||
margin: 0;
|
||||
}
|
||||
.anchor-heading a {
|
||||
display: none;
|
||||
}
|
||||
.preview-container {
|
||||
container: preview / inline-size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- cSpell:dictionaries lorem-ipsum -->
|
||||
|
||||
<div class="preview-container wa:block-flow:3xl">
|
||||
<section class="wa:blog-hero-overflowing">
|
||||
<div class="wa:hero-backdrop">
|
||||
<div class="wa:hero-content">
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Design</wa-tag>
|
||||
</div>
|
||||
<h1>Pantone's Color of the Year 2024</h1>
|
||||
<p>PANTONE 13-1023 Peach Fuzz has our new year starting off with lots of warm and fuzzies.</p>
|
||||
<div class="wa:post-author">
|
||||
<wa-avatar label="User avatar" style="--size: 2rem;"></wa-avatar>
|
||||
<small>Jane Doe</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:frame:square">
|
||||
<img src="https://bit.ly/3Irq42Q" alt="Vast, peach-colored desert">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="wa:blog-post">
|
||||
<div class="wa:post-body">
|
||||
<p>Morbi vitae sapien non velit feugiat consectetur. Nulla lacinia ante a diam gravida cursus. Quisque fermentum ex a nisi cursus porttitor. Praesent id laoreet mauris, id efficitur sapien. Quisque eget metus velit. Nulla sit amet tristique lectus, tincidunt lobortis velit. Proin vitae facilisis lectus. Nunc vel sapien vitae dui commodo suscipit iaculis eget felis.</p>
|
||||
<p>Praesent in erat semper, fringilla tellus non, lacinia felis. Nam eu fringilla nisl. Maecenas id tortor tempus, accumsan nisi eget, bibendum arcu. Pellentesque nec enim non nisl varius iaculis. Phasellus interdum nec ex nec faucibus. Vestibulum et quam auctor massa pellentesque tempor. Sed tincidunt nibh felis, ut euismod ante volutpat aliquam. Etiam varius suscipit ornare.</p>
|
||||
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed a leo tempus, pretium mi ac, pretium ipsum. Curabitur cursus eleifend enim. Pellentesque feugiat euismod tincidunt. Sed semper velit nunc, nec imperdiet eros varius ac. Aenean aliquam augue at venenatis volutpat. Proin a imperdiet leo. Nullam eget aliquet urna.</p>
|
||||
<p>Mauris faucibus varius massa vel vulputate. Praesent ac ligula pretium, viverra eros vitae, consequat metus. Morbi commodo vehicula sem, eget scelerisque ipsum rutrum ut. Maecenas cursus dolor mattis risus dapibus pulvinar. Suspendisse ut dolor nec arcu lobortis molestie.</p>
|
||||
<p>Donec eros felis, dictum non placerat vitae, sodales in risus. Etiam felis lectus, consectetur quis tempor non, porta a metus. Cras finibus nibh a est semper, eget consequat libero pretium. Pellentesque placerat feugiat enim sit amet sodales. Proin convallis dui eu nibh tincidunt, a posuere dolor sagittis. Ut egestas et eros eu convallis. Integer eros elit, blandit at euismod sit amet, blandit sed velit. Donec dapibus nulla in augue commodo, at efficitur orci dictum. Praesent ultrices accumsan iaculis. Maecenas ut metus a lectus venenatis euismod. Sed auctor, dui efficitur molestie convallis, diam odio faucibus turpis, vitae bibendum ante est non ligula.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa:post-footer">
|
||||
<wa-radio-group name="reactions" class="wa:post-reactions">
|
||||
<wa-radio-button value="applaud"><wa-icon name="hands-clapping" label="Applaud"></wa-icon><small class="wa:count">74</small></wa-radio-button>
|
||||
<wa-radio-button value="love"><wa-icon name="heart" label="Love"></wa-icon><small class="wa:count">161</small></wa-radio-button>
|
||||
<wa-radio-button value="laugh"><wa-icon name="face-laugh-beam" label="Laugh"></wa-icon><small class="wa:count">9</small></wa-radio-button>
|
||||
<wa-radio-button value="cry"><wa-icon name="face-sad-tear" label="Cry"></wa-icon><small class="wa:count">1</small></wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<div class="wa:post-actions">
|
||||
<wa-tooltip content="Save">
|
||||
<wa-icon-button name="bookmark" label="Save"></wa-icon-button>
|
||||
</wa-tooltip>
|
||||
<wa-tooltip content="Share">
|
||||
<wa-icon-button name="share-from-square" label="Share"></wa-icon-button>
|
||||
</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="wa:post-comments wa:block-flow:2xl">
|
||||
<h2>Comments</h2>
|
||||
<article class="wa:comment-composer">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<wa-textarea rows="1" placeholder="Add a comment"></wa-textarea>
|
||||
</article>
|
||||
<article class="wa:comment">
|
||||
<wa-avatar image="https://bit.ly/3V9kV7a" label="User avatar"></wa-avatar>
|
||||
<div class="wa:comment-content">
|
||||
<div class="wa:comment-bubble">
|
||||
<div class="wa:comment-details">
|
||||
<strong>Pedro Pascal</strong>
|
||||
<small>1d</small>
|
||||
</div>
|
||||
<span>You expect me to search the galaxy for the home of this creature and deliver it to a race of enemy sorcerers?</span>
|
||||
</div>
|
||||
<div class="wa:comment-actions">
|
||||
<div class="wa:reaction-like">
|
||||
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
|
||||
<small>(3)</small>
|
||||
</div>
|
||||
<wa-button variant="text" size="small">Reply</wa-button>
|
||||
</div>
|
||||
<article class="wa:comment">
|
||||
<wa-avatar image="https://bit.ly/3Pb2cUC" label="User avatar"></wa-avatar>
|
||||
<div class="wa:comment-content">
|
||||
<div class="wa:comment-bubble">
|
||||
<div class="wa:comment-details">
|
||||
<strong>Emily Swallow</strong>
|
||||
<small>12h</small>
|
||||
</div>
|
||||
<span>This is the Way.</span>
|
||||
</div>
|
||||
<div class="wa:comment-actions">
|
||||
<div class="wa:reaction-like">
|
||||
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
|
||||
<small>(21)</small>
|
||||
</div>
|
||||
<wa-button variant="text" size="small">Reply</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
<article class="wa:comment">
|
||||
<wa-avatar image="https://bit.ly/3Tq9GWr" label="User avatar"></wa-avatar>
|
||||
<div class="wa:comment-content">
|
||||
<div class="wa:comment-bubble">
|
||||
<div class="wa:comment-details">
|
||||
<strong>Nick Nolte</strong>
|
||||
<small>2w</small>
|
||||
</div>
|
||||
<span>I have spoken.</span>
|
||||
</div>
|
||||
<div class="wa:comment-actions">
|
||||
<div class="wa:reaction-like">
|
||||
<wa-icon-button name="thumbs-up" label="Like"></wa-icon-button>
|
||||
<small>(1)</small>
|
||||
</div>
|
||||
<wa-button variant="text" size="small">Reply</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
<section class="wa:blog-recommended-posts">
|
||||
<h2>You may also like</h2>
|
||||
<div class="wa:post-list">
|
||||
<article class="wa:post-link">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="http://bit.ly/49ThK7O" alt="">
|
||||
</div>
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date date="2024-02-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Arts & Culture</wa-tag>
|
||||
</div>
|
||||
<h4>Eget Consequat Libero</h4>
|
||||
</article>
|
||||
<article class="wa:post-link">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://bit.ly/3wHdFFp" alt="">
|
||||
</div>
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date date="2024-01-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Design</wa-tag>
|
||||
</div>
|
||||
<h4>Sed a Leo Tempus Aute Irure</h4>
|
||||
</article>
|
||||
<article class="wa:post-link">
|
||||
<div class="wa:frame:landscape">
|
||||
<img src="https://bit.ly/49LxbPx" alt="">
|
||||
</div>
|
||||
<div class="wa:post-details">
|
||||
<wa-format-date date="2023-12-16T09:17:00-04:00" month="long" year="numeric"></wa-format-date>
|
||||
<wa-tag size="small">Arts & Culture</wa-tag>
|
||||
</div>
|
||||
<h4>Ultrices Posuere Cubilia Curae</h4>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
586
docs/pages/experimental/demo_patterns/dashboard.md
Normal file
586
docs/pages/experimental/demo_patterns/dashboard.md
Normal file
@@ -0,0 +1,586 @@
|
||||
---
|
||||
meta:
|
||||
title: Dashboard
|
||||
description: TODO
|
||||
toc: false
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--docs-content-max-width: 80rem;
|
||||
}
|
||||
html {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
#menu-toggle,
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
padding: initial;
|
||||
padding-bottom: var(--wa-space-3xl);
|
||||
margin: var(--wa-space-xl);
|
||||
}
|
||||
.anchor-heading a {
|
||||
display: none;
|
||||
}
|
||||
.preview-container {
|
||||
container: preview / inline-size;
|
||||
}
|
||||
|
||||
/* strata - support table */
|
||||
.support-table {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
padding: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.support-table td {
|
||||
padding: var(--wa-space-m) var(--wa-space-l);
|
||||
}
|
||||
|
||||
.support-table .desc {
|
||||
max-width: 30ch;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.support-table .excerpt {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.support-table wa-avatar {
|
||||
--size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.support-table wa-card > * {
|
||||
border-radius: calc(var(--border-radius) - var(--border-width));
|
||||
}
|
||||
|
||||
.wa\:card-title {
|
||||
font-size: var(--wa-font-size-l);
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.wa\:statistic {
|
||||
& .wa\:card-title {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
& .wa\:value {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
font-weight: var(--wa-font-weight-heavy);
|
||||
line-height: var(--wa-font-line-height-compact);
|
||||
|
||||
& + wa-badge > wa-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-card#glitches::part(body) {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
wa-card.wa\:statistic::part(base) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wa\:box-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--wa-color-brand-spot);
|
||||
color: var(--wa-color-brand-text-on-spot);
|
||||
border-radius: var(--wa-corners-s);
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.wa\:contact {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
wa-card::part(base) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
wa-checkbox[checked] {
|
||||
--wa-form-controls-value-color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
caption {
|
||||
color: var(--wa-color-text-normal);
|
||||
text-align: left;
|
||||
margin: var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-l) var(--wa-space-xl);
|
||||
|
||||
& h2 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
margin-inline: calc(var(--padding) * -1);
|
||||
}
|
||||
.sparkline {
|
||||
height: 1em;
|
||||
transition: all .5s ease;
|
||||
}
|
||||
|
||||
.sparkline .index {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 1%;
|
||||
height: 6.25em;
|
||||
}
|
||||
|
||||
.sparkline .index .count {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background: var(--wa-color-brand-spot);
|
||||
font: 0/0 a;
|
||||
text-shadow: none;
|
||||
color: transparent;
|
||||
}
|
||||
figcaption {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- cSpell:dictionaries lorem-ipsum -->
|
||||
|
||||
<div class="preview-container wa:arrange:flex:align-start:nowrap">
|
||||
<div class="wa:block-flow:l" style="display: flex; flex-direction: column; align-items: center;">
|
||||
<wa-icon-button name="crown" href="/" style="color: var(--wa-color-brand-spot);"></wa-icon-button>
|
||||
<wa-divider style="width: 100%;"></wa-divider>
|
||||
<wa-icon-button name="home"></wa-icon-button>
|
||||
<wa-icon-button name="calendar"></wa-icon-button>
|
||||
<wa-icon-button name="envelope"></wa-icon-button>
|
||||
<wa-icon-button name="chart-simple"></wa-icon-button>
|
||||
<wa-icon-button name="archive"></wa-icon-button>
|
||||
<wa-divider style="width: 100%;"></wa-divider>
|
||||
<wa-icon-button name="gear"></wa-icon-button>
|
||||
<wa-icon-button name="right-from-bracket"></wa-icon-button>
|
||||
</div>
|
||||
<div class="wa:fill_space wa:block-flow:l">
|
||||
<div class="wa:arrange:aside-end:gap-l">
|
||||
<div class="wa:arrange:size-m:gap-l">
|
||||
<wa-card class="wa:block-flow:l wa:statistic">
|
||||
<div class="wa:arrange:flex:align-start:gap-m:nowrap">
|
||||
<span class="wa:box-icon">
|
||||
<wa-icon name="globe"></wa-icon>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="wa:fill_space wa:card-title">
|
||||
Population (Zion)
|
||||
</h2>
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<span class="wa:value">251,999</span>
|
||||
<wa-badge variant="danger">-3% <wa-icon name="arrow-trend-down"></wa-icon></wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card class="wa:block-flow:l wa:statistic">
|
||||
<div class="wa:arrange:flex:align-start:gap-m:nowrap">
|
||||
<span class="wa:box-icon">
|
||||
<wa-icon name="brain-circuit"></wa-icon>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="wa:fill_space wa:card-title">
|
||||
Minds Freed
|
||||
</h2>
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<span class="wa:value">0.36%</span>
|
||||
<wa-badge variant="success">+0.02% <wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card class="wa:block-flow:l wa:statistic">
|
||||
<div class="wa:arrange:flex:align-start:gap-m:nowrap">
|
||||
<span class="wa:box-icon">
|
||||
<wa-icon name="robot"></wa-icon>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="wa:fill_space wa:card-title">
|
||||
Agents Discovered
|
||||
</h2>
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<span class="wa:value">3</span>
|
||||
<wa-badge variant="neutral">±0% <wa-icon name="wave-triangle"></wa-icon></wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card class="wa:block-flow:l wa:statistic">
|
||||
<div class="wa:arrange:flex:align-start:gap-m:nowrap">
|
||||
<span class="wa:box-icon">
|
||||
<wa-icon name="spaghetti-monster-flying"></wa-icon>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="wa:fill_space wa:card-title">
|
||||
Sentinels Controlled
|
||||
</h2>
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<span class="wa:value">208</span>
|
||||
<wa-badge variant="success">+1% <wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
<wa-card>
|
||||
<div class="wa:block-flow:l">
|
||||
<div class="wa:arrange:flex:gap-xl">
|
||||
<h2 class="wa:card-title">Daily Tasks</h2>
|
||||
<wa-progress-bar value="40" class="wa:fill_space" style="--height: 0.5em;"></wa-progress-bar>
|
||||
</div>
|
||||
<div class="wa:block-flow:s">
|
||||
<wa-checkbox style="display:block;">Let go fear, doubt, and disbelief</wa-checkbox>
|
||||
<wa-checkbox style="display:block;">Walk through the door</wa-checkbox>
|
||||
<wa-checkbox style="display:block;">Train with Morpheus</wa-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="#">View completed tasks</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
<section class="strata support-table">
|
||||
<wa-card style="--padding: 0; width: 100%;">
|
||||
<table style="margin-bottom: 0;">
|
||||
<caption>
|
||||
<h2 class="wa:card-title">Conversations</h2>
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Check all</wa-visually-hidden></wa-checkbox></th>
|
||||
<th>Customer</th>
|
||||
<th>Conversation</th>
|
||||
<th>Assigned To</th>
|
||||
<th style="text-align: center;">Status</th>
|
||||
<th><wa-visually-hidden>Actions</wa-visually-hidden></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Keanu Reeves</td>
|
||||
<td class="desc"><span style="font-weight: bold">Am I dead?</span><br><span class="excerpt">Okey dokey... free my mind. Right, no problem, free my mind, free my mind, no problem, right...</span></td>
|
||||
<td><wa-avatar image="/assets/images/kitchen-sink/avatar-chad.jpg" label="Chad" style="margin-right: var(--wa-space-xs)"></wa-avatar> Chad Stahelski</td>
|
||||
<td style="text-align: center;"><wa-tag variant="warning" size="small">Pending</wa-tag></td>
|
||||
<td>
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Lawrence Fishburne</td>
|
||||
<td class="desc"><span style="font-weight: bold">We have a rule</span><br><span class="excerpt">We never free a mind once it's reached a certain age. It's dangerous, the mind has trouble letting go.</span></td>
|
||||
<td><wa-avatar image="/assets/images/kitchen-sink/avatar-char.jpg" label="Char" style="margin-right: var(--wa-space-xs)"></wa-avatar> Char McCoy</td>
|
||||
<td style="text-align: center;"><wa-tag variant="success" size="small">Resolved</wa-tag></td>
|
||||
<td>
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)" checked><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Carrie-Ann Moss</td>
|
||||
<td class="desc"><span style="font-weight: bold">Was it the same cat?</span><br><span class="excerpt">A déjà vu is usually a glitch in the Matrix. It happens when they change something.</span></td>
|
||||
<td><wa-avatar initials="DE" label="Avatar with initials: DE" style="margin-right: var(--wa-space-xs)"></wa-avatar> Debbie Evans</td>
|
||||
<td style="text-align: center;"><wa-tag variant="warning" size="small">Pending</wa-tag></td>
|
||||
<td>
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Joe Pantoliano</td>
|
||||
<td class="desc"><span style="font-weight: bold">Ignorance is bliss</span><br><span class="excerpt">Why oh why didn't I take the blue pill?</span></td>
|
||||
<td></td>
|
||||
<td style="text-align: center;"><wa-tag variant="danger" size="small">Bounced</wa-tag></td>
|
||||
<td>
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
|
||||
<td>Hugo Weaving</td>
|
||||
<td class="desc"><span style="font-weight: bold">I'd like to share a revelation</span><br><span class="excerpt">I need the codes, I have to get inside Zion and you have to tell me how.</span></td>
|
||||
<td><wa-avatar image="/assets/images/kitchen-sink/avatar-dara.jpg" label="Dara" style="margin-right: var(--wa-space-xs)"></wa-avatar> Dara Prescott</td>
|
||||
<td style="text-align: center;"><wa-tag variant="neutral" size="small">Expired</wa-tag></td>
|
||||
<td>
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</wa-card>
|
||||
</section>
|
||||
<div class="wa:arrange:gap-l">
|
||||
<wa-card id="glitches">
|
||||
<div class="wa:block-flow:l">
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<h2 class="wa:card-title">Glitches</h2>
|
||||
<small style="color: var(--wa-color-text-quiet);">March 31, 1999</small>
|
||||
</div>
|
||||
<figure>
|
||||
<span class="sparkline">
|
||||
<span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 92%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 80%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 71%;">160,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 78%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 21%;">225,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 78%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 12%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 21%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 56%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 80%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 71%;">160,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 69%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 99%;">225,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 80%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 77%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 80%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 71%;">160,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 38%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 85%;">225,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 78%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 80%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 92%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 92%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 46%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 80%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 71%;">160,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 60%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 100%;">225,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 78%;">175,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 49%;">110,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 60%;">180,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 8%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 56%;">125)</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 56%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 62%;">140,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 78%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 40%;">90,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 53%;">120,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 25%;">220,</span> </span>
|
||||
<span class="index"><span class="count" style="height: 35%;">80,</span> </span>
|
||||
</span>
|
||||
</figure>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="#">View all data</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa:block-flow:l">
|
||||
<h2 class="wa:card-title">Recent Contacts</h2>
|
||||
<div class="wa:arrange:gap-l" style="--wa-grid-size: 20ch;">
|
||||
<wa-card style="--padding: var(--wa-space-s);">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<wa-avatar label="User avatar">
|
||||
<wa-icon slot="icon" name="user-secret"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa:contact">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<strong>Trinity</strong>
|
||||
</div>
|
||||
<small><em>Nebuchadnezzar</em></small>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card style="--padding: var(--wa-space-s);">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<wa-avatar label="User avatar">
|
||||
<wa-icon slot="icon" name="user-tie"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa:contact">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<strong>Mr. Rhineheart</strong>
|
||||
</div>
|
||||
<small><em>MetaCortex</em></small>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="#">View all contacts</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
223
docs/pages/experimental/demo_patterns/ecommerce_product_page.md
Normal file
223
docs/pages/experimental/demo_patterns/ecommerce_product_page.md
Normal file
@@ -0,0 +1,223 @@
|
||||
---
|
||||
meta:
|
||||
title: Ecommerce Product Page
|
||||
description: TODO
|
||||
toc: false
|
||||
---
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--docs-content-max-width: 72rem;
|
||||
}
|
||||
#menu-toggle,
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
padding: initial;
|
||||
margin: var(--wa-space-xl);
|
||||
}
|
||||
.anchor-heading a {
|
||||
display: none;
|
||||
}
|
||||
.preview-container {
|
||||
container: preview / inline-size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- cSpell:dictionaries lorem-ipsum -->
|
||||
|
||||
<div class="preview-container wa:block-flow:3xl">
|
||||
<wa-breadcrumb>
|
||||
<wa-breadcrumb-item>Plants</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Indoor Plants</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Orchids</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Jupiter Moth Orchid</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
<div class="wa:container wa:product-overview">
|
||||
<div class="wa:arrange">
|
||||
<div class="wa:product-overview:hero">
|
||||
<img src="https://images.pexels.com/photos/1021386/pexels-photo-1021386.jpeg" alt="">
|
||||
</div>
|
||||
<div class="wa:product-overview:description wa:block-flow:2xl">
|
||||
<div class="wa:product-overview:summary wa:block-flow:s">
|
||||
<wa-badge>20% Off</wa-badge>
|
||||
<h1>Jupiter Moth Orchid</h1>
|
||||
<p class="wa:product-overview:price"><s>$35</s> $28</p>
|
||||
<div class="wa:product-overview:rating wa:arrange:flex:gap-s">
|
||||
<wa-rating label="average stars" readonly precision="0.1" value="4.7"></wa-rating>
|
||||
<a href="#product-reviews"><small>419 reviews</small></a>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="wa:product-overview:actions wa:arrange:flex:gap-s">
|
||||
<wa-input type="number" value="1" min="1" max="10"></wa-input>
|
||||
<wa-button class="wa:fill_space" variant="brand">Add to cart</wa-button>
|
||||
</div>
|
||||
<div class="wa:product-overview:details wa:block-flow:s">
|
||||
<wa-details summary="Details">
|
||||
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>
|
||||
<wa-details summary="Care instructions">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:container wa:product-reviews" id="product-reviews">
|
||||
<wa-tab-group>
|
||||
<wa-tab slot="nav" panel="reviews">Reviews</wa-tab>
|
||||
<wa-tab slot="nav" panel="questions">Questions</wa-tab>
|
||||
<wa-tab-panel name="reviews" style="margin-top:var(--wa-space-s);">
|
||||
<div class="wa:arrange:aside-start">
|
||||
<div class="wa:product-reviews:overview wa:block-flow:2xl">
|
||||
<h2>Ratings and reviews</h2>
|
||||
<div class="wa:block-flow:s">
|
||||
<div class="wa:product-reviews:summary wa:arrange:flex:gap-s">
|
||||
<h3 class="wa:arrange:flex:gap-s">
|
||||
4.7
|
||||
<wa-rating label="average stars" readonly precision="0.1" value="4.7"></wa-rating>
|
||||
</h3>
|
||||
<small>Based on 419 reviews</small>
|
||||
</div>
|
||||
<div class="wa:product-reviews:breakdown">
|
||||
<ol>
|
||||
<li class="wa:arrange:flex:gap-s">
|
||||
<span>5</span>
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<wa-progress-bar class="wa:fill_space" value="82"></wa-progress-bar>
|
||||
<span>340</span>
|
||||
</li>
|
||||
<li class="wa:arrange:flex:gap-s">
|
||||
<span>4</span>
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<wa-progress-bar class="wa:fill_space" value="12"></wa-progress-bar>
|
||||
<span>53</span>
|
||||
</li>
|
||||
<li class="wa:arrange:flex:gap-s">
|
||||
<span>3</span>
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<wa-progress-bar class="wa:fill_space" value="6"></wa-progress-bar>
|
||||
<span>24</span>
|
||||
</li>
|
||||
<li class="wa:arrange:flex:gap-s">
|
||||
<span>2</span>
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<wa-progress-bar class="wa:fill_space" value="0"></wa-progress-bar>
|
||||
<span>0</span>
|
||||
</li>
|
||||
<li class="wa:arrange:flex:gap-s">
|
||||
<span>1</span>
|
||||
<wa-icon name="star"></wa-icon>
|
||||
<wa-progress-bar class="wa:fill_space" value="1"></wa-progress-bar>
|
||||
<span>2</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa:block-flow:s">
|
||||
<h3>Happy with your purchase?</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<wa-button outline size="small" style="width: 100%;">Write a review</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:product-reviews:list wa:block-flow:2xl">
|
||||
<div class="wa:product-reviews:review wa:block-flow:s">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div class="wa:product-reviews:attribution">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<strong>Cory L.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
|
||||
</div>
|
||||
<small><wa-format-date month="long" day="numeric" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
</div>
|
||||
<wa-rating label="Rating" readonly value="5"></wa-rating>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="wa:product-reviews:review wa:block-flow:s">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div class="wa:product-reviews:attribution">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<strong>Konnor R.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
|
||||
</div>
|
||||
<small><wa-format-date date="2023-11-16T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
</div>
|
||||
<wa-rating label="Rating" readonly value="4"></wa-rating>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="wa:product-reviews:review wa:block-flow:s">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div class="wa:product-reviews:attribution">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<strong>Kelsey J.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-inline-end:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
|
||||
</div>
|
||||
<small><wa-format-date date="2023-10-31T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
</div>
|
||||
<wa-rating label="Rating" readonly value="5"></wa-rating>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="wa:product-reviews:review wa:block-flow:s">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div class="wa:product-reviews:attribution">
|
||||
<div class="wa:arrange:flex:gap-s">
|
||||
<strong>Lindsay M.</strong>
|
||||
</div>
|
||||
<small><wa-format-date date="2023-07-03T09:17:00-04:00" month="long" day="numeric" year="numeric"></wa-format-date></small>
|
||||
</div>
|
||||
</div>
|
||||
<wa-rating label="Rating" readonly value="5"></wa-rating>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<wa-button outline size="small" style="width: 100%;">Load more reviews</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="questions">
|
||||
questions
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
<div class="wa:container wa:product-list-simple">
|
||||
<h2>You may also like</h2>
|
||||
<div class="wa:product-list-simple:items wa:arrange:by-two:size-s">
|
||||
<wa-card>
|
||||
<div class="wa:frame:square" slot="image">
|
||||
<img src="https://images.pexels.com/photos/4076594/pexels-photo-4076594.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
Triumph Tulip<br>
|
||||
<strong>$14</strong><br>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa:frame:square" slot="image">
|
||||
<img src="https://images.pexels.com/photos/4994350/pexels-photo-4994350.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
White Doll's Daisy<br>
|
||||
<strong>$18</strong>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa:frame:square" slot="image">
|
||||
<img src="https://images.pexels.com/photos/2223890/pexels-photo-2223890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
Common Poppy<br>
|
||||
<strong>$32</strong>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa:frame:square" slot="image">
|
||||
<img src="https://images.pexels.com/photos/1179026/pexels-photo-1179026.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
Stargazer Lily<br>
|
||||
<strong>$39</strong>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
30
docs/pages/experimental/patterns.md
Normal file
30
docs/pages/experimental/patterns.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
meta:
|
||||
title: Patterns
|
||||
description: TBD
|
||||
toc: false
|
||||
---
|
||||
|
||||
<!-- cSpell:dictionaries lorem-ipsum -->
|
||||
|
||||
<style>
|
||||
.code-preview__preview > *:first-of-type {
|
||||
/* transform: scale(0.5); */
|
||||
}
|
||||
.code-preview {
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
# Patterns
|
||||
|
||||
## Full demos
|
||||
|
||||
- [Ecommerce: Product Page](/experimental/demo_patterns/ecommerce_product_page)
|
||||
- [Blog: Listing Page](/experimental/demo_patterns/blog_listing)
|
||||
- [Blog: Post Page](/experimental/demo_patterns/blog_post)
|
||||
- [Dashboard](/experimental/demo_patterns/dashboard)
|
||||
|
||||
## Isolated patterns
|
||||
|
||||
- [Blog Post](/experimental/demo_patterns/blog_patterns)
|
||||
@@ -273,12 +273,6 @@
|
||||
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
|
||||
|
||||
--wa-form-controls-border-style: var(--wa-border-style);
|
||||
--wa-form-controls-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
@@ -331,6 +325,9 @@
|
||||
*/
|
||||
--wa-form-controls-background: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-controls-border-style: var(--wa-border-style);
|
||||
--wa-form-controls-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-form-controls-corners: var(--wa-corners-s);
|
||||
|
||||
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
|
||||
@@ -360,6 +357,9 @@
|
||||
--wa-form-controls-required-content-color: inherit;
|
||||
--wa-form-controls-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-corners: var(--wa-corners-m);
|
||||
|
||||
--wa-flow-spacing: 1.5rem;
|
||||
|
||||
384
src/themes/demo_patterns.css
Normal file
384
src/themes/demo_patterns.css
Normal file
@@ -0,0 +1,384 @@
|
||||
.wa\:product-overview {
|
||||
& .wa\:product-overview\:hero {
|
||||
justify-self: center;
|
||||
|
||||
& > * {
|
||||
border-radius: var(--wa-panel-corners);
|
||||
max-height: 66vh;
|
||||
position: sticky;
|
||||
top: var(--wa-grid-gap);
|
||||
}
|
||||
}
|
||||
|
||||
& .wa\:product-overview\:price {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
font-weight: var(--wa-font-weight-medium);
|
||||
|
||||
& s {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-weight: var(--wa-font-weight-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:product-reviews {
|
||||
& .wa\:product-reviews\:breakdown {
|
||||
& ol {
|
||||
font-size: var(--wa-font-size-s);
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& wa-icon {
|
||||
color: var(--wa-color-yellow-70);
|
||||
}
|
||||
|
||||
& :first-child {
|
||||
flex: 0 0 1ch;
|
||||
}
|
||||
|
||||
& :last-child {
|
||||
flex: 0 0 3ch;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
& wa-progress-bar {
|
||||
--height: 1em;
|
||||
--indicator-color: var(--wa-color-yellow-70);
|
||||
}
|
||||
}
|
||||
|
||||
& .wa\:product-reviews\:attribution {
|
||||
line-height: var(--wa-font-line-height-compact);
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:product-list-simple {
|
||||
& .wa\:product-list-simple\:items {
|
||||
--wa-grid-gap: var(--wa-space-xl);
|
||||
|
||||
& [slot='image'] {
|
||||
border-radius: var(--wa-corners-s);
|
||||
}
|
||||
}
|
||||
& wa-card {
|
||||
--background: none;
|
||||
--border-color: transparent;
|
||||
--border-radius: 0;
|
||||
--box-shadow: none;
|
||||
--padding: var(--wa-space-s);
|
||||
|
||||
&::part(base) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:collection {
|
||||
position: relative;
|
||||
|
||||
& wa-card::part(base) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& :first-child {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
.wa\:collection::before {
|
||||
content: '';
|
||||
background-color: var(--wa-color-neutral-fill-subtle);
|
||||
position: absolute;
|
||||
height: calc(100% - var(--wa-space-xl) * 2);
|
||||
width: 200vw;
|
||||
left: -100vw;
|
||||
margin-block: var(--wa-space-xl);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.wa\:blog-hero-overflowing {
|
||||
overflow: auto;
|
||||
|
||||
& > [class*='wa\:hero-backdrop'] {
|
||||
background-image: linear-gradient(160deg, var(--wa-color-brand-spot), var(--wa-color-brand-spot-darker));
|
||||
|
||||
--wa-grid-gap: var(--wa-space-3xl);
|
||||
--wa-grid-size: 30ch;
|
||||
display: grid;
|
||||
gap: var(--wa-grid-gap);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--wa-grid-size), 100%), 1fr));
|
||||
|
||||
margin-block-end: var(--wa-grid-gap);
|
||||
border-radius: var(--wa-panel-corners);
|
||||
color: var(--wa-color-brand-text-on-spot);
|
||||
padding: var(--wa-space-3xl);
|
||||
|
||||
& > *:first-child {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
margin-block-end: calc((var(--wa-grid-gap) * 2 * -1));
|
||||
}
|
||||
}
|
||||
|
||||
& wa-avatar::part(base) {
|
||||
background-color: var(--wa-color-neutral-fill-subtle);
|
||||
color: var(--wa-color-neutral-text-on-fill);
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:blog_header {
|
||||
border-radius: var(--wa-panel-corners);
|
||||
padding: var(--wa-space-3xl);
|
||||
background-color: var(--wa-color-brand-spot-darker);
|
||||
color: var(--wa-color-brand-text-on-spot);
|
||||
text-align: center;
|
||||
|
||||
& > *:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:blog-post {
|
||||
font-size: var(--wa-font-size-l);
|
||||
margin-inline: auto;
|
||||
max-inline-size: 60ch;
|
||||
|
||||
& > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-block-start: var(--wa-space-3xl);
|
||||
}
|
||||
|
||||
& .wa\:post-body {
|
||||
& > *:first-child::first-letter {
|
||||
font-family: var(--wa-font-family-longform);
|
||||
-webkit-initial-letter: 3;
|
||||
initial-letter: 3;
|
||||
margin-inline-end: var(--wa-space-2xs);
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:post-footer {
|
||||
font-size: var(--wa-font-size-m);
|
||||
|
||||
gap: var(--wa-space-s);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wa\:post-reactions .wa\:count {
|
||||
margin-inline-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.wa\:post-comments {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa\:comment {
|
||||
gap: var(--wa-space-s);
|
||||
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.wa\:comment-content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.wa\:comment-details {
|
||||
gap: var(--wa-space-s);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wa\:comment-actions {
|
||||
gap: var(--wa-space-m);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wa\:reaction-like {
|
||||
gap: var(--wa-space-3xs);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-neutral-text-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:comment-bubble {
|
||||
background-color: var(--wa-color-neutral-fill-subtle);
|
||||
border-radius: var(--wa-form-controls-corners);
|
||||
border-start-start-radius: 0;
|
||||
padding: var(--wa-space-m);
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 1rem solid transparent;
|
||||
border-right-color: var(--wa-color-neutral-fill-subtle);
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:blog-subscribe-cta {
|
||||
background-color: var(--wa-color-brand-fill-subtle);
|
||||
padding: var(--wa-space-3xl);
|
||||
border-radius: var(--wa-panel-corners);
|
||||
box-shadow: var(--wa-shadow-level-1);
|
||||
|
||||
--wa-grid-gap: var(--wa-space-m);
|
||||
--wa-grid-size: 30ch;
|
||||
display: grid;
|
||||
gap: var(--wa-grid-gap);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--wa-grid-size), 100%), 1fr));
|
||||
|
||||
& h2 {
|
||||
color: var(--wa-color-brand-text-on-fill);
|
||||
}
|
||||
|
||||
& p {
|
||||
color: var(--wa-color-neutral-text-on-fill);
|
||||
}
|
||||
|
||||
& form {
|
||||
--wa-grid-gap: var(--wa-space-s);
|
||||
--wa-grid-size: 30ch;
|
||||
gap: var(--wa-grid-gap);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > wa-input {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:cta-description {
|
||||
& > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
& > * + * {
|
||||
margin-block-start: var(--wa-space-s);
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:blog-recommended-posts {
|
||||
background-color: var(--wa-color-neutral-fill-subtle);
|
||||
padding: var(--wa-space-3xl);
|
||||
border-radius: var(--wa-panel-corners);
|
||||
box-shadow: var(--wa-shadow-level-1);
|
||||
|
||||
& > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-block-start: var(--wa-space-3xl);
|
||||
}
|
||||
|
||||
& article {
|
||||
& > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-block-start: var(--wa-space-m);
|
||||
}
|
||||
}
|
||||
|
||||
& .wa\:post-details {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:post-link {
|
||||
& h4 {
|
||||
line-height: 1;
|
||||
}
|
||||
& p {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:post-details {
|
||||
font-size: var(--wa-font-size-s);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.wa\:post-author {
|
||||
--wa-grid-gap: var(--wa-space-s);
|
||||
--wa-grid-size: 30ch;
|
||||
gap: var(--wa-grid-gap);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wa\:post-list {
|
||||
--wa-grid-gap: var(--wa-space-3xl);
|
||||
--wa-grid-size: 15ch;
|
||||
display: grid;
|
||||
gap: var(--wa-grid-gap);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--wa-grid-size), 100%), 1fr));
|
||||
}
|
||||
|
||||
.wa\:post-actions {
|
||||
gap: var(--wa-space-m);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wa\:comment-composer {
|
||||
gap: var(--wa-space-s);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& wa-textarea {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
261
src/themes/demo_sublayout.css
Normal file
261
src/themes/demo_sublayout.css
Normal file
@@ -0,0 +1,261 @@
|
||||
.wa\:container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
[class*='wa\:arrange'] {
|
||||
--wa-grid-gap: var(--wa-space-3xl);
|
||||
--wa-grid-size: 30ch;
|
||||
display: grid;
|
||||
gap: var(--wa-grid-gap);
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--wa-grid-size), 100%), 1fr));
|
||||
|
||||
/* Gap */
|
||||
&[class*='\:gap-3xs'] {
|
||||
--wa-grid-gap: var(--wa-space-3xs);
|
||||
}
|
||||
&[class*='\:gap-2xs'] {
|
||||
--wa-grid-gap: var(--wa-space-2xs);
|
||||
}
|
||||
&[class*='\:gap-xs'] {
|
||||
--wa-grid-gap: var(--wa-space-xs);
|
||||
}
|
||||
&[class*='\:gap-s'] {
|
||||
--wa-grid-gap: var(--wa-space-s);
|
||||
}
|
||||
&[class*='\:gap-m'] {
|
||||
--wa-grid-gap: var(--wa-space-m);
|
||||
}
|
||||
&[class*='\:gap-l'] {
|
||||
--wa-grid-gap: var(--wa-space-l);
|
||||
}
|
||||
&[class*='\:gap-xl'] {
|
||||
--wa-grid-gap: var(--wa-space-xl);
|
||||
}
|
||||
&[class*='\:gap-2xl'] {
|
||||
--wa-grid-gap: var(--wa-space-2xl);
|
||||
}
|
||||
&[class*='\:gap-3xl'] {
|
||||
--wa-grid-gap: var(--wa-space-3xl);
|
||||
}
|
||||
|
||||
/* Size */
|
||||
&[class*='\:size-s'] {
|
||||
--wa-grid-size: 15ch;
|
||||
}
|
||||
&[class*='\:size-m'] {
|
||||
--wa-grid-size: 30ch;
|
||||
}
|
||||
&[class*='\:size-l'] {
|
||||
--wa-grid-size: 60ch;
|
||||
}
|
||||
|
||||
/* Arrangement */
|
||||
&[class*='\:column'] {
|
||||
grid-template-columns: none;
|
||||
}
|
||||
|
||||
&[class*='\:side-by-side'] {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
&[class*='\:by-two'] {
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(min(var(--wa-grid-size), calc(50% - (var(--wa-grid-gap) / 2))), 1fr)
|
||||
minmax(min(var(--wa-grid-size), calc(50% - (var(--wa-grid-gap) / 2))), 1fr)
|
||||
);
|
||||
}
|
||||
|
||||
&[class*='\:aside'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
& > * {
|
||||
flex-basis: calc(((var(--wa-grid-size) * 2 + var(--wa-grid-gap)) - 100%) * 999);
|
||||
}
|
||||
&[class*='\:aside-start'] {
|
||||
& > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
& > * + * {
|
||||
flex-grow: 2;
|
||||
}
|
||||
}
|
||||
&[class*='\:aside-end'] {
|
||||
& > * {
|
||||
flex-grow: 2;
|
||||
}
|
||||
& > * + * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='\:flex'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&[class*='\:nowrap'] {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&[class*='\:justify-start'] {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&[class*='\:justify-end'] {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&[class*='\:justify-center'] {
|
||||
justify-content: center;
|
||||
}
|
||||
&[class*='\:justify-space_between'] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
&[class*='\:justify-space_around'] {
|
||||
justify-content: space-around;
|
||||
}
|
||||
&[class*='\:justify-space_evenly'] {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
&[class*='\:align-start'] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
&[class*='\:align-end'] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
&[class*='\:align-center'] {
|
||||
align-items: center;
|
||||
}
|
||||
&[class*='\:align-stretch'] {
|
||||
align-items: stretch;
|
||||
}
|
||||
&[class*='\:align-baseline'] {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
& > .wa\:fill_space {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #region Block Flow */
|
||||
[class*='wa\:block-flow'] {
|
||||
& > * {
|
||||
margin-block: 0;
|
||||
}
|
||||
}
|
||||
.wa\:block-flow\:3xs > * + * {
|
||||
margin-block-start: var(--wa-space-3xs);
|
||||
}
|
||||
.wa\:block-flow\:2xs > * + * {
|
||||
margin-block-start: var(--wa-space-2xs);
|
||||
}
|
||||
.wa\:block-flow\:xs > * + * {
|
||||
margin-block-start: var(--wa-space-xs);
|
||||
}
|
||||
.wa\:block-flow\:s > * + * {
|
||||
margin-block-start: var(--wa-space-s);
|
||||
}
|
||||
.wa\:block-flow\:m > * + * {
|
||||
margin-block-start: var(--wa-space-m);
|
||||
}
|
||||
.wa\:block-flow\:l > * + * {
|
||||
margin-block-start: var(--wa-space-l);
|
||||
}
|
||||
.wa\:block-flow\:xl > * + * {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
}
|
||||
.wa\:block-flow\:2xl > * + * {
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
}
|
||||
.wa\:block-flow\:3xl > * + * {
|
||||
margin-block-start: var(--wa-space-3xl);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Frames */
|
||||
[class*='wa\:frame'] {
|
||||
--wa-aspect-width: 16;
|
||||
--wa-aspect-height: 9;
|
||||
aspect-ratio: var(--wa-aspect-width) / var(--wa-aspect-height);
|
||||
overflow: hidden;
|
||||
|
||||
&[class*='\:portrait'] {
|
||||
--wa-aspect-width: 9;
|
||||
--wa-aspect-height: 16;
|
||||
}
|
||||
|
||||
&[class*='\:landscape'] {
|
||||
--wa-aspect-width: 16;
|
||||
--wa-aspect-height: 9;
|
||||
}
|
||||
|
||||
&[class*='\:square'] {
|
||||
--wa-aspect-width: 1;
|
||||
--wa-aspect-height: 1;
|
||||
}
|
||||
|
||||
& > img {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Background Patterns */
|
||||
|
||||
.wa\:background\:brand_spot_gradient {
|
||||
background-image: linear-gradient(160deg, var(--wa-color-brand-spot), var(--wa-color-brand-spot-darker));
|
||||
}
|
||||
|
||||
.wa\:background\:dot_grid {
|
||||
background-image: radial-gradient(rgb(0 0 0 / 0.05) 0.125rem, transparent 0);
|
||||
background-size: 1.5rem 1.5rem;
|
||||
background-position: -1.25rem -1.25rem;
|
||||
}
|
||||
|
||||
.wa\:background\:stripes_diagonal {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
rgb(0 0 0 / 0.05),
|
||||
rgb(0 0 0 / 0.05) 0.5rem,
|
||||
transparent 0.5rem,
|
||||
transparent 1rem
|
||||
);
|
||||
}
|
||||
|
||||
.wa\:background\:gingham {
|
||||
background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.05) 50%),
|
||||
linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.05) 50%);
|
||||
background-size: 1rem 1rem;
|
||||
}
|
||||
|
||||
.wa\:background\:geometric {
|
||||
background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.025) 50%),
|
||||
linear-gradient(to bottom, transparent 50%, rgba(255, 255, 255, 0.025) 50%),
|
||||
repeating-linear-gradient(45deg, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.05) 2rem, transparent 2rem, transparent 4rem);
|
||||
background-size: 4rem 4rem;
|
||||
}
|
||||
|
||||
.wa\:background\:college_ruled {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 4.5rem,
|
||||
rgb(0 0 0 / 0.12) 4.5rem,
|
||||
rgb(0 0 0 / 0.12) 4.625rem,
|
||||
transparent 4.625rem
|
||||
),
|
||||
linear-gradient(rgb(0 0 0 / 0.08) 0.0625rem, transparent 0.0625rem);
|
||||
background-size: 100% 1rem;
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
Reference in New Issue
Block a user