jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix horizontal stack margin (#19700)

Browse Source
This commit is contained in:
Paul Bottein 2024-02-06 11:36:22 +01:00 committed by GitHub
parent 6e62f568fc
commit c738127c09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/panels/lovelace/cards/hui-horizontal-stack-card.ts
View File

@ -29,26 +29,25 @@ export class HuiHorizontalStackCard extends HuiStackCard {
display: flex;
height: 100%;
}
#root {
--stack-card-side-margin: 4px;
}
#root > * {
flex: 1 1 0;
margin: var(
--horizontal-stack-card-margin,
var(--stack-card-margin, 0 var(--stack-card-side-margin))
var(--stack-card-margin, 0 4px)
);
min-width: 0;
}
#root > *:first-child {
#root[dir="ltr"] > *:first-child {
margin-left: 0;
margin-inline-start: 0;
margin-inline-end: var(--stack-card-side-margin);
}
#root > *:last-child {
#root[dir="ltr"] > *:last-child {
margin-right: 0;
margin-inline-end: 0;
margin-inline-start: var(--stack-card-side-margin);
}
#root[dir="rtl"] > *:first-child {
margin-right: 0;
}
#root[dir="rtl"] > *:last-child {
margin-left: 0;
}
`,
];

5
src/panels/lovelace/cards/hui-stack-card.ts
View File

@ -12,6 +12,7 @@ import { HomeAssistant } from "../../../types";
import { createCardElement } from "../create-element/create-card-element";
import { LovelaceCard, LovelaceCardEditor } from "../types";
import { StackCardConfig } from "./types";
import { computeRTLDirection } from "../../../common/util/compute_rtl";
export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
extends LitElement
@ -77,7 +78,9 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
${this._config.title
? html`<h1 class="card-header">${this._config.title}</h1>`
: ""}
<div id="root">${this._cards}</div>
<div id="root" dir=${this.hass ? computeRTLDirection(this.hass) : "ltr"}>
${this._cards}
</div>
`;
}