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

semantic improvements and style cleanup

Browse Source
This commit is contained in:
lindsaym-fa
2023-12-21 17:54:02 -05:00
parent 5749c13ef0
commit abf77783ac
1 changed files with 81 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
docs/pages/experimental/patterns.md
View File

@@ -5,36 +5,34 @@ meta:
toc: false
---
<div class="wa:flow-spacing:3xl">
<div class="wa:product-overview:breadcrumb">
<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>
<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:grid wa:grid:1-2">
<div class="wa:grid:1-2">
<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:flow-spacing:2xl">
<div class="wa:product-overview:summary wa:flow-spacing:s">
<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:flex-align">
<div class="wa:product-overview:rating wa:inline-flow: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:flex-align">
<wa-input type="number" value="1" min="1" max="10" style="max-width: 5rem;"></wa-input>
<div class="wa:product-overview:actions wa:inline-flow:s">
<wa-input type="number" value="1" min="1" max="10" style="max-inline-size: 5rem;"></wa-input>
<wa-button variant="brand">Add to cart</wa-button>
</div>
<div class="wa:product-overview:details wa:flow-spacing:s">
<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.
@@ -52,12 +50,12 @@ toc: false
<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:grid wa:grid:1-2_thirds">
<div class="wa:product-reviews:overview wa:flow-spacing:2xl">
<div class="wa:grid:1-2_thirds">
<div class="wa:product-reviews:overview wa:block-flow:2xl">
<h2>Ratings and reviews</h2>
<div class="wa:flow-spacing:s">
<div class="wa:product-reviews:summary wa:flex-align">
<h3 class="wa:flex-align">
<div class="wa:block-flow:s">
<div class="wa:product-reviews:summary wa:inline-flow:s">
<h3 class="wa:inline-flow:s">
4.7
<wa-rating label="average stars" readonly precision="0.1" value="4.7"></wa-rating>
</h3>
@@ -65,53 +63,53 @@ toc: false
</div>
<div class="wa:product-reviews:breakdown">
<ol>
<li class="wa:flex-align">
<small>5</small>
<wa-icon name="star-fill"></wa-icon>
<li class="wa:inline-flow:s">
<span>5</span>
<wa-icon name="star"></wa-icon>
<wa-progress-bar value="82"></wa-progress-bar>
<small>340</small>
<span>340</span>
</li>
<li class="wa:flex-align">
<small>4</small>
<wa-icon name="star-fill"></wa-icon>
<li class="wa:inline-flow:s">
<span>4</span>
<wa-icon name="star"></wa-icon>
<wa-progress-bar value="12"></wa-progress-bar>
<small>53</small>
<span>53</span>
</li>
<li class="wa:flex-align">
<small>3</small>
<wa-icon name="star-fill"></wa-icon>
<li class="wa:inline-flow:s">
<span>3</span>
<wa-icon name="star"></wa-icon>
<wa-progress-bar value="6"></wa-progress-bar>
<small>24</small>
<span>24</span>
</li>
<li class="wa:flex-align">
<small>2</small>
<wa-icon name="star-fill"></wa-icon>
<li class="wa:inline-flow:s">
<span>2</span>
<wa-icon name="star"></wa-icon>
<wa-progress-bar value="0"></wa-progress-bar>
<small>0</small>
<span>0</span>
</li>
<li class="wa:flex-align">
<small>1</small>
<wa-icon name="star-fill"></wa-icon>
<li class="wa:inline-flow:s">
<span>1</span>
<wa-icon name="star"></wa-icon>
<wa-progress-bar value="1"></wa-progress-bar>
<small>2</small>
<span>2</span>
</li>
</ol>
</div>
</div>
<wa-divider></wa-divider>
<div class="wa:flow-spacing:s">
<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:flow-spacing:2xl">
<div class="wa:product-reviews:review wa:flow-spacing:s">
<div class="wa:flex-align">
<div class="wa:product-reviews:list wa:block-flow:2xl">
<div class="wa:product-reviews:review wa:block-flow:s">
<div class="wa:inline-flow:s">
<wa-avatar label="User avatar"></wa-avatar>
<div class="wa:product-reviews:attribution">
<div class="wa:flex-align">
<strong>Cory L.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-right:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
<div class="wa:inline-flow: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>
@@ -119,12 +117,12 @@ toc: false
<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:flow-spacing:s">
<div class="wa:flex-align">
<div class="wa:product-reviews:review wa:block-flow:s">
<div class="wa:inline-flow:s">
<wa-avatar label="User avatar"></wa-avatar>
<div class="wa:product-reviews:attribution">
<div class="wa:flex-align">
<strong>Konnor R.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-right:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
<div class="wa:inline-flow: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>
@@ -132,12 +130,12 @@ toc: false
<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:flow-spacing:s">
<div class="wa:flex-align">
<div class="wa:product-reviews:review wa:block-flow:s">
<div class="wa:inline-flow:s">
<wa-avatar label="User avatar"></wa-avatar>
<div class="wa:product-reviews:attribution">
<div class="wa:flex-align">
<strong>Kelsey J.</strong> <wa-tag variant="success" size="small"><wa-icon name="check" style="margin-right:var(--wa-space-2xs);"></wa-icon>Verified</wa-tag>
<div class="wa:inline-flow: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>
@@ -145,11 +143,11 @@ toc: false
<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:flow-spacing:s">
<div class="wa:flex-align">
<div class="wa:product-reviews:review wa:block-flow:s">
<div class="wa:inline-flow:s">
<wa-avatar label="User avatar"></wa-avatar>
<div class="wa:product-reviews:attribution">
<div class="wa:flex-align">
<div class="wa:inline-flow: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>
@@ -169,7 +167,7 @@ toc: false
</div>
<div class="wa:container wa:product-list-simple">
<h2>You may also like</h2>
<div class="wa:product-list-simple:items wa:grid wa:grid:2-4">
<div class="wa:product-list-simple:items wa:grid:2-4">
<wa-card>
<img src="https://images.pexels.com/photos/4076594/pexels-photo-4076594.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="" slot="image">
Triumph Tulip<br>
@@ -198,14 +196,11 @@ toc: false
:root {
--docs-content-max-width: 72rem;
}
h1:first-of-type {
margin-top: initial;
}
.wa\:container {
container-type: inline-size;
}
.wa\:grid {
[class*='wa\:grid'] {
--wa-grid-gap: var(--wa-space-3xl);
display: grid;
gap: var(--wa-grid-gap);
@@ -213,7 +208,7 @@ toc: false
.wa\:grid\:2-4 {
grid-template-columns: repeat(2, 1fr);
}
@container (width > 40rem) {
@container (width > 60ch) {
.wa\:grid\:1-2,
.wa\:grid\:1-2-4 {
grid-template-columns: repeat(2, 1fr);
@@ -225,38 +220,42 @@ toc: false
grid-template-columns: 1fr 2fr;
}
}
@container (width > 60rem) {
@container (width > 120ch) {
.wa\:grid\:1-2-4 {
grid-template-columns: repeat(4, 1fr);
}
}
.wa\:flex-align {
.wa\:inline-flow\:s {
--wa-flex-gap: var(--wa-space-s);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--wa-flex-gap);
& > * {
margin: 0;
}
}
.wa\:flow-spacing\:3xl > *:not(:last-child) {
margin-bottom: var(--wa-space-3xl);
[class*='wa\:block-flow'] > * {
margin-block: 0;
}
.wa\:flow-spacing\:2xl > *:not(:last-child) {
margin-bottom: var(--wa-space-2xl);
.wa\:block-flow\:3xl > * + * {
margin-block-start: var(--wa-space-3xl);
}
.wa\:flow-spacing\:xl > *:not(:last-child) {
margin-bottom: var(--wa-space-xl);
.wa\:block-flow\:2xl > * + * {
margin-block-start: var(--wa-space-2xl);
}
.wa\:flow-spacing\:l > *:not(:last-child) {
margin-bottom: var(--wa-space-l);
.wa\:block-flow\:xl > * + * {
margin-block-start: var(--wa-space-xl);
}
.wa\:flow-spacing\:m > *:not(:last-child) {
margin-bottom: var(--wa-space-m);
.wa\:block-flow\:l > * + * {
margin-block-start: var(--wa-space-l);
}
.wa\:flow-spacing\:s > *:not(:last-child) {
margin-bottom: var(--wa-space-s);
.wa\:block-flow\:m > * + * {
margin-block-start: var(--wa-space-m);
}
.wa\:block-flow\:s > * + * {
margin-block-start: var(--wa-space-s);
}
.wa\:product-overview {
@@ -303,6 +302,7 @@ toc: false
}
& .wa\:product-reviews\:breakdown {
& ol {
font-size: var(--wa-font-size-s);
list-style-type: none;
margin: 0;
padding: 0;
@@ -318,11 +318,11 @@ toc: false
& :last-child {
flex: 0 0 3ch;
text-align: right;
text-align: end;
}
& wa-progress-bar {
--height: var(--wa-font-size-s);
--height: 1em;
--indicator-color: var(--wa-color-yellow-70);
flex: 1 1 auto;
}
@@ -349,12 +349,8 @@ toc: false
}
& [slot="image"] {
height: calc(50cqw - var(--wa-grid-gap));
aspect-ratio: 1 / 1;
object-fit: cover;
@container (width > 40rem) {
height: calc(25cqw - var(--wa-grid-gap));
}
}
}
}