diff --git a/src/components/list/themes/item.base.scss b/src/components/list/themes/item.base.scss index be5e61e27..6bcf97bdf 100644 --- a/src/components/list/themes/item.base.scss +++ b/src/components/list/themes/item.base.scss @@ -4,6 +4,7 @@ display: flex; align-items: center; position: relative; + gap: rem(16px); transition: background .15s ease-out; padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); padding-block: pad-block(rem(2px), rem(4px), rem(8px)); @@ -28,6 +29,7 @@ display: flex; align-items: center; justify-content: center; + gap: rem(8px); } [part='title'] { diff --git a/src/components/list/themes/shared/container/list.indigo.scss b/src/components/list/themes/shared/container/list.indigo.scss index 274dc42e5..8bddbcb8a 100644 --- a/src/components/list/themes/shared/container/list.indigo.scss +++ b/src/components/list/themes/shared/container/list.indigo.scss @@ -5,4 +5,6 @@ $theme: $indigo; :host { --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important; + + gap: rem(4px); } diff --git a/src/components/list/themes/shared/item/list-item.common.scss b/src/components/list/themes/shared/item/list-item.common.scss index 1f2f5d19d..5a41c08cf 100644 --- a/src/components/list/themes/shared/item/list-item.common.scss +++ b/src/components/list/themes/shared/item/list-item.common.scss @@ -53,11 +53,3 @@ $theme: $material; [part='end'] { color: var-get($theme, 'item-action-color'); } - -[name='start']::slotted(*) { - margin-inline-end: pad(rem(16px)); -} - -[name='end']::slotted(*) { - margin-inline-start: pad(rem(16px)); -} diff --git a/src/components/list/themes/shared/item/list-item.indigo.scss b/src/components/list/themes/shared/item/list-item.indigo.scss index 5fc7487f2..9def5abbc 100644 --- a/src/components/list/themes/shared/item/list-item.indigo.scss +++ b/src/components/list/themes/shared/item/list-item.indigo.scss @@ -15,21 +15,12 @@ @include type-style('body-2'); } -[part='start'], -[part='end'] { - gap: rem(8px); -} - -[name='start']::slotted(*) { - margin-inline-end: 0; -} - -[name='end']::slotted(*) { - margin-inline-start: 0; -} - [part='header'] { display: flex; flex-direction: column; gap: rem(2px); } + +[part='end'] { + gap: sizable(rem(4px), rem(6px), rem(8px)); +}