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

prevent jumping for outlined

Browse Source
This commit is contained in:
Ludeeus 2021-10-26 13:22:41 +00:00
parent 64c831e91f
commit 886d14bcf6
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,7 +119,7 @@ export class DemoHaChip extends LitElement {
<div class="card-content"> <div class="card-content">
<ha-chip-set .items=${chips}> </ha-chip-set> <ha-chip-set .items=${chips}> </ha-chip-set>
<ha-chip-set <ha-chip-set
.items=${chips.map((chip) => ({ ...chip, outline: true }))} .items=${chips.map((chip) => ({ ...chip, outlined: true }))}
> >
</ha-chip-set> </ha-chip-set>
</div> </div>

4
src/components/ha-chip-set.ts
View File

@ -23,7 +23,7 @@ export interface HaChipSetItem {
label?: string; label?: string;
leadingIcon?: string; leadingIcon?: string;
trailingIcon?: string; trailingIcon?: string;
outline?: boolean; outlined?: boolean;
} }
@customElement("ha-chip-set") @customElement("ha-chip-set")
@ -43,7 +43,7 @@ export class HaChipSet extends LitElement {
.label=${item.label} .label=${item.label}
.leadingIcon=${item.leadingIcon} .leadingIcon=${item.leadingIcon}
.trailingIcon=${item.trailingIcon} .trailingIcon=${item.trailingIcon}
?outline=${item.outline} ?outlined=${item.outlined}
> >
</ha-chip> </ha-chip>
` `

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

@ -69,8 +69,9 @@ export class HaChip extends LitElement {
} }
.mdc-chip.outlined { .mdc-chip.outlined {
margin: 0 -2px !important;
border: 2px solid var(--ha-chip-background-color, var(--primary-color)); border: 2px solid var(--ha-chip-background-color, var(--primary-color));
background: var( background-color: var(
--ha-chip-outlined-background-color, --ha-chip-outlined-background-color,
var(--card-background-color) var(--card-background-color)
); );
@ -79,7 +80,6 @@ export class HaChip extends LitElement {
.mdc-chip:not(.outlined) .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;
} }
.mdc-chip.outlined ha-svg-icon, .mdc-chip.outlined ha-svg-icon,