diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss index db833463a1..33c30d5446 100644 --- a/chips/lib/_shared.scss +++ b/chips/lib/_shared.scss @@ -44,6 +44,7 @@ align-items: center; appearance: none; background: none; + border: none; border-radius: inherit; box-sizing: border-box; display: flex; @@ -54,16 +55,40 @@ position: relative; text-decoration: none; width: 100%; + + // Container and outline color, separate node for disabled opacity changes + &::before { + border-radius: inherit; + content: ''; + inset: 0; + pointer-events: none; + position: absolute; + } } - .flat { - border: var(--_flat-outline-width) solid var(--_flat-outline-color); + .container:not(.disabled) { + cursor: pointer; + } + + .container.disabled { + pointer-events: none; + } + .flat { @include elevation.theme( ( level: var(--_flat-container-elevation), ) ); + + &::before { + border: var(--_flat-outline-width) solid var(--_flat-outline-color); + } + } + + .flat.disabled::before { + border-color: var(--_flat-disabled-outline-color); + opacity: var(--_flat-disabled-outline-opacity); } .elevated { @@ -76,6 +101,19 @@ ); } + .elevated.disabled { + @include elevation.theme( + ( + level: var(--_elevated-disabled-container-elevation), + ) + ); + } + + .elevated.disabled::before { + background: var(--_elevated-disabled-container-color); + opacity: var(--_elevated-disabled-container-opacity); + } + md-elevation { inset: 0; position: absolute; @@ -96,6 +134,14 @@ .label { color: var(--_label-text-color); font: var(--_label-text-type); + text-overflow: ellipsis; + user-select: none; + white-space: nowrap; + } + + .disabled .label { + color: var(--_disabled-label-text-color); + opacity: var(--_disabled-label-text-opacity); } } diff --git a/chips/lib/chip.ts b/chips/lib/chip.ts index c8ab2cf0c1..0d6d85dcc6 100644 --- a/chips/lib/chip.ts +++ b/chips/lib/chip.ts @@ -34,6 +34,7 @@ export class Chip extends LitElement { override render() { const classes = { + disabled: this.disabled, elevated: this.elevated, flat: !this.elevated, };