feat(typography): uses a variable for header padding

Variable also shows how padding was calculated [#98157918]
pivotal-cf · Jul 14, 2015 · 8fd4d96 · 8fd4d96
1 parent 492247a
commit 8fd4d96
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -254,7 +254,9 @@ $font-weight-em-max:      900;
 
 $headings-font-family:    null;
 $headings-font-weight:    400 !default;
+$former-headings-line-height: 1.5;
 $headings-line-height:    1.286 !default;
+$headings-padding:        1em * ($former-headings-line-height - $headings-line-height) / 2;
 $headings-color:          null;
 
 //TODO: create a mixin that will determine multiplers based on px-size

diff --git a/src/pivotal-ui/components/typography/typography.scss b/src/pivotal-ui/components/typography/typography.scss
@@ -115,8 +115,8 @@ If it's not a heading but you need similar visual treatment you can add just the
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
-  padding-top: 0.107em;
-  padding-bottom: 0.107em;
+  padding-top: $headings-padding;
+  padding-bottom: $headings-padding;
 }
 
 h1, .h1, h2, .h2, h3, .h3 {