Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip

346122a0 · Jacob Thornton · 8d2f14d8 · c474f996 · 346122a0 · 346122a0
Commit 346122a0 authored Sep 08, 2011 by Jacob Thornton
18 changed files
--- a/Makefile
+++ b/Makefile
 DATE=$(shell DATE)
-BOOTSTRAP = ./bootstrap-1.2.0.css
+BOOTSTRAP = ./bootstrap-1.3.0.css
-BOOTSTRAP_MIN = ./bootstrap-1.2.0.min.css
+BOOTSTRAP_MIN = ./bootstrap-1.3.0.min.css
 BOOTSTRAP_LESS = ./lib/bootstrap.less
 LESS_COMPESSOR ?= `which lessc`
 WATCHR ?= `which watchr`

--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Here's what the LESS version looks like:
 Or if you prefer, the standard css way:
-    <link rel="stylesheet" type="text/css" href="bootstrap-1.2.0.css">
+    <link rel="stylesheet" type="text/css" href="bootstrap-1.3.0.css">
 For more info, refer to the docs!

--- a/bootstrap-1.2.0.css
+++ b/bootstrap-1.2.0.css
@@ -6,7 +6,7 @@
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Tue Sep  6 21:46:15 PDT 2011
+ * Date: Thu Sep  8 10:45:51 PDT 2011
 */
 /* Reset.less
 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -185,20 +185,6 @@ textarea {
  margin-left: auto;
  margin-right: auto;
 }
-.fixed-container {
-  width: 940px;
-  margin-left: auto;
-  margin-right: auto;
-  zoom: 1;
-  margin-bottom: 18px;
-}
-.fixed-container:before, .fixed-container:after {
-  display: table;
-  content: "";
-}
-.fixed-container:after {
-  clear: both;
-}
 .btn.danger,
 .alert-message.danger,
 .btn.danger:hover,
@@ -293,7 +279,6 @@ TODO:
 * ------------------------------------------------------------------------------------------- */
 .row {
  zoom: 1;
-  margin-bottom: 18px;
  margin-left: -20px;
 }
 .row:before, .row:after {
@@ -303,7 +288,7 @@ TODO:
 .row:after {
  clear: both;
 }
-.row [class^="span"] {
+.row [class*="span"] {
  display: inline;
  float: left;
  margin-left: 20px;
@@ -444,7 +429,6 @@ body {
  margin-left: auto;
  margin-right: auto;
  zoom: 1;
-  margin-bottom: 18px;
 }
 .container:before, .container:after {
  display: table;
@@ -457,7 +441,6 @@ body {
  padding-left: 20px;
  padding-right: 20px;
  zoom: 1;
-  margin-bottom: 18px;
 }
 .container-fluid:before, .container-fluid:after {
  display: table;
@@ -699,7 +682,7 @@ fieldset legend {
  color: #404040;
 }
-.clearfix {
+form .clearfix {
  margin-bottom: 18px;
 }
 label,
@@ -1070,21 +1053,24 @@ table {
  width: 100%;
  margin-bottom: 18px;
  padding: 0;
-  border-collapse: separate;
+  border-collapse: collapse;
  font-size: 13px;
 }
 table th, table td {
  padding: 10px 10px 9px;
-  line-height: 13.5px;
+  line-height: 18px;
  text-align: left;
-  vertical-align: middle;
+  border: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
 }
 table th {
  padding-top: 9px;
  font-weight: bold;
+  vertical-align: middle;
  border-bottom-width: 2px;
 }
+table td {
+  vertical-align: top;
+}
 .zebra-striped tbody tr:nth-child(odd) td {
  background-color: #f9f9f9;
 }
@@ -1227,6 +1213,9 @@ table .headerSortUp.purple, table .headerSortDown.purple {
  -moz-opacity: 1;
  opacity: 1;
 }
+.topbar form.pull-right {
+  float: right;
+}
 .topbar input {
  background-color: #444;
  background-color: rgba(255, 255, 255, 0.3);
@@ -1506,7 +1495,6 @@ a.menu:after, .dropdown-toggle:after {
  padding: 0;
  list-style: none;
  zoom: 1;
-  margin-bottom: 18px;
 }
 .tabs:before,
 .pills:before,
@@ -1591,6 +1579,38 @@ a.menu:after, .dropdown-toggle:after {
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
+.breadcrumb {
+  margin: 0 0 18px;
+  padding: 7px 14px;
+  background-color: #f5f5f5;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
+  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5));
+  background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
+  background-image: linear-gradient(top, #ffffff, #f5f5f5);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
+  border: 1px solid #ddd;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff;
+  -moz-box-shadow: inset 0 1px 0 #ffffff;
+  box-shadow: inset 0 1px 0 #ffffff;
+}
+.breadcrumb li {
+  display: inline;
+  text-shadow: 0 1px 0 #fff;
+}
+.breadcrumb .divider {
+  padding: 0 5px;
+  color: #bfbfbf;
+}
+.breadcrumb .active a {
+  color: #404040;
+}
 .hero-unit {
  background-color: #f5f5f5;
  margin-bottom: 30px;
@@ -1948,7 +1968,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
  -moz-box-shadow: inset 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
  zoom: 1;
-  margin-bottom: 18px;
  margin-bottom: 0;
 }
 .modal-footer:before, .modal-footer:after {

--- a/bootstrap-1.2.0.min.css
+++ b/bootstrap-1.2.0.min.css
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -66,7 +66,7 @@ section > .row {
  line-height: 27px;
 }
-div.quickstart {
+.quickstart {
  background-color: #f5f5f5;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5));
@@ -81,13 +81,16 @@ div.quickstart {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #eee;
 }
-div.quickstart div.row {
+.quickstart .container {
+  margin-bottom: 0;
+}
+.quickstart .row {
  margin: 0 -20px;
  -webkit-box-shadow: 1px 0 0 #f9f9f9;
     -moz-box-shadow: 1px 0 0 #f9f9f9;
          box-shadow: 1px 0 0 #f9f9f9;
 }
-div.quickstart div.columns {
+.quickstart [class*="span"] {
  width: 285px;
  height: 117px;
  margin-left: 0;
@@ -97,21 +100,21 @@ div.quickstart div.columns {
     -moz-box-shadow: inset 1px 0 0 #f9f9f9;
          box-shadow: inset 1px 0 0 #f9f9f9;
 }
-div.quickstart div.columns:last-child {
+.quickstart [class*="span"]:last-child {
  border-right: 1px solid #eee;
  width: 286px;
 }
-div.quickstart h6,
+.quickstart h6,
-div.quickstart p {
+.quickstart p {
  line-height: 18px;
  text-align: center;
  margin-bottom: 9px;
  color: #333;
 }
-div.quickstart h6 {
+.quickstart h6 {
  color: #999;
 }
-div.quickstart form textarea {
+.quickstart textarea {
  display: block;
  width: 275px;
  height: auto;
@@ -137,7 +140,7 @@ div.quickstart form textarea {
  margin-top: 10px;
  margin-bottom: 10px;
 }
-.show-grid .column, .show-grid .columns {
+.show-grid [class*="span"] {
  background-color: #eee;
  text-align: center;
  -webkit-border-radius: 3px;
@@ -146,7 +149,7 @@ div.quickstart form textarea {
  height: 30px;
  line-height: 30px;
 }
-.show-grid:hover .column, .show-grid:hover .columns {
+.show-grid:hover [class*="span"] {
  background: rgba(0, 0, 0, 0.25);
 }
 /* Render mini layout previews

--- a/docs/assets/img/example-diagram-01.png
+++ b/docs/assets/img/example-diagram-01.png
--- a/docs/assets/img/example-diagram-02.png
+++ b/docs/assets/img/example-diagram-02.png
--- a/docs/assets/img/example-diagram-03.png
+++ b/docs/assets/img/example-diagram-03.png
--- a/docs/index.html
+++ b/docs/index.html
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -22,7 +22,7 @@
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <!-- Le styles -->
-    <link href="../bootstrap-1.2.0.css" rel="stylesheet">
+    <link href="../bootstrap-1.3.0.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

--- a/examples/container-app.html
+++ b/examples/container-app.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Bootstrap, from Twitter</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <!-- Le styles -->
+    <link href="../bootstrap-1.3.0.css" rel="stylesheet">
+    <style type="text/css">
+      /* Override some defaults */
+      html, body {
+        background-color: #eee;
+      }
+      body {
+        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
+      }
+      .container > footer p {
+        text-align: center; /* center align it with the container */
+      }
+      .container {
+        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
+      }
+      /* The white background content wrapper */
+      .content {
+        background-color: #fff;
+        padding: 20px;
+        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
+        -webkit-border-radius: 0 0 6px 6px;
+           -moz-border-radius: 0 0 6px 6px;
+                border-radius: 0 0 6px 6px;
+        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+                box-shadow: 0 1px 2px rgba(0,0,0,.15);
+      }
+      /* Page header tweaks */
+      .page-header {
+        background-color: #f5f5f5;
+        padding: 20px 20px 10px;
+        margin: -20px -20px 20px;
+      }
+      /* Styles you shouldn't keep as they are for displaying this base example only */
+      .content .span10,
+      .content .span4 {
+        min-height: 500px;
+      }
+      /* Give a quick and non-cross-browser friendly divider */
+      .content .span4 {
+        margin-left: 0;
+        padding-left: 19px;
+        border-left: 1px solid #eee;
+      }
+      .topbar .btn {
+        border: 0;
+      }
+    </style>
+    <!-- Le fav and touch icons -->
+    <link rel="shortcut icon" href="images/favicon.ico">
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
+  </head>
+  <body>
+    <div class="topbar">
+      <div class="fill">
+        <div class="container">
+          <h3><a href="#">Project name</a></h3>
+          <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+          <form action="" class="pull-right">
+            <input class="input-small" type="text" placeholder="Username">
+            <input class="input-small" type="password" placeholder="Password">
+            <button class="btn" type="submit">Sign in</button>
+          </form>
+        </div>
+      </div>
+    </div>
+    <div class="container">
+      <div class="content">
+        <div class="page-header">
+          <h1>Page name <small>Supporting text or tagline</small></h1>
+        </div>
+        <div class="row">
+          <div class="span10">
+            <h2>Main content</h2>
+          </div>
+          <div class="span4">
+            <h3>Secondary content</h3>
+          </div>
+        </div>
+      </div>
+      <footer>
+        <p>&copy; Company 2011</p>
+      </footer>
+    </div> <!-- /container -->
+  </body>
+</html>
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -12,7 +12,7 @@
    <![endif]-->
    <!-- Le styles -->
-    <link href="../bootstrap-1.2.0.css" rel="stylesheet">
+    <link href="../bootstrap-1.3.0.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;

--- a/examples/hero.html
+++ b/examples/hero.html
@@ -12,7 +12,7 @@
    <![endif]-->
    <!-- Le styles -->
-    <link href="../bootstrap-1.2.0.css" rel="stylesheet">
+    <link href="../bootstrap-1.3.0.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;

--- a/lib/forms.less
+++ b/lib/forms.less
@@ -26,7 +26,7 @@ fieldset {
 }
 // Parent element that clears floats and wraps labels and fields together
-.clearfix {
+form .clearfix {
  margin-bottom: @baseline;
 }

--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -62,6 +62,10 @@
    position: relative;
    .opacity(100);
  }
+  // Todo: remove from v2.0 when ready, added for legacy
+  form.pull-right {
+    float: right;
+  }
  input {
    background-color: #444;
    background-color: rgba(255,255,255,.3);
@@ -398,6 +402,32 @@ a.menu:after,
 }
+// BREADCRUMBS
+// -----------
+.breadcrumb {
+  margin: 0 0 @baseline;
+  padding: 7px 14px;
+  #gradient > .vertical(#ffffff, #f5f5f5);
+  border: 1px solid #ddd;
+  .border-radius(3px);
+  .box-shadow(inset 0 1px 0 #fff);
+  li {
+    display: inline;
+    text-shadow: 0 1px 0 #fff;
+  }
+  .divider {
+    padding: 0 5px;
+    color: @grayLight;
+  }
+  a {
+  }
+  .active a {
+    color: @grayDark;
+  }
+}
 // PAGE HEADERS
 // ------------

--- a/lib/preboot.less
+++ b/lib/preboot.less
@@ -121,7 +121,7 @@
 }
 // Grid System
-.fixed-container {
+.fixed-container() {
  width: @siteWidth;
  margin-left: auto;
  margin-right: auto;
@@ -133,6 +133,17 @@
 .offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
 }
+// Necessary grid styles for every column to make them appear next to each other horizontally
+.gridColumn() {
+  display: inline;
+  float: left;
+  margin-left: @gridGutterWidth;
+}
+// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
+.makeColumn(@columnSpan: 1) {
+  .gridColumn();
+  .columns(@columnSpan);
+}
 // Border Radius
 .border-radius(@radius: 5px) {

--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -13,10 +13,8 @@
  // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
  // Credit to @dhg for the idea
-  [class^="span"] {
+  [class*="span"] {
-    display: inline;
+    .gridColumn();
-    float: left;
-    margin-left: @gridGutterWidth;
  }
  // Default columns

--- a/lib/tables.less
+++ b/lib/tables.less
@@ -11,20 +11,23 @@ table {
  width: 100%;
  margin-bottom: @baseline;
  padding: 0;
-  border-collapse: separate;
+  border-collapse: collapse;
-  font-size: 13px;
+  font-size: @basefont;
  th, td {
    padding: 10px 10px 9px;
-    line-height: @baseline * .75;
+    line-height: @baseline;
    text-align: left;
-    vertical-align: middle;
+    border: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
  }
  th {
    padding-top: 9px;
    font-weight: bold;
+    vertical-align: middle;
    border-bottom-width: 2px;
  }
+  td {
+    vertical-align: top;
+  }
 }