Merge pull request #500 from City-of-Helsinki/UHF-X_phasing_component…

…_bug UHF-X: Phasing component visual bug
City-of-Helsinki · Dec 7, 2022 · d68a44a · d68a44a
2 parents 2113fe6 + bca68db
commit d68a44a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/00_functions/_typography_functions.scss b/src/scss/00_functions/_typography_functions.scss
@@ -8,3 +8,14 @@
 
   @return $-line-height;
 }
+
+@function get-font-size($style, $unremify: false) {
+  $-path: 'font.#{$style}';
+  $-font-size: get('#{$-path}.font-size');
+
+  @if $unremify {
+    @return unremify($-font-size);
+  }
+
+  @return $-font-size;
+}
diff --git a/src/scss/06_components/paragraphs/_phasing.scss b/src/scss/06_components/paragraphs/_phasing.scss
@@ -8,9 +8,13 @@ $-circle-size--ol: 40px;
 $-circle-size--ol-l: $spacing-triple;
 
 .component--phasing {
-  --item-title-lineheight: 1.5; // As we have paragraph, its line-height must be at least 1.5
+  --item-title-lineheight: #{1.5 * get-font-size('h4')}; // As we have paragraph, its line-height must be at least 1.5
   counter-reset: item;
 
+  @include breakpoint($breakpoint-l) {
+    --item-title-lineheight: #{1.5 * get-font-size('h4.breakpoint_l')};
+  }
+
   .component__content {
     padding-left: 0;
   }
@@ -105,10 +109,10 @@ $-circle-size--ol-l: $spacing-triple;
 
 // If phasing element is inside of an accordion
 .component--accordion .component--phasing {
-  --item-title-lineheight: #{get-line-height('h5')};
+  --item-title-lineheight: #{1.5 * get-font-size('h5')}; // As we have paragraph, its line-height must be at least 1.5
 
   @include breakpoint($breakpoint-l) {
-    --item-title-lineheight: #{get-line-height('h5.breakpoint_l')};
+    --item-title-lineheight: #{1.5 * get-font-size('h5.breakpoint_l')};
   }
 
   .phasing__item--with-numbers::after,