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

commiting to pull in next branch

Browse Source
This commit is contained in:
Kelsey Jackson
2024-04-30 15:24:39 -05:00
parent 6423c766e0
commit 6f6c2dce3c
2 changed files with 244 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
docs/src/content/docs/patterns/app.md
View File

@@ -2,3 +2,221 @@
title: App
description: TODO
---
TODO Page Description
## Examples
### Action Plan
```html:preview
<wa-card>
<h3>Manage subscription</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque repudiandae nam.</p>
<wa-button>Change Plan</wa-button>
</wa-card>
```
### Feeds
```html:preview
<div class="activity-feed">
<div class="activity-group">
<span class="connector"></span>
<div class="activity">
<wa-icon name="user-circle" class="fa-fw"></wa-icon>
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
<span style="margin-left: auto"><em>Oct. 31st</em></span>
</div>
</div>
<div class="activity-group">
<span class="connector"></span>
<div class="activity">
<wa-icon name="thumbs-up" style="color: blue" class="fa-fw"></wa-icon>
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
<span style="margin-left: auto"><em>Oct. 31st</em></span>
</div>
</div>
<div class="activity-group">
<span class="connector"></span>
<div class="activity">
<wa-icon name="crown" class="fa-fw"></wa-icon>
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
<span style="margin-left: auto"><em>Oct. 31st</em></span>
</div>
</div>
<div class="activity-group">
<span class="connector"></span>
<div class="activity">
<wa-icon name="turtle" style="color: green" class="fa-fw"></wa-icon>
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
<span style="margin-left: auto"><em>Oct. 31st</em></span>
</div>
</div>
</div>
<style>
:root {
--border-color: var(--wa-color-surface-border);
}
.activity-feed {
wa-icon {
margin-right: 1rem;
font-size: 32px;
}
.fa-fw {
text-align: center;
width: 1.25em;
}
.activity {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.activity-group:not(:first-child) {
margin-top: .5rem;
}
.activity-group {
position: relative;
}
.connector {
position: absolute;
background-color: var(--border-color);
height: 25%;
width: 0.125rem;
margin-left: -1px;
top: 2.5rem;
left: 1rem;
}
.activity-group:last-of-type .connector {
display: none;
}
}
</style>
```
### Grid
```html:preview
<div>
<ul class="grid-list">
<li>
<wa-card>
<div class="card-top">
<div><strong>John Carpenter</strong> <wa-badge variant="brand" style=" --background: var(--wa-color-brand-border-subtle);
--border-color: var(--wa-color-brand-text-on-surface);
--content-color: var(--wa-color-brand-text-on-surface);
}" pill>Brand</wa-badge><p>Master of Horror</p></div>
<div><wa-avatar
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
label="Avatar of a gray tabby kitten looking down"
></wa-avatar></div>
</div>
<div class="contact-info">
<div><wa-icon name="envelope"></wa-icon> Email</div>
<div><wa-icon name="phone"></wa-icon> Phone</div>
</div>
</wa-card>
</li>
<li>
<wa-card>
<div class="card-top">
<div><strong>John Carpenter</strong> <wa-badge variant="brand" style=" --background: var(--wa-color-brand-border-subtle);
--border-color: var(--wa-color-brand-text-on-surface);
--content-color: var(--wa-color-brand-text-on-surface);
}" pill>Brand</wa-badge><p>Master of Horror</p></div>
<div><wa-avatar
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
label="Avatar of a gray tabby kitten looking down"
></wa-avatar></div>
</div>
<div class="contact-info">
<div><wa-icon name="envelope"></wa-icon> Email</div>
<div><wa-icon name="phone"></wa-icon> Phone</div>
</div>
</wa-card>
</li>
<li>
<wa-card>
<div class="card-top">
<div><strong>John Carpenter</strong> <wa-badge variant="brand" style=" --background: var(--wa-color-brand-border-subtle);
--border-color: var(--wa-color-brand-text-on-surface);
--content-color: var(--wa-color-brand-text-on-surface);
}" pill>Brand</wa-badge><p>Master of Horror</p></div>
<div><wa-avatar
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
label="Avatar of a gray tabby kitten looking down"
></wa-avatar></div>
</div>
<div class="contact-info">
<div><wa-icon name="envelope"></wa-icon> Email</div>
<div><wa-icon name="phone"></wa-icon> Phone</div>
</div>
</wa-card>
</li>
</ul>
</div>
<style>
.grid-list {
wa-card {
display: flex;
flex-direction: column;
}
wa-card::part(body) {
padding: 0;
}
.card-top {
padding: var(--wa-space-xl);
border-bottom: 1px solid var(--wa-color-surface-border);
display: flex;
justify-content: space-between;
}
.contact-info {
div {
width: 50%;
padding: var(--wa-space-xl);
display: flex;
align-items: center;
wa-icon {
margin-right: .5rem;
}
}
div:first-of-type {
border-right: .25px solid var(--wa-color-surface-border);
}
div:last-of-type {
border-left: .25px solid var(--wa-color-surface-border);
}
display: flex;
}
display: grid;
grid-template-columns: 1fr;
list-style-type: none;
}
@media (min-width: 1024px) {
.grid-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
list-style-type: none;
}
}
</style>
```

