diff --git a/chips/lib/_trailing-icon.scss b/chips/lib/_trailing-icon.scss index 7c9f63698c..5a5cf85645 100644 --- a/chips/lib/_trailing-icon.scss +++ b/chips/lib/_trailing-icon.scss @@ -9,7 +9,8 @@ @mixin styles() { .trailing.action { - display: flex; + align-items: center; + justify-content: center; padding: 0 8px; // Note: the trailing action's shape only follows the trailing end of the @@ -29,8 +30,6 @@ .trailing.action md-ripple { border-radius: 50%; height: calc(4 / 3 * var(--_icon-size)); // 24px default - inset: 50% 0 0 50%; - transform: translateX(-50%) translateY(-50%); width: calc(4 / 3 * var(--_icon-size)); // 24px default } diff --git a/chips/lib/filter-chip.ts b/chips/lib/filter-chip.ts index 45e41fcef1..bcf17b2f11 100644 --- a/chips/lib/filter-chip.ts +++ b/chips/lib/filter-chip.ts @@ -12,7 +12,7 @@ import {property, query} from 'lit/decorators.js'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; import {MultiActionChip} from './multi-action-chip.js'; -import {renderRemoveButton} from './trailing-actions.js'; +import {renderRemoveButton} from './trailing-icons.js'; /** * A filter chip component. diff --git a/chips/lib/input-chip.ts b/chips/lib/input-chip.ts index 0a0fb52759..a93ffc30fc 100644 --- a/chips/lib/input-chip.ts +++ b/chips/lib/input-chip.ts @@ -10,7 +10,7 @@ import {property, query} from 'lit/decorators.js'; import {ARIAMixinStrict} from '../../internal/aria/aria.js'; import {MultiActionChip} from './multi-action-chip.js'; -import {renderRemoveButton} from './trailing-actions.js'; +import {renderRemoveButton} from './trailing-icons.js'; /** * An input chip component. diff --git a/chips/lib/trailing-actions.ts b/chips/lib/trailing-icons.ts similarity index 96% rename from chips/lib/trailing-actions.ts rename to chips/lib/trailing-icons.ts index 6ab20af0d6..bbe1194f9e 100644 --- a/chips/lib/trailing-actions.ts +++ b/chips/lib/trailing-icons.ts @@ -15,7 +15,7 @@ import {Chip} from './chip.js'; export function renderRemoveButton({disabled}: {disabled: boolean}) { return html`