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

Card fixes

Browse Source
This commit is contained in:
Lea Verou
2025-02-05 19:47:39 -05:00
parent b2d74145b8
commit 63133d0e33
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/card/card.css
View File

@@ -5,6 +5,7 @@
--spacing: var(--wa-space);
--border-width: var(--wa-panel-border-width);
--border-color: var(--wa-color-surface-border);
--border-radius: var(--wa-panel-border-radius);
--inner-border-radius: calc(var(--border-radius) - var(--border-width));
@@ -12,7 +13,7 @@
display: flex;
flex-direction: column;
background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-surface-border);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--wa-panel-border-style);
box-shadow: var(--wa-shadow-s);
@@ -20,12 +21,20 @@
color: var(--wa-color-text-normal);
}
/* Take care of top and bottom radii */
.image,
:host(:not([with-image])) .header {
:host(:not([with-image])) .header,
:host(:not([with-image], [with-header])) .body {
border-start-start-radius: var(--inner-border-radius);
border-start-end-radius: var(--inner-border-radius);
}
:host(:not([with-footer])) .body,
.footer {
border-end-start-radius: var(--inner-border-radius);
border-end-end-radius: var(--inner-border-radius);
}
.image {
display: flex;
@@ -39,7 +48,9 @@
.header {
display: block;
border-bottom: inherit;
border-block-end-style: inherit;
border-block-end-color: var(--border-color);
border-block-end-width: var(--border-width);
padding: calc(var(--spacing) / 2) var(--spacing);
}
@@ -50,9 +61,9 @@
.footer {
display: block;
border-top: inherit;
border-end-start-radius: var(--inner-border-radius);
border-end-end-radius: var(--inner-border-radius);
border-block-start-style: inherit;
border-block-start-color: var(--border-color);
border-block-start-width: var(--border-width);
padding: var(--spacing);
}

7
src/components/card/card.ts
View File

@@ -21,9 +21,10 @@ import styles from './card.css';
* @csspart body - The container that wraps the card's main content.
* @csspart footer - The container that wraps the card's footer.
*
* @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
* @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
* @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. Defaults to `var(--wa-space)`.
* @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders, including inner borders. Expects a single value.
* @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
* @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
*/
@customElement('wa-card')
export default class WaCard extends WebAwesomeElement {