32
docs/src/content/docs/patterns/ecommerce.md
View File

@@ -223,6 +223,9 @@ TODO Page Description
</wa-card>
<style>
:root {
--border-color: var(--wa-color-surface-border);
}
.two-column {
display: grid;
grid-template-columns: repeat(12, 1fr);
@@ -244,7 +247,7 @@ TODO Page Description
&:not(:last-of-type) {
padding-bottom: 1rem;
border-bottom: 1px solid rgb(48, 50, 59);
border-bottom: 1px solid var(--border-color);
}
@@ -336,6 +339,9 @@ TODO Page Description
</div>
</div>
<style>
:root {
--border-color: var(--wa-color-surface-border);
}
.single-column {
.cart-item {
display: grid;
@@ -345,7 +351,7 @@ TODO Page Description
&:not(:last-of-type) {
padding-bottom: 1rem;
border-bottom: 1px solid rgb(48, 50, 59);
border-bottom: 1px solid var(--border-color);
}
img {
@@ -422,21 +428,21 @@ TODO Page Description
</div>
<div style="margin-top: 1rem;">
<div>
<div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
<div class="customer-list-item">
<span style="display: flex; align-items: center;">
<wa-avatar image="https://source.unsplash.com/bman-wearing-henley-top-portrait-7YVZYZeITc8" label="man-wearing-henley" style="margin-right: 1rem;"></wa-avatar>
<span style="display: flex; flex-direction: column">Mark Henry <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
</span>
<p><em>I initially had my doubts, but once I got the widgets and played around with them, I became a believer.</em></p>
</div>
<div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
<div class="customer-list-item">
<span style="display: flex; align-items: center;">
<wa-avatar image="https://source.unsplash.com/woman-wearing-black-crew-neck-shirt-3TLl_97HNJo" label="lady-in-turtleneck" style="margin-right: 1rem;"></wa-avatar>
<span style="display: flex; flex-direction: column">Liz Michaels <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
</span>
<p><em>I'd definitely but these again.</em></p>
</div>
<div style="border-bottom: 1px solid #eee; margin-bottom: 1rem;">
<div class="customer-list-item">
<span style="display: flex; align-items: center;">
<wa-avatar image="https://source.unsplash.com/man-with-index-finger-on-lips-RukI4qZGlQs" label="man-with-hair" style="margin-right: 1rem;"></wa-avatar>
<span style="display: flex; flex-direction: column">Todd Smith <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating></span>
@@ -446,6 +452,17 @@ TODO Page Description
</div>
</div>
</div>
<style>
:root {
--border-color: var(--wa-color-surface-border);
}
.customer-list-item {
border-bottom: 1px solid var(--border-color);
margin-bottom: 1rem;
}
</style>
```
### Order History
@@ -521,6 +538,9 @@ TODO Page Description
</div>
</div>
<style>
:root {
--border-color: var(--wa-color-surface-border);
}
.order-history-meta {
display: flex;
justify-content: space-between;
@@ -537,7 +557,7 @@ TODO Page Description
display: grid;
grid-template-columns: 18% 79%;
column-gap: 1rem;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--border-color);
padding-bottom: 1rem;
}
</style>