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

some cleanup

Browse Source
This commit is contained in:
Kelsey Jackson
2024-10-03 16:44:18 -05:00
parent c6aa11c114
commit 06e72f557f
8 changed files with 103 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/_includes/sidebar.njk
View File

@@ -264,11 +264,4 @@
</ul>
</li>
<li><a href="/docs/patterns/blog">Blog</a></li>
<li><a href="/docs/patterns/business">Business</a></li>
<li><a href="/docs/patterns/blog">Entertainment</a></li>
<li><a href="/docs/patterns/blog">Membership</a></li>
<li><a href="/docs/patterns/blog">News</a></li>
<li><a href="/docs/patterns/blog">Non Profit</a></li>
<li><a href="/docs/patterns/blog">Portfolio</a></li>
<li><a href="/docs/patterns/blog">Product Landing</a></li>
</ul>

255
docs/docs/patterns/app.md
View File

@@ -108,14 +108,81 @@ TODO Page Description
<li>
<wa-card>
<div class="card-top">
<div><strong>John Carpenter</strong> <wa-badge 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>
<strong>John Carpenter</strong>
<wa-badge pill>Admin</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" style="color: var(--wa-color-brand-spot);"></wa-icon>
Email
</div>
<div>
<wa-icon name="phone" style="color: var(--wa-color-brand-spot);">
</wa-icon>
Phone
</div>
</div>
</wa-card>
</li>
<li>
<wa-card>
<div class="card-top">
<div>
<strong>Tobe Hooper</strong>
<wa-badge pill>Admin</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" style="color: var(--wa-color-brand-spot);"></wa-icon> Email</div>
<div><wa-icon name="phone" style="color: var(--wa-color-brand-spot);"></wa-icon> Phone</div>
</div>
</wa-card>
</li>
<li>
<wa-card>
<div class="card-top">
<div>
<strong>George A. Romero</strong>
<wa-badge pill>Admin</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>
></wa-avatar>
</div>
</div>
<div class="contact-info">
<div><wa-icon name="envelope" style="color: var(--wa-color-brand-spot);"></wa-icon> Email</div>
<div><wa-icon name="phone" style="color: var(--wa-color-brand-spot);"></wa-icon> Phone</div>
</div>
</wa-card>
</li>
<li>
<wa-card>
<div class="card-top">
<div>
<strong>Alfred Hitchcock</strong>
<wa-badge pill>Admin</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">
@@ -127,16 +194,15 @@ TODO Page Description
<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>
<strong>Sam Raimi</strong>
<wa-badge pill>Admin</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" style="color: var(--wa-color-brand-spot);"></wa-icon> Email</div>
<div><wa-icon name="phone" style="color: var(--wa-color-brand-spot);"></wa-icon> Phone</div>
@@ -146,84 +212,23 @@ TODO Page Description
<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>
<strong>Wes Craven</strong>
<wa-badge pill>Admin</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" style="color: var(--wa-color-brand-spot);"></wa-icon> Email</div>
<div><wa-icon name="phone" style="color: var(--wa-color-brand-spot);"></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" style="color: var(--wa-color-brand-spot);"></wa-icon> Email</div>
<div><wa-icon name="phone" style="color: var(--wa-color-brand-spot);"></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" style="color: var(--wa-color-brand-spot);"></wa-icon> Email</div>
<div><wa-icon name="phone" style="color: var(--wa-color-brand-spot);"></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" style="color: var(--wa-color-brand-spot);"></wa-icon> Email</div>
<div><wa-icon name="phone" style="color: var(--wa-color-brand-spot);"></wa-icon> Phone</div>
</div>
</wa-card>
</li>
</ul>
</div>
<style>
.grid-list {
wa-card {
@@ -260,34 +265,12 @@ TODO Page Description
}
display: flex;
}
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
list-style-type: none;
margin: 0;
}
/* @media (min-width: 1140px) {
.grid-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
list-style-type: none;
}
}
@media (min-width: 768px) {
.grid-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
list-style-type: none;
}
} */
</style>
```
@@ -297,7 +280,7 @@ TODO Page Description
```html {.example}
<wa-card with-footer style="width: 100%;" class="simple-pagination">
<div>Card body</div>
<div></div>
<div slot="footer" class="footer">
Showing 1 to 10 of 50 Results
<span>
@@ -320,7 +303,7 @@ TODO Page Description
```html {.example}
<wa-card with-footer style="width: 100%;" class="simple-pagination">
<div>Card body</div>
<div></div>
<div slot="footer" class="footer">
Showing 1 to 10 of 50 Results
<span>
@@ -423,7 +406,7 @@ TODO Page Description
</style>
```
## FAQ/Details
## FAQ/Details (WIP)
```html{.example}
<div>
@@ -436,7 +419,7 @@ TODO Page Description
</div>
```
## Pricing Tiers
## Pricing Tiers (WIP)
```html{.example}
```
@@ -675,58 +658,6 @@ TODO Page Description
}
}
}
/* .data-display-with-icon {
.def-list-div {
dl {
}
dl wa-card [slot='footer']{
padding: .5rem;
padding-left: 1.5rem;
}
}
.stat-title {
margin-left: 4rem;
margin-bottom: 0;
}
dd .number {
font-size: x-large;
font-weight: 600;
line-height: .5rem;
}
.icon-bg, dl div:nth-child(odd) {
--img-bg: #eee;
background: var(--img-bg);
}
.icon-bg {
width: 3rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
border-radius: 0.5rem;
position: absolute;
}
.data-display-icon wa-card {
dd {
margin-left: 4rem;
margin-bottom: 0;
}
}
.data-display-icon wa-card::part(footer) {
--spacing: 0;
}
} */
</style>
```
@@ -823,7 +754,7 @@ TODO Page Description
</style>
```
## Leaderboard
## Leaderboard (Very rough WIP)
```html{.example}
<div class="leaderboard">
<h3 style="grid-column: 1/-1">Collective Activity for Yesterday</h3>

22
docs/docs/patterns/ecommerce-category-filter.md
View File

@@ -8,25 +8,5 @@ TODO Page Description
## With inline actions and expandable sidebar filters
```html{.example}
<div class="with-inline-price">
<h2></h2>
<div class="grid">
<div class="group">
<div>
<img src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg" alt="Front of men's Basic Tee in black." class="h-full w-full object-cover object-center lg:h-full lg:w-full">
</div>
<div>
<div>
<h3>
<a href="#">Basic Tee</a>
</h3>
<p>Black</p>
</div>
<div>
<p>$35</p>
</div>
</div>
</div>
</div>
</div>
```

25
docs/docs/patterns/ecommerce-category-preview.md
View File

@@ -6,27 +6,6 @@ layout: page.njk
TODO Page Description
## Three Column
```html{.example}
<div class="with-inline-price">
<h2></h2>
<div class="grid">
<div class="group">
<div>
<img src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg" alt="Front of men's Basic Tee in black." class="h-full w-full object-cover object-center lg:h-full lg:w-full">
</div>
<div>
<div>
<h3>
<a href="#">Basic Tee</a>
</h3>
<p>Black</p>
</div>
<div>
<p>$35</p>
</div>
</div>
</div>
</div>
</div>
## Three Column (WIP)
```

22
docs/docs/patterns/ecommerce-order-history.md
View File

@@ -9,25 +9,5 @@ TODO Page Description
## Invoice panels
```html{.example}
<div class="with-inline-price">
<h2></h2>
<div class="grid">
<div class="group">
<div>
<img src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg" alt="Front of men's Basic Tee in black." class="h-full w-full object-cover object-center lg:h-full lg:w-full">
</div>
<div>
<div>
<h3>
<a href="#">Basic Tee</a>
</h3>
<p>Black</p>
</div>
<div>
<p>$35</p>
</div>
</div>
</div>
</div>
</div>
```

22
docs/docs/patterns/ecommerce-order-summmary.md
View File

@@ -8,25 +8,5 @@ TODO Page Description
## With split image
```html{.example}
<div class="with-inline-price">
<h2></h2>
<div class="grid">
<div class="group">
<div>
<img src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg" alt="Front of men's Basic Tee in black." class="h-full w-full object-cover object-center lg:h-full lg:w-full">
</div>
<div>
<div>
<h3>
<a href="#">Basic Tee</a>
</h3>
<p>Black</p>
</div>
<div>
<p>$35</p>
</div>
</div>
</div>
</div>
</div>
```

6
docs/docs/patterns/ecommerce-product-detail.md
View File

@@ -20,7 +20,7 @@ TODO Page Description
<span class="price">$32</span>
<span class="rating"><wa-rating></wa-rating><a style="margin-left: .5rem; " href="*">36 Reviews</a></span>
<wa-radio-group style="margin-bottom: 1rem;" label="Select an option" name="a" value="1">
<wa-radio-button value="Black">Black <wa-icon name="circle"></wa-icon></wa-radio-button>
<wa-radio-button value="Black">Black</wa-radio-button>
<wa-radio-button value="White">White</wa-radio-button>
<wa-radio-button value="Gray">Gray</wa-radio-button>
</wa-radio-group>
@@ -101,8 +101,8 @@ TODO Page Description
<wa-radio-button value="large">L</wa-radio-button>
<wa-radio-button value="extra-large">XL</wa-radio-button>
</wa-radio-group>
<wa-button size="medium" style="width: 100%; margin-top: auto;margin-bottom: 1rem;">Medium</wa-button>
<a href="*">View full details</a>
<wa-button size="medium" style="width: 100%; margin-top: auto;margin-bottom: 1rem;">Medium</wa-button>
<a href="*" style="display: inline-block;width: 100%;text-align: center;">View full details</a>
</form>
</section>
</div>

24
docs/docs/patterns/ecommerce-product-list.md
View File

@@ -159,28 +159,8 @@ TODO Page Description
</style>
```
## With color swatches
## With color swatches (WIP)
```html{.example}
<div class="with-inline-price">
<h2></h2>
<div class="grid">
<div class="group">
<div>
<img src="https://tailwindui.com/img/ecommerce-images/product-page-01-related-product-01.jpg" alt="Front of men's Basic Tee in black." class="h-full w-full object-cover object-center lg:h-full lg:w-full">
</div>
<div>
<div>
<h3>
<a href="#">Basic Tee</a>
</h3>
<p>Black</p>
</div>
<div>
<p>$35</p>
</div>
</div>
</div>
</div>
</div>
```