Merge branch '21jumpst' into 2.1.0-wip

7 files changed, 120 insertions, 69 deletions

diff --git a/less/buttons.less b/less/buttons.less
index 876d359265..b48b0555b8 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -10,7 +10,7 @@
 .btn {
   display: inline-block;
   .ie7-inline-block();
-  padding: 4px 10px 4px;
+  padding: 4px 14px 4px;
   margin-bottom: 0; // For input.btn
   font-size: @baseFontSize;
   line-height: @baseLineHeight;
@@ -26,7 +26,7 @@
   border-bottom-color: darken(@btnBorder, 10%);
   .border-radius(4px);
   .ie7-restore-left-whitespace(); // Give IE7 some love
-  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
+  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.05)");
 }
 
 // Hover state
@@ -54,7 +54,7 @@
   background-color: darken(@white, 15%) e("\9");
   background-image: none;
   outline: 0;
-  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
+  .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05)");
 }
 
 // Disabled state
diff --git a/less/navbar.less b/less/navbar.less
index 38edac2885..660838eb8e 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -206,7 +206,7 @@
   float: none;
   // Vertically center the text given @navbarHeight
   @elementHeight: 20px;
-  padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1);
+  padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1);
   line-height: 19px;
   color: @navbarLinkColor;
   text-decoration: none;
@@ -379,15 +379,19 @@
 
 
 // Override the default .navbar
-.navbar-subnav {
-}
 .navbar-subnav .navbar-inner {
-  padding: 0;
-  #gradient > .vertical(#f9f9f9, #f1f1f1);
+  #gradient > .vertical(#ffffff, #f1f1f1);
   .box-shadow(none);
   border: 1px solid #e5e5e5;
 }
 
+// Lighten vertical dividers
+.navbar-subnav .divider-vertical {
+  background-color: #f1f1f1;
+  border-right-color: #ffffff;
+}
+
+
 // Change link colors back
 .navbar-subnav .nav > li > a {
   color: @linkColor;
@@ -401,7 +405,10 @@
 .navbar-subnav .nav > .active > a,
 .navbar-subnav .nav > .active > a:hover {
   color: #777;
-  background-color: #e5e5e5;
+  background-color: #eee;
+  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
+     -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
+          box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5);
 }
 
 // Dropdown carets
@@ -411,6 +418,21 @@
   border-bottom-color: @linkColor;
 }
 
