refactor(list): update item gaps (#1480)

IgniteUI · Nov 15, 2024 · 2bd65b6 · 2bd65b6
1 parent 401c4b1
commit 2bd65b6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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));
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,4 +5,6 @@ $theme: $indigo; @@
     :host {
         --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
+        gap: rem(4px);
     }