diff --git a/README.md b/README.md index 3f0c024..6ae5aac 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +## Note: outdated, use https://github.com/stickpin/stack-in-card instead + # Stack In Card by [@RomRider](https://www.github.com/RomRider) A replacement for [vertical-stack-in-card](https://github.com/ofekashery/vertical-stack-in-card) and `horizontal-stack-in-card` @@ -34,6 +36,7 @@ If a card inside the stack has the `--keep-background` CSS style defined, it wil | `box_shadow` | boolean | **Optional** | Will keep the `box-shadow` on **all** the child cards | `false` | | `margin` | boolean | **Optional** | Will keep the `margin` between **all** the child cards | `false` | | `outer_padding` | boolean | **Optional** | Will add a `padding` of `8px` to the card if `margin` is `true` | `true` if `margin` is `true`, else false | +| `border` | boolean | **Optional** | Will keep the `border` on **all** the child cards | `false` | | `border_radius` | boolean | **Optional** | Will keep the `border-radius` on **all** the child cards | `false` | ## Example @@ -60,6 +63,28 @@ If a card inside the stack has the `--keep-background` CSS style defined, it wil - sun.sun ``` +### Example with `keep` object + +```yaml +type: custom:stack-in-card +title: My Stack In Card +mode: vertical +keep: + background: true +cards: + - type: horizontal-stack + cards: + - type: button + entity: sun.sun + - type: button + entity: sun.sun + - type: vertical-stack + cards: + - type: entities + entities: + - sun.sun +``` + ### Example with button-card to keep the background This will keep the background of the button even if stacked: diff --git a/src/stack-in-card.ts b/src/stack-in-card.ts index 2308c58..20d634b 100644 --- a/src/stack-in-card.ts +++ b/src/stack-in-card.ts @@ -51,6 +51,7 @@ class StackInCard extends LitElement implements LovelaceCard { margin: false, box_shadow: false, border_radius: false, + border: false, ...config.keep, }, }; @@ -96,6 +97,9 @@ class StackInCard extends LitElement implements LovelaceCard { private _updateStyle(e: LovelaceCard | null, withBg: boolean): void { if (!e) return; if (!this._config?.keep?.box_shadow) e.style.boxShadow = 'none'; + if (!this._config?.keep?.border && getComputedStyle(e).getPropertyValue('--keep-border').trim() !== 'true') { + e.style.border = 'none'; + } if ( !this._config?.keep?.background && withBg && diff --git a/src/types.ts b/src/types.ts index 096ba88..5154a52 100644 --- a/src/types.ts +++ b/src/types.ts @@ -12,6 +12,7 @@ export interface KeepConfig { margin?: boolean; background?: boolean; box_shadow?: boolean; + border?: boolean; border_radius?: boolean; outer_padding?: boolean; }