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

--wa-card-* CSS properties PoC

Browse Source
This commit is contained in:
Lea Verou
2025-01-15 15:01:48 -05:00
parent 561e0c9553
commit 024dc6a0b4
2 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,18 @@
:host {
--spacing: var(--wa-space-xl);
--border-width: var(--wa-panel-border-width);
--border-radius: var(--wa-panel-border-radius);
--border-width: var(--wa-card-border-width, var(--wa-panel-border-width));
--border-radius: var(--wa-card-border-radius, var(--wa-panel-border-radius));
--inner-border-radius: calc(var(--border-radius) - var(--border-width));
display: flex;
flex-direction: column;
background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-surface-border);
background-color: var(--wa-card-background-color, var(--wa-color-surface-default));
border-color: var(--wa-card-border-color, var(--wa-color-surface-border));
border-radius: var(--border-radius);
border-style: var(--wa-panel-border-style);
box-shadow: var(--wa-shadow-s);
border-width: var(--border-width);
box-shadow: var(--wa-card-shadow, var(--wa-shadow-s));
color: var(--wa-color-text-normal);
}
@@ -24,6 +24,7 @@
.image {
display: flex;
background-color: var(--wa-card-image-background-color, transparent);
&::slotted(img) {
display: block;
@@ -37,6 +38,7 @@
display: block;
border-bottom: inherit;
padding: calc(var(--spacing) / 2) var(--spacing);
background-color: var(--wa-card-header-background-color, transparent);
}
.body {
@@ -50,6 +52,7 @@
border-end-start-radius: var(--inner-border-radius);
border-end-end-radius: var(--inner-border-radius);
padding: var(--spacing);
background-color: var(--wa-card-footer-background-color, transparent);
}
:host(:not([with-header])) .header,

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

@@ -22,6 +22,14 @@ import styles from './card.css';
* @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.
* @cssproperty --wa-card-border-radius - The default radius for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
* @cssproperty --wa-card-border-color - The default border color for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single color.
* @cssproperty --wa-card-border-width - The default border width for all cards, typically set on an ancestor element (e.g. by a theme). Expects a single value.
* @cssproperty --wa-card-background-color - The default background color for all cards, typically set on an ancestor element (e.g. by a theme).
* @cssproperty --wa-card-shadow - The default shadow for all cards, typically set on an ancestor element (e.g. by a theme).
* @cssproperty --wa-card-header-background-color - The default background color for card headers, typically set on an ancestor element (e.g. by a theme).
* @cssproperty --wa-card-footer-background-color - The default background color for card footers, typically set on an ancestor element (e.g. by a theme).
* @cssproperty --wa-card-image-background-color - The default background color for card images, typically set on an ancestor element (e.g. by a theme).
*/
@customElement('wa-card')
export default class WaCard extends WebAwesomeElement {