Unitless line-height

* Instead of 20px as @line-height-base, use 1.5
* Update typographic scale for headings to use unitless as well--required some twerking of decimals a bit and some rounding
* Introduce new @line-height-computed value, which takes base font-size and multiplies it by 1.5, for use in padding and margin on components

6 files changed, 46 insertions, 48 deletions

diff --git a/less/alerts.less b/less/alerts.less
index 882b25bef..bb7846249 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -7,8 +7,8 @@
 // -------------------------
 
 .alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: @line-height-base;
+  padding: 10px 35px 10px 15px;
+  margin-bottom: @line-height-computed;
   color: @alert-text;
   background-color: @alert-bg;
   border: 1px solid @alert-border;
@@ -84,8 +84,8 @@
 // -------------------------
 
 .alert-block {
-  padding-top: 14px;
-  padding-bottom: 14px;
+  padding-top: 15px;
+  padding-bottom: 15px;
 }
 .alert-block > p,
 .alert-block > ul {
diff --git a/less/forms.less b/less/forms.less
index 6b3bff728..4a99a7793 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -20,9 +20,9 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
-  line-height: (@line-height-base * 2);
+  line-height: @line-height-headings;
   color: @gray-dark;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
@@ -170,7 +170,7 @@ textarea {
 .radio,
 .checkbox {
   display: block;
-  min-height: @line-height-base; // clear the floating input if there is no label text
+  min-height: @line-height-computed; // clear the floating input if there is no label text
   margin-top: 10px;
   margin-bottom: 10px;
   padding-left: 20px;
@@ -320,9 +320,9 @@ select:focus:invalid {
 // ------------
 
 .form-actions {
-  padding: (@line-height-base - 1) 20px @line-height-base;
-  margin-top: @line-height-base;
-  margin-bottom: @line-height-base;
+  padding: @line-height-computed 20px;
+  margin-top: @line-height-computed;
+  margin-bottom: @line-height-computed;
   background-color: @form-actions-bg;
   border-top: 1px solid #e5e5e5;
   .clearfix(); // Adding clearfix to allow for .pull-right button containers
diff --git a/less/navbar.less b/less/navbar.less
index 7a02a491b..975f2ebb2 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -24,8 +24,8 @@
   margin-top: 10px;
 
   > li > a {
-    padding-top: ((@navbar-height - @line-height-base) / 2);
-    padding-bottom: ((@navbar-height - @line-height-base) / 2);
+    padding-top: ((@navbar-height - @line-height-computed) / 2);
+    padding-bottom: ((@navbar-height - @line-height-computed) / 2);
     color: @navbar-link-color;
     line-height: 20px;
   }
@@ -91,7 +91,7 @@
   padding: 15px;
   font-size: @font-size-large;
   font-weight: 500;
-  line-height: @line-height-base;
+  line-height: @line-height-computed;
   color: @navbar-brand-color;
   text-align: center;
   &:hover,
@@ -323,7 +323,7 @@
 // Add a class to make any element properly align itself vertically within the navbars.
 
 .navbar-text {
-
+  .navbar-vertical-align(@line-height-computed);
 }
 
 
diff --git a/less/progress-bars.less b/less/progress-bars.less
index 9df0251e3..e963fa968 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -44,8 +44,8 @@
 // Outer container
 .progress {
   overflow: hidden;
-  height: @line-height-base;
-  margin-bottom: @line-height-base;
+  height: @line-height-computed;
+  margin-bottom: @line-height-computed;
   background-color: @progress-bg;
   border-radius: @border-radius-base;
   .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
diff --git a/less/type.less b/less/type.less
index f6b5eecd5..e562bb2c2 100644
--- a/less/type.less
+++ b/less/type.less
@@ -7,10 +7,10 @@
 // -------------------------
 
 p {
-  margin: 0 0 (@line-height-base / 2);
+  margin: 0 0 (@line-height-computed / 2);
 }
 .lead {
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
   font-weight: 200;
   line-height: 1.4;
@@ -56,7 +56,7 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: @headings-font-family;
   font-weight: @headings-font-weight;
-  line-height: @line-height-base;
+  line-height: @line-height-headings;
   small {
     font-weight: normal;
     line-height: 1;
@@ -67,30 +67,26 @@ h1, h2, h3, h4, h5, h6,
 h1,
 h2,
 h3 {
-  margin-top: @line-height-base;
-  margin-bottom: (@line-height-base / 2);
-  line-height: (@line-height-base * 2);
-}
-h3 {
-  line-height: (@line-height-base * 1.5);
+  margin-top: @line-height-computed;
+  margin-bottom: (@line-height-computed / 2);
 }
 h4,
 h5,
 h6 {
-  margin-top: (@line-height-base / 2);
-  margin-bottom: (@line-height-base / 2);
+  margin-top: (@line-height-computed / 2);
+  margin-bottom: (@line-height-computed / 2);
 }
 
-h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px
-h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px
-h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px
-h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px
+h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px
+h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px
+h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px
 h5, .h5 { font-size:  @font-size-base; }
-h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px
+h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px
 
-h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px
-h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px
-h3 small, .h3 small { font-size: @font-size-base; }
+h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
+h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
+h3 small, .h3 small,
 h4 small, .h4 small { font-size: @font-size-base; }
 
 
@@ -98,8 +94,8 @@ h4 small, .h4 small { font-size: @font-size-base; }
 // -------------------------
 
 .page-header {
-  padding-bottom: ((@line-height-base / 2) - 1);
-  margin: (@line-height-base * 2) 0 @line-height-base;
+  padding-bottom: ((@line-height-computed / 2) - 1);
+  margin: (@line-height-computed * 2) 0 @line-height-computed;
   border-bottom: 1px solid @gray-lighter;
 }
 
@@ -112,7 +108,7 @@ h4 small, .h4 small { font-size: @font-size-base; }
 ul,
 ol {
   padding: 0;
-  margin: 0 0 (@line-height-base / 2) 25px;
+  margin: 0 0 (@line-height-computed / 2) 25px;
 }
 ul ul,
 ul ol,
@@ -143,7 +139,7 @@ li {
 
 // Description Lists
 dl {
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
 }
 dt,
 dd {
@@ -153,7 +149,7 @@ dt {
   font-weight: bold;
 }
 dd {
-  margin-left: (@line-height-base / 2);
+  margin-left: (@line-height-computed / 2);
 }
 // Horizontal layout (like forms)
 .dl-horizontal {
@@ -175,7 +171,7 @@ dd {
 
 // Horizontal rules
 hr {
-  margin: @line-height-base 0;
+  margin: @line-height-computed 0;
   border: 0;
   border-top: 1px solid @hr-border;
   border-bottom: 1px solid #fff;
@@ -196,8 +192,8 @@ abbr.initialism {
 
 // Blockquotes
 blockquote {
-  padding: (@line-height-base/2) @line-height-base;
-  margin: 0 0 @line-height-base;
+  padding: (@line-height-computed / 2) @line-height-computed;
+  margin: 0 0 @line-height-computed;
   border-left: 5px solid @gray-lighter;
   p {
     font-size: (@font-size-base * 1.25);
@@ -249,7 +245,7 @@ blockquote:after {
 // Addresses
 address {
   display: block;
-  margin-bottom: @line-height-base;
+  margin-bottom: @line-height-computed;
   font-style: normal;
   line-height: @line-height-base;
 }
diff --git a/less/variables.less b/less/variables.less
index fd69c2438..c8ddb0c9e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -50,7 +50,9 @@
 @font-size-small:         (@font-size-base * 0.85); // ~12px
 @font-size-mini:          (@font-size-base * 0.75); // ~11px
 
-@line-height-base:        20px;
+@line-height-base:        1.5;
+@line-height-computed:    (@font-size-base * @line-height-base);
+@line-height-headings:    1.1;
 
 @headings-font-family:    inherit; // empty to use BS default, @font-family-base
 @headings-font-weight:    500;
@@ -121,9 +123,9 @@
 
 @input-color-placeholder:        @gray-light;
 
-@input-height-base:              (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
-@input-height-large:             (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
-@input-height-small:             (@line-height-base + 6px);  // base line-height + 4px vertical padding + 2px top/bottom border
+@input-height-base:              (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border
+@input-height-large:             (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border
+@input-height-small:             (@line-height-computed + 6px);  // base line-height + 4px vertical padding + 2px top/bottom border
 
 @form-actions-bg:                 #f5f5f5;