42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { customElement } from "lit/decorators";
|
|
import "element-internals-polyfill";
|
|
import { CSSResult, css } from "lit";
|
|
import { MdMenuItem } from "@material/web/menu/menu-item";
|
|
|
|
@customElement("ha-menu-item")
|
|
export class HaMenuItem extends MdMenuItem {
|
|
static override styles: CSSResult[] = [
|
|
...MdMenuItem.styles,
|
|
css`
|
|
:host {
|
|
--ha-icon-display: block;
|
|
--md-sys-color-primary: var(--primary-text-color);
|
|
--md-sys-color-on-primary: var(--primary-text-color);
|
|
--md-sys-color-secondary: var(--secondary-text-color);
|
|
--md-sys-color-surface: var(--card-background-color);
|
|
--md-sys-color-on-surface: var(--primary-text-color);
|
|
--md-sys-color-on-surface-variant: var(--secondary-text-color);
|
|
--md-sys-color-secondary-container: rgba(
|
|
var(--rgb-primary-color),
|
|
0.15
|
|
);
|
|
--md-sys-color-on-secondary-container: var(--text-primary-color);
|
|
--mdc-icon-size: 16px;
|
|
|
|
--md-sys-color-on-primary-container: var(--primary-text-color);
|
|
--md-sys-color-on-secondary-container: var(--primary-text-color);
|
|
}
|
|
:host(.warning) {
|
|
--md-menu-item-label-text-color: var(--error-color);
|
|
--md-menu-item-leading-icon-color: var(--error-color);
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ha-menu-item": HaMenuItem;
|
|
}
|
|
}
|