+// Reset search input form
+.navbar-subnav .search-query {
+  background-color: #fff;
+  border-color: #ccc;
+  .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)");
+
+  // On :focus, keep the same padding and border
+  &:focus,
+  &.focused {
+    padding: 4px 9px;
+    border: 1px solid rgba(82,168,236,.8);
+    .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)");
+  }
+}
+
 // Open dropdown dropdown-toggle
 .navbar-subnav .nav .open > a {
   color: @linkColorHover;
diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css
index e0870be449..6001f53aab 100644
--- a/less/tests/css-tests.css
+++ b/less/tests/css-tests.css
@@ -12,9 +12,24 @@ body {
 .subhead {
   margin-bottom: 36px;
 }
-h4 {
+/*h4 {
   margin-bottom: 5px;
 }
+*/
+
+.type-test {
+  margin-bottom: 20px;
+  padding: 0 20px 20px;
+  background: url(../../docs/assets/img/grid-baseline-20px.png);
+}
+.type-test h1,
+.type-test h2,
+.type-test h3,
+.type-test h4,
+.type-test h5,
+.type-test h6 {
+  background-color: rgba(255,0,0,.2);
+}
 
 
 /* colgroup tests */
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 2396e348cf..4b8b1a2772 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -55,6 +55,45 @@
 
 
 
+<!-- Typography
+================================================== -->
+
+<div class="page-header">
+  <h1>Typography</h1>
+</div>
+
+<div class="row">
+  <div class="span6">
+    <div class="type-test">
+      <h1>h1. Heading 1</h1>
+      <h2>h2. Heading 2</h2>
+      <h3>h3. Heading 3</h3>
+      <h4>h4. Heading 4</h4>
+      <h5>h5. Heading 5</h5>
+      <h6>h6. Heading 6</h6>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    </div>
+  </div>
+  <div class="span6">
+    <div class="type-test">
+      <h1>h1. Heading 1</h1>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h2>h2. Heading 2</h2>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h3>h3. Heading 3</h3>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h4>h4. Heading 4</h4>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h5>h5. Heading 5</h5>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+      <h6>h6. Heading 6</h6>
+      <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+    </div>
+  </div>
+</div>
+
+
+
 <!-- Fluid grid
 ================================================== -->
 
diff --git a/less/thumbnails.less b/less/thumbnails.less
index d609c7df31..f229a2dada 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,10 +27,10 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: 1;
+  line-height: 20px;
   border: 1px solid #ddd;
   .border-radius(4px);
-  .box-shadow(0 1px 1px rgba(0,0,0,.075));
+  .box-shadow(0 1px 3px rgba(0,0,0,.055));
 }
 // Add a hover state for linked versions only
 a.thumbnail:hover {
@@ -47,4 +47,5 @@ a.thumbnail:hover {
 }
 .thumbnail .caption {
   padding: 9px;
+  color: @gray;
 }
diff --git a/less/type.less b/less/type.less
index a424f0f5c0..e3106c7178 100644
--- a/less/type.less
+++ b/less/type.less
@@ -3,8 +3,8 @@
 // --------------------------------------------------
 
 
-// BODY TEXT
-// ---------
+// Body text
+// -------------------------
 
 p {
   margin: 0 0 @baseLineHeight / 2;
@@ -20,13 +20,15 @@ p {
   line-height: @baseLineHeight * 1.5;
 }
 
-// HEADINGS
-// --------
+
+// Headings
+// -------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+  margin: (@baseLineHeight / 2) 0;
   font-family: @headingsFontFamily;
   font-weight: @headingsFontWeight;
+  line-height: 1;
   color: @headingsColor;
   text-rendering: optimizelegibility; // Fix the character spacing for headings
   small {
@@ -35,59 +37,31 @@ h1, h2, h3, h4, h5, h6 {
     color: @grayLight;
   }
 }
-h1 {
-  font-size: 30px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: @baseLineHeight * 2;
-  small {
-    font-size: 18px;
-  }
-}
-h3 {
-  font-size: 18px;
-  line-height: @baseLineHeight * 1.5;
-  small {
-    font-size: 14px;
-  }
-}
-h4, h5, h6 {
-  line-height: @baseLineHeight;
-}
-h4 {
-  font-size: 14px;
-  small {
-    font-size: 12px;
-  }
-}
-h5 {
-  font-size: 12px;
-}
-h6 {
-  font-size: 11px;
-  color: @grayLight;
-  text-transform: uppercase;
-}
+h1 { font-size: 36px; line-height: 40px; }
+h2 { font-size: 30px; line-height: 40px; }
+h3 { font-size: 24px; line-height: 40px; }
+h4 { font-size: 18px; line-height: 20px; }
+h5 { font-size: 14px; line-height: 20px; }
+h6 { font-size: 12px; line-height: 20px; }
+
+h1 small { font-size: 24px; }
+h2 small { font-size: 18px; }
+h3 small { font-size: 14px; }
+h4 small { font-size: 14px; }
+
 
 // Page header
+// -------------------------
+
 .page-header {
-  padding-bottom: @baseLineHeight - 1;
-  margin: @baseLineHeight 0;
+  margin: @baseLineHeight 0 (@baseLineHeight - 1);
   border-bottom: 1px solid @grayLighter;
 }
-.page-header h1 {
-  line-height: 1;
-}
 
 
 
-// LISTS
-// -----
+// Lists
+// --------------------------------------------------
 
 // Unordered and Ordered lists
 ul, ol {
diff --git a/less/variables.less b/less/variables.less
index 4d07f0649d..9e7146a754 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -46,11 +46,11 @@
 // -------------------------
 @sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
 @serifFontFamily:       Georgia, "Times New Roman", Times, serif;
-@monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;
 
-@baseFontSize:          13px;
+@baseFontSize:          14px;
 @baseFontFamily:        @sansFontFamily;
-@baseLineHeight:        18px;
+@baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@@ -73,7 +73,7 @@
 @btnBorder:                         #ccc;
 
 @btnPrimaryBackground:              @linkColor;
-@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 15%);
+@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);
 
 @btnInfoBackground:                 #5bc0de;
 @btnInfoBackgroundHighlight:        #2f96b4;
@@ -87,7 +87,7 @@
 @btnDangerBackground:               #ee5f5b;
 @btnDangerBackgroundHighlight:      #bd362f;
 
-@btnInverseBackground:              @gray;
+@btnInverseBackground:              #444;
 @btnInverseBackgroundHighlight:     @grayDarker;
 
 
@@ -155,8 +155,8 @@
 // Navbar
 // -------------------------
 @navbarHeight:                    40px;
-@navbarBackground:                @grayDarker;
-@navbarBackgroundHighlight:       @grayDark;
+@navbarBackground:                #111;
+@navbarBackgroundHighlight:       #222;
 
 @navbarText:                      @grayLight;
 @navbarLinkColor:                 @grayLight;