mirror of
https://github.com/home-assistant/frontend.git
synced 2025-10-17 15:50:16 +00:00
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { css } from "lit";
|
|
import { customElement, property } from "lit/decorators";
|
|
import { HaIconButton } from "./ha-icon-button";
|
|
|
|
@customElement("ha-icon-button-toggle")
|
|
export class HaIconButtonToggle extends HaIconButton {
|
|
@property({ type: Boolean, reflect: true }) selected = false;
|
|
|
|
static styles = css`
|
|
:host {
|
|
position: relative;
|
|
}
|
|
mwc-icon-button {
|
|
position: relative;
|
|
transition: color 180ms ease-in-out;
|
|
}
|
|
mwc-icon-button::before {
|
|
opacity: 0;
|
|
transition: opacity 180ms ease-in-out;
|
|
background-color: var(--primary-text-color);
|
|
border-radius: var(--ha-border-radius-2xl);
|
|
height: 40px;
|
|
width: 40px;
|
|
content: "";
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
bottom: -10px;
|
|
right: -10px;
|
|
margin: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
:host([border-only]) mwc-icon-button::before {
|
|
background-color: transparent;
|
|
border: 2px solid var(--primary-text-color);
|
|
}
|
|
:host([selected]) mwc-icon-button {
|
|
color: var(--primary-background-color);
|
|
}
|
|
:host([selected]:not([disabled])) mwc-icon-button::before {
|
|
opacity: 1;
|
|
}
|
|
`;
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ha-icon-button-toggle": HaIconButtonToggle;
|
|
}
|
|
}
|