fix(featured-item): fix picture spacing - FRONT-4310 (#3294)

ec-europa · Mar 19, 2024 · 113a937 · 113a937 · github-actions · Mar 19, 2024
1 parent b3e9eb5
commit 113a937
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/implementations/vanilla/components/featured-item/featured-item.scss b/src/implementations/vanilla/components/featured-item/featured-item.scss
@@ -134,7 +134,7 @@ $featured-item: null !default;
   }
 
   .ecl-featured-item__media_container {
-    padding: map.get($featured-item, 'highlight', 'media-padding');
+    padding: map.get($featured-item, 'highlight', 'media-padding-mobile');
   }
 
   .ecl-featured-item__item:last-child {
@@ -162,6 +162,14 @@ $featured-item: null !default;
     .ecl-featured-item__container {
       padding: map.get($featured-item, 'highlight', 'padding-desktop');
     }
+
+    .ecl-featured-item__media_container {
+      padding: map.get($featured-item, 'highlight', 'media-padding-desktop');
+    }
+
+    .ecl-featured-item__container--right .ecl-featured-item__media_container {
+      padding: map.get($featured-item, 'highlight', 'media-padding-right');
+    }
   }
 }
 

diff --git a/src/themes/ec/variables/_featured-item.scss b/src/themes/ec/variables/_featured-item.scss
@@ -27,7 +27,9 @@ $featured-item: (
     container-background: map.get($color, 'white'),
     title-background: var(--c-n-60),
     item-background: var(--c-n-40),
-    media-padding: var(--s-xl),
+    media-padding-mobile: var(--s-xl),
+    media-padding-desktop: var(--s-xl),
+    media-padding-right: var(--s-xl),
     link-spacing: var(--s-m) 0 0 var(--s-xl),
     padding-mobile: 0,
     padding-desktop: 0,

diff --git a/src/themes/eu/variables/_featured-item.scss b/src/themes/eu/variables/_featured-item.scss
@@ -4,7 +4,7 @@
 $featured-item: (
   padding: 0,
   border: none,
-  border-radius: map.get($border-radius, 'm'),
+  border-radius: map.get($border-radius, 'm') map.get($border-radius, 'm') 0 0,
   shadow: none,
   media-padding-mobile: 0 0 var(--s-m) 0,
   media-padding-desktop: 0 var(--s-m) var(--s-m) 0,
@@ -28,7 +28,9 @@ $featured-item: (
     title-background: transparent,
     item-background: transparent,
     link-spacing: var(--s-m) 0 0 0,
-    media-padding: 0 var(--s-m) var(--s-m) 0,
+    media-padding-mobile: 0 0 var(--s-m),
+    media-padding-desktop: 0 var(--s-m) 0 0,
+    media-padding-right: 0 0 0 var(--s-m),
     padding-mobile: var(--s-m) var(--s-m) var(--s-m) var(--s-xs),
     padding-desktop: var(--s-m) var(--s-m) var(--s-m) var(--s-l),
     border-size: 8px,