diff --git a/README.md b/README.md index 65dfb77..7df7311 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ Yaml: | type | string | **Required** | `custom:expander-card` | Type of the card. | | title | string | _Expander_ | * | Title (Not displayed if using Title-Card) | | clear | boolean | _false_ | true\|false | Remove Background | +| clear-children | boolean | _false_ | true\|false | Remove Backgrounds/Borders of child cards | | expanded | boolean | _false_ | true\|false | Start expanded | | expand-id | string | **optional** | string | Unique ID to use for JS LocalStorage. Will save expanded state | | button-background | string | _transparent_ | css-color | Background color of expand button | diff --git a/src/Card.svelte b/src/Card.svelte index 9d0e175..4452740 100644 --- a/src/Card.svelte +++ b/src/Card.svelte @@ -24,8 +24,9 @@ limitations under the License. const { type = 'div', config, - hass - }: { type: string; config: LovelaceCardConfig; hass: HomeAssistant } = $props(); + hass, + clearChild = false + }: { type: string; config: LovelaceCardConfig; hass: HomeAssistant; clearChild: boolean } = $props(); let container = $state(); let loading = $state(true); @@ -47,6 +48,16 @@ limitations under the License. } container.replaceWith(el); container = el; + if (clearChild) { + const shadowStyle = document.createElement('style'); + shadowStyle.innerHTML = ` + ha-card { + background-color: transparent !important; + border-style: none !important; + } + `; + el.shadowRoot?.appendChild(shadowStyle); + } loading = false; }); diff --git a/src/ExpanderCard.svelte b/src/ExpanderCard.svelte index 918223e..f0dc7c1 100644 --- a/src/ExpanderCard.svelte +++ b/src/ExpanderCard.svelte @@ -7,6 +7,7 @@ 'gap': '0.6em', 'padding': '1em', 'clear': false, + 'clear-children': false, 'title': 'Expander', 'overlay-margin': '2em', 'child-padding': '0.5em', @@ -91,7 +92,11 @@ {#if config['title-card']}
- +
@@ -177,6 +186,18 @@ background-color: transparent; border-style: none; } + .clear-children { + & :global(::slotted(ha-card)) { + background-color: transparent !important; + border-style: none !important; + } + } + + :global(::slotted(ha-card)) { + background-color: transparent !important; + border-style: none !important; + } + .title-card-header { display: flex; align-items: center; diff --git a/src/ExpanderCardEditor.svelte b/src/ExpanderCardEditor.svelte index 205d0e0..40eb58f 100644 --- a/src/ExpanderCardEditor.svelte +++ b/src/ExpanderCardEditor.svelte @@ -64,6 +64,9 @@ limitations under the License. 'clear': ['boolean', { label: 'Remove background' }], + 'clear-children': ['boolean', { + label: 'Remove child card background/borders' + }], 'expanded': ['boolean', { label: 'Start expanded (Always expanded in editor)' }], diff --git a/src/configtype.ts b/src/configtype.ts index de7df93..afb85be 100644 --- a/src/configtype.ts +++ b/src/configtype.ts @@ -14,6 +14,7 @@ import type { LovelaceCardConfig } from 'custom-card-helpers'; export interface ExpanderConfig { clear?: boolean; + 'clear-children'?: boolean; cards?: { type: string }[]; gap: string; padding: string;