mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-13 20:49:15 +00:00
Compare commits
20 Commits
alpha
...
patterns-e
| Author | SHA1 | Date | |
|---|---|---|---|
|
ae1caa0f66 | ||
|
|
af01e0d060 | ||
|
|
23420baa63 | ||
|
|
31dd31e857 | ||
|
|
16477dc434 | ||
|
|
7c6ca6e487 | ||
|
|
812ea94ff4 | ||
|
|
bf65b6bc0d | ||
|
|
b3c47d2298 | ||
|
|
5e16866ee6 | ||
|
|
abf77783ac | ||
|
|
5749c13ef0 | ||
|
|
42922f06ed | ||
|
|
d8479b0afd | ||
|
|
9a427bca28 | ||
|
|
d5a2ab85f9 | ||
|
|
3c32a38314 | ||
|
|
63cf09f7b6 | ||
|
|
10912be451 | ||
|
|
3e07b6da12 |
@@ -37,6 +37,8 @@
|
||||
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
<link id="theme-stylesheet" rel="stylesheet" href="/dist/themes/default.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>
|
||||
|
||||
276
docs/pages/experimental/demo_patterns/blog_listing.md
Normal file
276
docs/pages/experimental/demo_patterns/blog_listing.md
Normal file
@@ -0,0 +1,276 @@
|
||||
---
|
||||
meta:
|
||||
title: Blog Listing
|
||||
description: TODO
|
||||
toc: false
|
||||
---
|
||||
|
||||
<div class="wa:block-flow:3xl">
|
||||
<div class="wa:background:college_ruled" style="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;">
|
||||
<h1 style="margin-block-start: 0;">Latest from the Blog</h1>
|
||||
<p style="margin-block-end: 0;">Lorem ipsum dolor sit amet</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://images.pexels.com/photos/6550721/pexels-photo-6550721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<small><wa-format-date month="long" year="numeric"></wa-format-date></small>
|
||||
<wa-badge variant="neutral">Design</wa-badge>
|
||||
</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>Author</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</h4>
|
||||
<wa-badge variant="neutral">Design</wa-badge>
|
||||
</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-badge variant="neutral">Arts & Culture</wa-badge>
|
||||
</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>Headline Dolor Sit Amet</h4>
|
||||
<wa-badge variant="neutral">Web Development</wa-badge>
|
||||
</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>
|
||||
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
178
docs/pages/experimental/demo_patterns/blog_post.md
Normal file
178
docs/pages/experimental/demo_patterns/blog_post.md
Normal file
@@ -0,0 +1,178 @@
|
||||
---
|
||||
meta:
|
||||
title: Blog Post
|
||||
description: TODO
|
||||
toc: false
|
||||
---
|
||||
|
||||
<div class="wa:block-flow:3xl">
|
||||
<div class="wa:overflowing_hero">
|
||||
<div class="wa:arrange wa:background:brand_spot_gradient" style="border-radius:var(--wa-panel-corners); padding:var(--wa-space-3xl); color:var(--wa-color-brand-text-on-spot);">
|
||||
<div>
|
||||
<div class="wa:arrange:flex:justify-space_between:gap-s">
|
||||
<small><wa-format-date month="long" year="numeric"></wa-format-date></small>
|
||||
<wa-badge variant="neutral">Design</wa-badge>
|
||||
</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>Author</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:frame:square">
|
||||
<img src="https://images.pexels.com/photos/6550721/pexels-photo-6550721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:block-flow:3xl" style="font-size:var(--wa-font-size-l); max-inline-size: 60ch; margin-inline: auto;">
|
||||
<div class="wa:block-flow:xl">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Duis pulvinar tellus vitae felis volutpat hendrerit. Vivamus sodales condimentum quam, ut consequat massa viverra sed. Vestibulum laoreet tincidunt lacus nec ullamcorper. Quisque tincidunt turpis et sapien hendrerit, a laoreet massa dictum. Vestibulum dictum posuere lectus. Pellentesque ac lorem sodales, iaculis libero in, eleifend purus. Sed volutpat quam est, ac accumsan dolor viverra a. Duis blandit augue id tortor aliquet tempus. Nulla pharetra nec nisi non placerat. Donec in risus feugiat risus mattis pretium imperdiet a tortor.</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. Nam id accumsan leo. Proin pellentesque tincidunt neque ornare gravida. Phasellus malesuada, orci vel ultricies fringilla, tortor ipsum cursus magna, non fermentum velit nibh at nunc. Duis purus mauris, ullamcorper eu tempus id, ornare gravida odio. 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:arrange:flex:justify-space_between" style="font-size:var(--wa-font-size-m);">
|
||||
<wa-radio-group name="a">
|
||||
<wa-radio-button value="1"><wa-icon name="hands-clapping" label="Applaud"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">74</small></wa-radio-button>
|
||||
<wa-radio-button value="2"><wa-icon name="heart" label="Love"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">161</small></wa-radio-button>
|
||||
<wa-radio-button value="3"><wa-icon name="face-laugh-beam" label="Laugh"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">9</small></wa-radio-button>
|
||||
<wa-radio-button value="4"><wa-icon name="face-sad-tear" label="Cry"></wa-icon><small style="margin-inline-start:var(--wa-space-xs);">1</small></wa-radio-button>
|
||||
</wa-radio-group>
|
||||
<div class="wa:arrange:flex:nowrap:gap-l">
|
||||
<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>
|
||||
<div class="wa:block-flow:2xl" style="font-size:var(--wa-font-size-m);">
|
||||
<h2>Comments</h2>
|
||||
<div class="wa:arrange:flex:nowrap:gap-s">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<wa-textarea class="wa:fill_space" rows="1" placeholder="Add a comment"></wa-textarea>
|
||||
</div>
|
||||
<div class="wa:arrange:flex:nowrap:align-start:gap-s">
|
||||
<wa-avatar image="https://m.media-amazon.com/images/M/MV5BMTBlNDU1NTgtNjY1Zi00ZTU0LTlkN2ItZmM5NDM5NmMyNzk3XkEyXkFqcGdeQXVyMDM2NDM2MQ@@._V1_.jpg" label="User avatar"></wa-avatar>
|
||||
<div class="wa:fill_space">
|
||||
<div class="wa:chat_bubble">
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<strong>Din Djarin</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:arrange:flex:gap-m">
|
||||
<div class="wa:arrange:flex:nowrap:gap-3xs">
|
||||
<wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
|
||||
<small>(3)</small>
|
||||
</div>
|
||||
<wa-button variant="text" size="small">Reply</wa-button>
|
||||
</div>
|
||||
<div class="wa:arrange:flex:nowrap:align-start:gap-s">
|
||||
<wa-avatar image="https://cdn.mos.cms.futurecdn.net/zAQrY5fe3HAFvWrTLE6nNi.png" label="User avatar"></wa-avatar>
|
||||
<div class="wa:fill_space">
|
||||
<div class="wa:chat_bubble">
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<strong>The Armorer</strong>
|
||||
<small>12h</small>
|
||||
</div>
|
||||
<span>This is the Way.</span>
|
||||
</div>
|
||||
<div class="wa:arrange:flex:gap-m">
|
||||
<div class="wa:arrange:flex:nowrap:gap-3xs">
|
||||
<wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
|
||||
<small>(21)</small>
|
||||
</div>
|
||||
<wa-button variant="text" size="small">Reply</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa:arrange:flex:nowrap:align-start:gap-s">
|
||||
<wa-avatar image="https://static1.srcdn.com/wordpress/wp-content/uploads/2021/07/Nick-Nolte-and-Misty-Rosas-as-Kuiil-in-The-Mandalorian.jpg" label="User avatar"></wa-avatar>
|
||||
<div class="wa:fill_space">
|
||||
<div class="wa:chat_bubble">
|
||||
<div class="wa:arrange:flex:justify-space_between">
|
||||
<strong>Kuiil</strong>
|
||||
<small>2w</small>
|
||||
</div>
|
||||
<span>I have spoken.</span>
|
||||
</div>
|
||||
<div class="wa:arrange:flex:gap-m">
|
||||
<div class="wa:arrange:flex:nowrap:gap-3xs">
|
||||
<wa-icon-button name="thumbs-up" label="Like" style="color:var(--wa-color-neutral-text-on-surface)"></wa-icon-button>
|
||||
<small>(1)</small>
|
||||
</div>
|
||||
<wa-button variant="text" size="small">Reply</wa-button>
|
||||
</div>
|
||||
</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); margin-top:calc(var(--wa-space-3xl) * 2);">
|
||||
<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: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 style="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);">
|
||||
<div class="wa:block-flow:xl">
|
||||
<h2>You may also like</h2>
|
||||
<div class="wa:arrange:size-s">
|
||||
<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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</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>Headline Dolor Sit Amet</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
217
docs/pages/experimental/demo_patterns/ecommerce_product_page.md
Normal file
217
docs/pages/experimental/demo_patterns/ecommerce_product_page.md
Normal file
@@ -0,0 +1,217 @@
|
||||
---
|
||||
meta:
|
||||
title: Ecommerce Product Page
|
||||
description: TODO
|
||||
toc: false
|
||||
---
|
||||
|
||||
<!-- cSpell:dictionaries lorem-ipsum -->
|
||||
|
||||
<div class="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>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--docs-content-max-width: 72rem;
|
||||
}
|
||||
#menu-toggle,
|
||||
#sidebar {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
padding: initial;
|
||||
margin: var(--wa-space-xl);
|
||||
}
|
||||
</style>
|
||||
15
docs/pages/experimental/patterns.md
Normal file
15
docs/pages/experimental/patterns.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
meta:
|
||||
title: Patterns
|
||||
description: TBD
|
||||
---
|
||||
|
||||
<!-- cSpell:dictionaries lorem-ipsum -->
|
||||
|
||||
# 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)
|
||||
133
src/themes/demo_patterns.css
Normal file
133
src/themes/demo_patterns.css
Normal file
@@ -0,0 +1,133 @@
|
||||
.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);
|
||||
}
|
||||
& 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\:overflowing_hero {
|
||||
overflow: auto;
|
||||
|
||||
& > [class*='wa\:arrange'] {
|
||||
margin-block-end: var(--wa-grid-gap);
|
||||
|
||||
& > *:first-child {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
margin-block-end: calc((var(--wa-grid-gap) * 2 * -1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wa\:chat_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;
|
||||
}
|
||||
}
|
||||
257
src/themes/demo_sublayout.css
Normal file
257
src/themes/demo_sublayout.css
Normal file
@@ -0,0 +1,257 @@
|
||||
.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*='\: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