mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-14 05:20:31 +00:00
bf176ac314
* Make it possible for themes to blur card backgrounds * Make it possible for themes to blur dialog backgrounds * Add ha prefix Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Rename dialog-backdrop-filter to ha-dialog-scrim-backdrop-filter With backwards compatibility * Run prettier --------- Co-authored-by: Bram Kragten <mail@bramkragten.nl>
90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
|
|
import { customElement, property } from "lit/decorators";
|
|
|
|
@customElement("ha-card")
|
|
export class HaCard extends LitElement {
|
|
@property() public header?: string;
|
|
|
|
@property({ type: Boolean, reflect: true }) public raised = false;
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return css`
|
|
:host {
|
|
background: var(
|
|
--ha-card-background,
|
|
var(--card-background-color, white)
|
|
);
|
|
-webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
|
|
backdrop-filter: var(--ha-card-backdrop-filter, none);
|
|
box-shadow: var(--ha-card-box-shadow, none);
|
|
box-sizing: border-box;
|
|
border-radius: var(--ha-card-border-radius, 12px);
|
|
border-width: var(--ha-card-border-width, 1px);
|
|
border-style: solid;
|
|
border-color: var(
|
|
--ha-card-border-color,
|
|
var(--divider-color, #e0e0e0)
|
|
);
|
|
color: var(--primary-text-color);
|
|
display: block;
|
|
transition: all 0.3s ease-out;
|
|
position: relative;
|
|
}
|
|
|
|
:host([raised]) {
|
|
border: none;
|
|
box-shadow: var(
|
|
--ha-card-box-shadow,
|
|
0px 2px 1px -1px rgba(0, 0, 0, 0.2),
|
|
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
|
|
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
|
|
);
|
|
}
|
|
|
|
.card-header,
|
|
:host ::slotted(.card-header) {
|
|
color: var(--ha-card-header-color, --primary-text-color);
|
|
font-family: var(--ha-card-header-font-family, inherit);
|
|
font-size: var(--ha-card-header-font-size, 24px);
|
|
letter-spacing: -0.012em;
|
|
line-height: 48px;
|
|
padding: 12px 16px 16px;
|
|
display: block;
|
|
margin-block-start: 0px;
|
|
margin-block-end: 0px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
:host ::slotted(.card-content:not(:first-child)),
|
|
slot:not(:first-child)::slotted(.card-content) {
|
|
padding-top: 0px;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
:host ::slotted(.card-content) {
|
|
padding: 16px;
|
|
}
|
|
|
|
:host ::slotted(.card-actions) {
|
|
border-top: 1px solid var(--divider-color, #e8e8e8);
|
|
padding: 5px 16px;
|
|
}
|
|
`;
|
|
}
|
|
|
|
protected render() {
|
|
return html`
|
|
${this.header
|
|
? html`<h1 class="card-header">${this.header}</h1>`
|
|
: nothing}
|
|
<slot></slot>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ha-card": HaCard;
|
|
}
|
|
}
|