Add unitless-calc function, $header-styles map and output those new styles.

diff --git a/scss/typography/_base.scss b/scss/typography/_base.scss
index e21550e301198eeae4d8ec732310747cfb1deeab..ab0acbf619908d954fdf4cbaf9fcc79a4a6aed47 100644 (file)
--- a/scss/typography/_base.scss
+++ b/scss/typography/_base.scss
@@ -71,6 +71,27 @@ $header-lineheight: 1.4 !default;
 /// @type Number
 $header-margin-bottom: 0.5rem !default;
 
+/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of font-size, line-height, margin-top and margin-bottom.
+/// @type Map
+$header-styles: (
+  'small': (
+    'h1': ('font-size': 24),
+    'h2': ('font-size': 20),
+    'h3': ('font-size': 19),
+    'h4': ('font-size': 18),
+    'h5': ('font-size': 17),
+    'h6': ('font-size': 16)
+  ),
+  'medium': (
+    'h1': ('font-size': 48),
+    'h2': ('font-size': 40),
+    'h3': ('font-size': 31),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16)
+  )
+) !default;
+
 /// Text rendering method of headers.
 /// @type String
 $header-text-rendering: optimizeLegibility !default;
@@ -292,9 +313,6 @@ $abbr-underline: 1px dotted $black !default;
   h4,
   h5,
   h6 {
-    margin-top: 0;
-    margin-bottom: $header-margin-bottom;
-
     font-family: $header-font-family;
     font-style: $header-font-style;
     font-weight: $header-font-weight;
@@ -308,12 +326,40 @@ $abbr-underline: 1px dotted $black !default;
     }
   }
 
-  // Heading sizes
-  @each $size, $headers in $header-sizes {
+  // Heading styles
+   @each $size, $headers in $header-styles {
     @include breakpoint($size) {
-      @each $header, $font-size in $headers {
+      @each $header, $header-defs in $headers {
         #{$header} {
-          font-size: rem-calc($font-size);
+          @if map-has-key($header-defs, margin-top) {
+            margin-top: rem-calc(map-get($header-defs, margin-top));
+          } @else if map-has-key($header-defs, mt) {
+            margin-top: rem-calc(map-get($header-defs, mt));
+          } @else {
+            margin-top: 0;
+          }
+          @if map-has-key($header-defs, margin-bottom) {
+            margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
+          } @else if map-has-key($header-defs, mb) {
+            margin-bottom: rem-calc(map-get($header-defs, mb));
+          } @else {
+            margin-bottom: rem-calc($header-margin-bottom);
+          }
+
+          @if map-has-key($header-defs, font-size) {
+            font-size: rem-calc(map-get($header-defs, font-size));
+          } @else if map-has-key($header-defs, fs) {
+            font-size: rem-calc(map-get($header-defs, fs));
+          } @else {
+            font-size: 1rem;
+          }
+          @if map-has-key($header-defs, line-height) {
+            line-height: unitless-calc(map-get($header-defs, line-height));
+          } @else if map-has-key($header-defs, lh) {
+            line-height: unitless-calc(map-get($header-defs, lh));
+          } @else {
+            line-height: unitless-calc($header-lineheight);
+          }
         }
       }
     }

diff --git a/scss/util/_unit.scss b/scss/util/_unit.scss
index 1b5613a5d83a5e9c2c166e37cc9db56db9050649..5478efdbfbe4df01e00ccec13e3f37643ca0daa2 100644 (file)
--- a/scss/util/_unit.scss
+++ b/scss/util/_unit.scss
@@ -93,3 +93,51 @@ $global-font-size: 100% !default;
 
   @return $value;
 }
+
+/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
+///
+/// @param {Number} $value - Value to convert to a unitless line height
+/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size
+///
+/// @return {Number} - Unitless number
+@function unitless-calc($value, $base: null) {
+
+  // If no base is defined, defer to the global font size
+  @if $base == null {
+    $base: $global-font-size;
+  }
+
+  // First, lets convert our $base to pixels
+
+  // If the base font size is a %, then multiply it by 16px
+  @if unit($base) == '%' {
+    $base: ($base / 100%) * 16px;
+  }
+
+  @if unit($base) == 'rem' {
+    $base: strip-unit($base) * 16px;
+  }
+
+  @if unit($base) == 'em' {
+    $base: strip-unit($base) * 16px;
+  }
+
+  // Now lets convert our value to pixels too
+  @if unit($value) == '%' {
+    $value: ($value / 100%) * 16px;
+  }
+
+  @if unit($value) == 'rem' {
+    $value: strip-unit($value) * 16px;
+  }
+
+  @if unit($value) == 'em' {
+    $value: strip-unit($value) * 16px;
+  }
+
+  @if type-of($value) == 'number' and not unitless($value) {
+    @return strip-unit($value) / strip-unit($base);
+  }
+
+  @return $value;
+}