fix(language-list): Fixing styles - FRONT-4647 (#3670)

* fix(language-list): Fixing styles - FRONT-4647 * feat(language-switcher): Removing left border in EU for the active element - FRONT-4647
ec-europa · Oct 14, 2024 · 0a8fcb7 · 0a8fcb7 · github-actions · Oct 14, 2024
1 parent f6856e2
commit 0a8fcb7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss b/src/implementations/vanilla/components/site-header/_site-header-language-switcher.scss
@@ -78,6 +78,7 @@ $language-list: null !default;
   align-items: center;
   display: flex;
   justify-content: space-between;
+  padding-inline-start: var(--s-s);
 }
 
 .ecl-site-header__language-title {

diff --git a/src/implementations/vanilla/components/splash-page/splash-page.scss b/src/implementations/vanilla/components/splash-page/splash-page.scss
@@ -45,6 +45,7 @@ $language-list: null !default;
 .ecl-splash-page__language-title {
   font: map.get($language-list, 'header-font-mobile');
   margin: 0;
+  padding-inline-start: var(--s-s);
 }
 
 .ecl-splash-page__language-content {

diff --git a/src/themes/ec/variables/_language-list.scss b/src/themes/ec/variables/_language-list.scss
@@ -3,18 +3,18 @@
 
 $language-list: (
   color: var(--c-d),
-  container-padding: var(--s-3xl),
+  container-padding: var(--s-3xl) var(--s-3xl) var(--s-3xl) 28px,
   header-font-mobile: var(--f-l),
   header-font-desktop: var(--f-xl),
   content-margin-mobile: var(--s-s),
   content-margin-desktop: var(--s-s),
   category-title-font: var(--f-m),
   category-title-font-weight: map.get($font-weight, 'regular'),
-  category-title-padding: var(--s-l) 0 var(--s-xs),
+  category-title-padding: var(--s-l) 0 var(--s-xs) var(--s-s),
   category-separator: 1px solid var(--c-n),
   category-stack-margin: var(--s-s),
-  list-margin: 0 0 0 calc(-1 * var(--s-s)),
-  list-margin-rtl: calc(-1 * var(--s-s)) 0 0 0,
+  list-margin: 0,
+  list-margin-rtl: 0,
   item-padding: var(--s-xs) var(--s-s),
   code-color: var(--c-d),
   code-font-weight: map.get($font-weight, 'regular'),
@@ -25,7 +25,7 @@ $language-list: (
   item-active-shadow: none,
   item-width: 184px,
   column-spacing-before: var(--s-m),
-  column-spacing-after: calc(var(--s-m) + var(--s-s)),
+  column-spacing-after: var(--s-2xs),
 );
 $language-list-print: (
   container-padding: map.get($spacing-print, '3xl'),

diff --git a/src/themes/eu/variables/_language-list.scss b/src/themes/eu/variables/_language-list.scss
@@ -3,29 +3,29 @@
 
 $language-list: (
   color: var(--c-d-140),
-  container-padding: var(--s-2xl) var(--s-l) var(--s-l),
+  container-padding: var(--s-2xl) var(--s-l) var(--s-l) var(--s-s),
   header-font-mobile: var(--f-p-l),
   header-font-desktop: var(--f-p-xl),
   content-margin-mobile: var(--s-m),
   content-margin-desktop: var(--s-m),
   category-title-font: var(--f-p-m),
   category-title-font-weight: map.get($font-weight, 'bold'),
-  category-title-padding: var(--s-l) 0 var(--s-xs),
+  category-title-padding: var(--s-l) 0 var(--s-xs) var(--s-s),
   category-separator: 1px solid var(--c-p-20),
   category-stack-margin: var(--s-s),
-  list-margin: 0 0 0 calc(-1 * var(--s-s)),
-  list-margin-rtl: calc(-1 * var(--s-s)) 0 0 0,
+  list-margin: 0,
+  list-margin-rtl: 0,
   item-padding: var(--s-s),
   code-color: var(--c-d-140),
   code-font-weight: map.get($font-weight, 'bold'),
   code-active-font-weight: map.get($font-weight, 'bold'),
   code-width: 30px,
   item-active-background: var(--c-p-10),
   item-active-color: var(--c-d-140),
-  item-active-shadow: inset 4px 0 0 0 var(--c-p),
+  item-active-shadow: none,
   item-width: 188px,
   column-spacing-before: var(--s-m),
-  column-spacing-after: var(--s-xl),
+  column-spacing-after: var(--s-m),
 );
 $language-list-print: (
   container-padding: map.get($spacing-print, '3xl') map.get($spacing-print, 'l')