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

Merge pull request #272 from shoelace-style/konnorrogers/set-outline-false-on-page

Browse Source 
set outline false on page, add pattern.njk
This commit is contained in:
Cory LaViska
2024-12-09 12:57:45 -05:00
committed by GitHub
parent b8f4a38c80 9a68409ccd
commit 08d6af502c
21 changed files with 70 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_layouts/pattern.njk Normal file
View File

@@ -0,0 +1,4 @@
{% set hasSidebar = true %}
{% set hasOutline = true %}
{% extends "../_includes/base.njk" %}

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

@@ -1,7 +1,7 @@
---
title: App
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description
@@ -285,7 +285,7 @@ TODO Page Description
Showing 1 to 10 of 50 Results
<span>
<wa-button><wa-icon slot="prefix" name="gear" variant="solid"></wa-icon> Prev</wa-button>
<wa-button>Next <wa-icon slot="suffix" name="gear" variant="solid"></wa-icon></wa-button>
<wa-button>Next <wa-icon slot="suffix" name="gear" variant="solid"></wa-icon></wa-button>
</span>
</div>
</wa-card>
@@ -349,7 +349,7 @@ TODO Page Description
wa-card {
width: 100%;
}
div.comment-footer {
display: flex;
@@ -401,7 +401,7 @@ TODO Page Description
grid-column: span 2/ span 2;
margin: 0;
}
}
</style>
```
@@ -446,7 +446,7 @@ TODO Page Description
align-items: center;
}
}
</style>
```
@@ -459,13 +459,13 @@ TODO Page Description
<wa-icon name="database" style="font-size: 64px; margin: var(--wa-flow-spacing) 0 calc(var(--wa-flow-spacing)/ 2);"></wa-icon>
<h4>No DBs</h4>
<p>Get started by creating a database.</p>
</div>
</a>
<style>
.empty-state {
text-decoration: none;
&.dashed .border {
margin: 0 auto;
@@ -605,10 +605,10 @@ TODO Page Description
</div>
</wa-card>
</dl>
</div>
</div>
<style>
.with-icon {
@@ -619,7 +619,7 @@ TODO Page Description
margin-bottom: 0;
wa-card::part(body) {
}
wa-card::part(footer) {
@@ -701,14 +701,14 @@ TODO Page Description
width: 100%;
dl {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
margin: 0;
dt {
color: #8991A6;
font-size: 14px;
}
div {
border-right-style: solid;
@@ -739,8 +739,8 @@ TODO Page Description
border: none;
}
}
}
wa-card.with-shared-borders::part(body) {
@@ -758,7 +758,7 @@ TODO Page Description
```html{.example}
<div class="leaderboard">
<h3 style="grid-column: 1/-1">Collective Activity for Yesterday</h3>
<wa-card class="activity-card" style="--wa-color-surface-default: tomato; --wa-color-text-normal: white; grid-column: 1/5;">
<span>
<wa-icon name="book"></wa-icon>
@@ -780,7 +780,7 @@ TODO Page Description
</span>
<div class="leaderboard-number">97,303</div>
</wa-card>
<wa-card class="card-header" with-header style="grid-column: 2/12">
<div slot="header">
<div class="leaderboard-badge">
@@ -802,7 +802,7 @@ TODO Page Description
</li>
<li>
<div>
<span>
<h5 style="--wa-space-xl: 0">Title</h5>
<span style="font-size: x-large;font-weight: 700;">4,500</span>
@@ -1045,4 +1045,4 @@ TODO Page Description
```
### With templates
### With recommendations grid
### With recommendations grid

28
docs/docs/patterns/blog.md
View File

@@ -1,7 +1,7 @@
---
title: Blog
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description
@@ -14,7 +14,7 @@ TODO Page Description
<wa-carousel-item>
<a href="#" class="hero-link">
<div style="background: #fe53a0;">
</div>
<div style="background: gray;">
<img
@@ -28,7 +28,7 @@ TODO Page Description
<wa-carousel-item>
<a href="#" class="hero-link">
<div style="background: #5a90f3;">
</div>
<div style="background: gray;">
<img
@@ -42,7 +42,7 @@ TODO Page Description
<wa-carousel-item>
<a href="#" class="hero-link">
<div style="background: #8c431e;">
</div>
<div style="background: gray;">
<img
@@ -56,7 +56,7 @@ TODO Page Description
<wa-carousel-item>
<a href="#" class="hero-link">
<div style="background: #37b3e6;">
</div>
<div style="background: gray;">
<img
@@ -70,7 +70,7 @@ TODO Page Description
<wa-carousel-item>
<a href="#" class="hero-link">
<div style="background: #f993d6;">
</div>
<div style="background: gray;">
<img
@@ -81,7 +81,7 @@ TODO Page Description
<h2><span>Article Title</span></h2>
</a>
</wa-carousel-item>
</wa-carousel>
<style>
.hero-link {
@@ -202,10 +202,10 @@ TODO Page Description
img {
margin-right: 1rem;
object-fit: cover;
object-fit: cover;
min-width: 50px;
min-height: 50px;
width: 100px;
min-height: 50px;
width: 100px;
height: 100px;
border-radius: var(--wa-border-radius-circle);
}
@@ -333,7 +333,7 @@ TODO Page Description
<wa-input value="https://fontawesome.com"></wa-input>
<wa-button variant="brand"> <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>Copy</wa-button>
</div>
</div>
</wa-card>
<style>
@@ -350,13 +350,13 @@ TODO Page Description
background: var(--background);
}
wa-icon-button::part(base) {
color: var(--color);
}
.share-input {
display: flex;
wa-input {
--border-radius: var(--wa-form-control-border-radius) 0 0 var(--wa-form-control-border-radius);
}
@@ -365,6 +365,6 @@ TODO Page Description
}
}
}
</style>
```

2
docs/docs/patterns/business.md
View File

@@ -1,7 +1,7 @@
---
title: Business
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

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

@@ -1,12 +1,12 @@
---
title: E-commerce - Category Filter
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description
## With inline actions and expandable sidebar filters
```html{.example}
```

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

@@ -1,7 +1,7 @@
---
title: E-commerce - Category Preview
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

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

@@ -1,7 +1,7 @@
---
title: E-commerce - Order History
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description
@@ -9,5 +9,5 @@ TODO Page Description
## Invoice panels
```html{.example}
```

2
docs/docs/patterns/ecommerce-order-summary.md
View File

@@ -1,7 +1,7 @@
---
title: E-commerce - Product List
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

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

@@ -1,7 +1,7 @@
---
title: E-commerce - Product Detail
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description
@@ -35,7 +35,7 @@ TODO Page Description
</wa-card>
</div>
<style>
.with-inline-price {
.with-inline-price {
wa-card {
width: 100%;
.card-header {

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

@@ -1,7 +1,7 @@
---
title: E-commerce - Product Lists
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description
@@ -52,7 +52,7 @@ TODO Page Description
align-items: center;
}
.grid-item:nth-of-type(odd) {
border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
}
.grid-item:not(:nth-last-child(-n + 2)) {
@@ -156,11 +156,10 @@ TODO Page Description
font-weight: var(--wa-font-weight-action);
}
}
</style>
```
## With color swatches (WIP)
```html{.example}
```

18
docs/docs/patterns/ecommerce-product-review.md
View File

@@ -1,7 +1,7 @@
---
title: E-commerce - Product Reviews
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description
@@ -132,7 +132,7 @@ TODO Page Description
<wa-icon family="solid" name="earth-americas"></wa-icon>
<h3>International delivery</h3>
<p>Get your order in 2 years</p>
</wa-card>
</div>
</div>
@@ -263,11 +263,11 @@ TODO Page Description
wa-radio-button #shadow-root div .button--medium {
padding: var(--wa-space-xs) var(--wa-space-xs);
}
.color-circle {
--background: #000;
background: var(--background);
width: 50px;
height: 100%;
}
@@ -372,12 +372,12 @@ TODO Page Description
<h2>Everyday Ruck Snack</h2>
<span>
<span>$220</span> |
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
<span>1624 reviews</span>
</span>
<p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
<span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
</div>
<div class="div-2">
@@ -398,7 +398,7 @@ TODO Page Description
/* height: 1000px; */
/* gap: 1rem; */
.div-1 {
}
.div-2 {
/* background-color: black;
@@ -406,7 +406,7 @@ TODO Page Description
grid-row: span 2 / span 2; */
}
.div-3 {
}
}
</style>
@@ -461,4 +461,4 @@ TODO Page Description
</div>
```
```

2
docs/docs/patterns/ecommerce-shopping-cart.md
View File

@@ -1,7 +1,7 @@
---
title: E-commerce - Shopping Cart
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/education.md
View File

@@ -1,7 +1,7 @@
---
title: Business
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/entertainement.md
View File

@@ -1,7 +1,7 @@
---
title: Entertainment
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/membership.md
View File

@@ -1,7 +1,7 @@
---
title: Membership
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/news.md
View File

@@ -1,7 +1,7 @@
---
title: News
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/non-profit.md
View File

@@ -1,7 +1,7 @@
---
title: Non-profit
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/portfilio.md
View File

@@ -1,7 +1,7 @@
---
title: Business
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/portfolio.md
View File

@@ -1,7 +1,7 @@
---
title: Portfolio
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/docs/patterns/product-landing.md
View File

@@ -1,7 +1,7 @@
---
title: Product Landing
description: TODO
layout: page.njk
layout: pattern.njk
---
TODO Page Description

2
docs/index.md
View File

@@ -4,6 +4,8 @@ description: Build better with Web Awesome, the open source library of web compo
layout: page
---
<style>
.title,
.anchor-heading a,