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

Use outlined

Browse Source
This commit is contained in:
Ludeeus 2021-10-26 12:28:48 +00:00
parent daab076bc1
commit 8e53019cf2
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
gallery/src/demos/demo-ha-chip.ts
View File

@ -63,7 +63,7 @@ export class DemoHaChip extends LitElement {
<div class="standalone"> <div class="standalone">
<span>Simple:</span> <span>Simple:</span>
<ha-chip <ha-chip
.outline=${this.standaloneIsOutlined} .outlined=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled} ?disabled=${this.standaloneIsDisabled}
>Demo chip</ha-chip >Demo chip</ha-chip
> >
@ -72,7 +72,7 @@ export class DemoHaChip extends LitElement {
<div class="standalone"> <div class="standalone">
<span>Label property:</span> <span>Label property:</span>
<ha-chip <ha-chip
.outline=${this.standaloneIsOutlined} .outlined=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled} ?disabled=${this.standaloneIsDisabled}
label="Demo chip" label="Demo chip"
></ha-chip> ></ha-chip>
@ -82,7 +82,7 @@ export class DemoHaChip extends LitElement {
<span>With leadingIcon:</span> <span>With leadingIcon:</span>
<ha-chip <ha-chip
.leadingIcon=${mdiHomeAssistant} .leadingIcon=${mdiHomeAssistant}
.outline=${this.standaloneIsOutlined} .outlined=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled} ?disabled=${this.standaloneIsDisabled}
>Demo chip</ha-chip >Demo chip</ha-chip
> >
@ -92,7 +92,7 @@ export class DemoHaChip extends LitElement {
<span>With trailingIcon property:</span> <span>With trailingIcon property:</span>
<ha-chip <ha-chip
.trailingIcon=${mdiHomeAssistant} .trailingIcon=${mdiHomeAssistant}
.outline=${this.standaloneIsOutlined} .outlined=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled} ?disabled=${this.standaloneIsDisabled}
>Demo chip</ha-chip >Demo chip</ha-chip
> >
@ -101,7 +101,7 @@ export class DemoHaChip extends LitElement {
<div class="standalone"> <div class="standalone">
<span>With trailingIcon slot:</span> <span>With trailingIcon slot:</span>
<ha-chip <ha-chip
.outline=${this.standaloneIsOutlined} .outlined=${this.standaloneIsOutlined}
?disabled=${this.standaloneIsDisabled} ?disabled=${this.standaloneIsDisabled}
> >
Demo chip Demo chip

12
src/components/ha-chip.ts
View File

@ -12,7 +12,7 @@ import { customElement, property } from "lit/decorators";
@customElement("ha-chip") @customElement("ha-chip")
export class HaChip extends LitElement { export class HaChip extends LitElement {
@property({ type: Boolean }) public outline = false; @property({ type: Boolean }) public outlined = false;
@property() public label?: string; @property() public label?: string;
@ -22,7 +22,7 @@ export class HaChip extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="mdc-chip ${this.outline ? "outline" : ""}"> <div class="mdc-chip ${this.outlined ? "outlined" : ""}">
${this.leadingIcon ${this.leadingIcon
? html`<span role="gridcell"> ? html`<span role="gridcell">
<span role="button" tabindex="0" class="mdc-chip__primary-action" <span role="button" tabindex="0" class="mdc-chip__primary-action"
@ -68,25 +68,25 @@ export class HaChip extends LitElement {
color: var(--ha-chip-text-color, var(--text-primary-color)); color: var(--ha-chip-text-color, var(--text-primary-color));
} }
.mdc-chip.outline { .mdc-chip.outlined {
border: 2px solid var(--ha-chip-background-color, var(--primary-color)); border: 2px solid var(--ha-chip-background-color, var(--primary-color));
background: var(--card-background-color); background: var(--card-background-color);
color: var(--ha-chip-text-color, var(--primary-text-color)); color: var(--ha-chip-text-color, var(--primary-text-color));
} }
.mdc-chip:not(.outline) .mdc-chip__icon.mdc-chip__icon--leading { .mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
margin-left: -12px !important; margin-left: -12px !important;
margin-right: -2px !important; margin-right: -2px !important;
} }
.mdc-chip.outline ha-svg-icon, .mdc-chip.outlined ha-svg-icon,
slot[name="trailing-icon"]::slotted(ha-svg-icon) { slot[name="trailing-icon"]::slotted(ha-svg-icon) {
border-radius: 50%; border-radius: 50%;
background: var(--ha-chip-background-color, var(--primary-color)); background: var(--ha-chip-background-color, var(--primary-color));
color: var(--card-background-color); color: var(--card-background-color);
} }
.mdc-chip.outline .mdc-chip__icon.mdc-chip__icon--leading { .mdc-chip.outlined .mdc-chip__icon.mdc-chip__icon--leading {
margin-left: -16px !important; margin-left: -16px !important;
} }