fix(timeline): fixing styles for border and toggle aligment - FRONT-4…

…264 (#3238) * fix(timeline): fixing styles for border and toggle aligment - FRONT-4264 * fix(timeline): Increasing the height of the first item - FRONT-4264 * fix(timeline): Fixing height of the dashed border - FRONT-4264
ec-europa · Feb 15, 2024 · 06d1bff · 06d1bff · github-actions · Feb 15, 2024
1 parent 1f79985
commit 06d1bff
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/implementations/vanilla/components/timeline/timeline.scss b/src/implementations/vanilla/components/timeline/timeline.scss
@@ -76,6 +76,7 @@ $timeline: null !default;
 
   &::before {
     border-inline-start-style: dashed;
+    height: calc(100% + var(--s-2xs));
     top: calc(-1 * var(--s-2xs));
   }
 
@@ -85,7 +86,7 @@ $timeline: null !default;
     box-sizing: border-box;
     height: map.get($timeline, 'bullet-size') +
       (map.get($timeline, 'bullet-border-width') * 2);
-    top: var(--s-2xs) + var(--s-xs);
+    top: calc(var(--s-2xs) + var(--s-xs));
     width: map.get($timeline, 'bullet-size') +
       (map.get($timeline, 'bullet-border-width') * 2);
   }

diff --git a/src/themes/ec/variables/_timeline.scss b/src/themes/ec/variables/_timeline.scss
@@ -11,8 +11,8 @@ $timeline: (
   content-big-font: var(--f-m),
   content-font: var(--f-m),
   content-color: var(--c-d),
-  first-item-offset: var(--s-2xs),
-  first-item-height: 100%,
+  first-item-offset: calc(-1 * var(--s-2xs)),
+  first-item-height: calc(100% + var(--s-2xs)),
   item-padding-top: var(--s-2xs),
   label-alignment: right,
   label-color: var(--c-d),