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

[docs.css] Remove duplicate code, use CSS nesting for .index.grid

Browse Source
This commit is contained in:
Lea Verou
2024-12-23 01:58:10 -05:00
parent b196ccc0bc
commit 08f327c224
1 changed files with 38 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
docs/assets/styles/docs.css
View File

@@ -321,8 +321,45 @@ wa-page > main:has(> .index-grid) {
.index-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
gap: var(--wa-space-2xl);
a {
border-radius: var(--wa-border-radius-m);
}
wa-card {
--box-shadow: none;
--spacing: var(--wa-space-m);
inline-size: 100%;
&:hover {
--border-color: var(--wa-color-brand-border-loud);
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
.page-name {
color: var(--wa-color-brand-on-quiet);
}
}
[slot='header'] {
display: flex;
}
&::part(header) {
background-color: var(--wa-color-neutral-fill-quiet);
border-bottom: none;
display: flex;
align-items: center;
justify-content: center;
min-block-size: calc(6rem + var(--spacing));
}
}
.page-name {
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-action);
}
}
.index-category {
@@ -331,100 +368,6 @@ wa-page > main:has(> .index-grid) {
margin-block-start: var(--wa-space-2xl);
}
.index-grid a {
border-radius: var(--wa-border-radius-m);
}
.index-grid wa-card {
--box-shadow: none;
--spacing: var(--wa-space-m);
inline-size: 100%;
}
.index-grid wa-card:hover {
--border-color: var(--wa-color-brand-border-loud);
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
& .page-name {
color: var(--wa-color-brand-on-quiet);
}
}
.index-grid wa-card [slot='header'] {
display: flex;
}
.index-grid wa-card::part(header) {
background-color: var(--wa-color-neutral-fill-quiet);
border-bottom: none;
display: flex;
align-items: center;
justify-content: center;
min-block-size: calc(6rem + var(--spacing));
}
.index-grid .page-name {
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-action);
}
/* Index Pages */
wa-page > main:has(> .index-grid) {
max-width: 120ch;
margin-inline: auto;
}
.index-summary {
max-inline-size: 80ch;
}
.index-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
gap: var(--wa-space-2xl);
}
.index-category {
grid-column: 1 / -1;
margin-block-end: 0;
margin-block-start: var(--wa-space-2xl);
}
.index-grid a {
border-radius: var(--wa-border-radius-m);
}
.index-grid wa-card {
--box-shadow: none;
--spacing: var(--wa-space-m);
inline-size: 100%;
}
.index-grid wa-card:hover {
--border-color: var(--wa-color-brand-border-loud);
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
& .page-name {
color: var(--wa-color-brand-on-quiet);
}
}
.index-grid wa-card [slot='header'] {
display: flex;
}
.index-grid wa-card::part(header) {
background-color: var(--wa-color-neutral-fill-quiet);
border-bottom: none;
display: flex;
align-items: center;
justify-content: center;
min-block-size: calc(6rem + var(--spacing));
}
.index-grid .page-name {
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-action);
}
/* Swatches */
.swatch {
background-color: transparent;