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

13 files changed, 238 insertions, 117 deletions

diff --git a/less/accordion.less b/less/accordion.less
index 1ebd5b1a1..11a36b544 100644
--- a/less/accordion.less
+++ b/less/accordion.less
@@ -9,7 +9,8 @@
 
 // Group == heading + body
 .accordion-group {
-  background-color: #f5f5f5;
+  margin-bottom: 2px;
+  border: 1px solid #e5e5e5;
   .border-radius(4px);
 }
 .accordion-heading {
@@ -19,9 +20,6 @@
   display: block;
   padding: 8px 15px;
 }
-.accordion-body {
-  margin-bottom: 2px;
-}
 
 // Inner needs the styles because you can't animate properly with any styles on the element
 .accordion-inner {
diff --git a/less/alerts.less b/less/alerts.less
index 23c17e704..562826fd3 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -18,6 +18,7 @@
 // Adjust close link position
 .alert .close {
   position: relative;
+  top: -2px;
   right: -21px;
   line-height: 18px;
 }
diff --git a/less/forms.less b/less/forms.less
index b0daeb034..6b0f5ec52 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -175,6 +175,11 @@ input[type="hidden"] {
 .checkbox.inline + .checkbox.inline {
   margin-left: 10px; // space out consecutive inline controls
 }
+// But don't forget to remove their padding on first-child
+.controls > .radio.inline:first-child,
+.controls > .checkbox.inline:first-child {
+  padding-top: 5px; // has to be padding because margin collaspes
+}
 
 
 
@@ -490,9 +495,20 @@ select:focus:required:invalid {
   }
 }
 .form-search label,
-.form-inline label {
+.form-inline label,
+.form-search .input-append,
+.form-inline .input-append,
+.form-search .input-prepend,
+.form-inline .input-prepend {
   display: inline-block;
 }
+// Make the prepend and append add-on vertical-align: middle;
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on,
+.form-search .input-append .add-on,
+.form-inline .input-prepend .add-on {
+  vertical-align: middle;
+}
 
 // Margin to space out fieldsets
 .control-group {
diff --git a/less/grid.less b/less/grid.less
index d5b5f487d..4493d0b95 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -1,14 +1,40 @@
 // GRID SYSTEM
 // -----------
-// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
+
+
+// Default grid sizing
+// -------------------
+@gridColumns:           12;
+@gridColumnWidth:       60px;
+@gridGutterWidth:       20px;
+
+@gridRowWidth:          (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+@gridTotalWidth:        @gridRowWidth;
+
+
+// Columns and offseting mixins
+// ----------------------------
+.columns(@columns: 1) {
+  //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+  width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
+}
+.offset(@columns: 1) {
+  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+}
+// Necessary grid styles for every column to make them appear next to each other horizontally
+.gridColumn() {
+  float: left;
+  margin-left: @gridGutterWidth;
+}
+
+// Grid rows and columns
+// ---------------------
 .row {
   margin-left: @gridGutterWidth * -1;
   .clearfix();
 }
 
-// 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
+// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
 [class*="span"] {
   .gridColumn();
 }
@@ -39,3 +65,42 @@
 .offset9   { .offset(9); }
 .offset10  { .offset(10); }
 .offset11  { .offset(11); }
+
+
+
+// FLUID GRID SYSTEM
+// -----------------
+// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.
+
+.row-fluid {
+  @gridColumnWidth: 6.382978723%;
+  @gridGutterWidth: 2.127659574%;
+
+  width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
+  margin-left: 0 - @gridGutterWidth;
+
+  // Redeclare the mixins
+  .gridColumn() {
+    float: left;
+    margin-left: @gridGutterWidth;
+  } 
+  [class*="span"] {
+    .gridColumn();
+  }
+  .fluidColumns(@columns: 1) {
+    width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
+  }
+  // Redeclare the columns
+  .span1     { .fluidColumns(1); }
+  .span2     { .fluidColumns(2); }
+  .span3     { .fluidColumns(3); }
+  .span4     { .fluidColumns(4); }
+  .span5     { .fluidColumns(5); }
+  .span6     { .fluidColumns(6); }
+  .span7     { .fluidColumns(7); }
+  .span8     { .fluidColumns(8); }
+  .span9     { .fluidColumns(9); }
+  .span10    { .fluidColumns(10); }
+  .span11    { .fluidColumns(11); }
+  .span12    { .fluidColumns(12); }
+}
diff --git a/less/labels.less b/less/labels.less
index 06dc7f3c0..c0f427750 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -9,8 +9,8 @@
   text-transform: uppercase;
   background-color: @grayLight;
   .border-radius(3px);
-  &.important { background-color: @errorText; }
-  &.warning   { background-color: @orange; }
-  &.success   { background-color: @successText; }
-  &.info      { background-color: @infoText; }
 }
+.label-important { background-color: @errorText; }
+.label-warning   { background-color: @orange; }
+.label-success   { background-color: @successText; }
+.label-info      { background-color: @infoText; }
diff --git a/less/layouts.less b/less/layouts.less
index 14435c9d1..c8d358b24 100644
--- a/less/layouts.less
+++ b/less/layouts.less
@@ -10,34 +10,8 @@
 }
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.fluid-container {
-  position: relative;
-  min-width: @siteWidth;
+.container-fluid {
   padding-left: @gridGutterWidth;
   padding-right: @gridGutterWidth;
   .clearfix();
-}
-
-// Sidebars (left and right options)
-.fluid-sidebar {
-  width: @fluidSidebarWidth;
-  margin: 0 20px 18px;
-}
-.sidebar-left   { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
-.sidebar-right  { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
-
-// Float the sidebars accordingly
-.sidebar-left .fluid-sidebar {
-  float: left;
-  margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
-}
-.sidebar-right .fluid-sidebar {
-  float: right;
-  margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
-}
-
-// The main content area
-.fluid-content {
-  float: left;
-  width: 100%;
-}
+}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 2bfcd053e..2d0e2d4c0 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -133,31 +133,12 @@
 // Site container
 // -------------------------
 .container-fixed() {
-  width: @siteWidth;
+  width: @gridTotalWidth;
   margin-left: auto;
   margin-right: auto;
   .clearfix();
 }
 
-// Columns and offseting
-// -------------------------
-.columns(@columns: 1) {
-  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-}
-.offset(@columns: 1) {
-  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-}
-// Necessary grid styles for every column to make them appear next to each other horizontally
-.gridColumn() {
-  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);
-}
-
 
 
 // CSS3 PROPERTIES
diff --git a/less/navbar.less b/less/navbar.less
index 379cbb56d..25ca7b4e2 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -7,11 +7,15 @@
 
 .navbar {
   overflow: visible;
+  margin-bottom: @baseLineHeight;
 }
-// gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
+
+// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present
 .navbar-inner {
-  background-color: @navbarBackground;
+  padding-left:  20px;
+  padding-right: 20px;
   #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
+  .border-radius(4px);
   @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
   .box-shadow(@shadow);
 }
@@ -21,8 +25,8 @@
   display: none;
   float: right;
   padding: 7px 10px;
-  margin-left: 10px;
-  margin-right: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
   .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
   .box-shadow(@shadow);
@@ -38,6 +42,10 @@
 .btn-navbar .i-bar + .i-bar {
   margin-top: 3px;
 }
+.nav-collapse.collapse {
+  height: auto !important; // Required to be !important to override native collapse plugin
+}
+
 
 // Brand, links, text, and buttons
 .navbar {
@@ -138,20 +146,9 @@
 }
 
 
-// STATIC OR FIXED?
-// ----------------
+// FIXED NAVBAR
+// ------------
 
-// Static navbar
-.navbar-static {
-  margin-bottom: @baseLineHeight;
-}
-.navbar-static .navbar-inner {
-  padding-left:  20px;
-  padding-right: 20px;
-  .border-radius(4px);
-}
-
-// Fixed navbar
 .navbar-fixed-top {
   position: fixed;
   top: 0;
@@ -159,6 +156,11 @@
   left: 0;
   z-index: @zindexFixedNavbar;
 }
+.navbar-fixed-top .navbar-inner {
+  padding-left:  0;
+  padding-right: 0;
+  .border-radius(0);
+}
 
 
 // NAVIGATION
diff --git a/less/pager.less b/less/pager.less
index de009afda..104e41cab 100644
--- a/less/pager.less
+++ b/less/pager.less
@@ -13,10 +13,15 @@
 }
 .pager a {
   display: inline-block;
-  padding: 6px 15px;
-  background-color: #f5f5f5;
+  padding: 5px 14px;
+  background-color: #fff;
+  border: 1px solid #ddd;
   .border-radius(15px);
 }
+.pager a:hover {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
 .pager .next a {
   float: right;
 }
diff --git a/less/progress-bars.less b/less/progress-bars.less
index eeb14eef7..c3144e1bd 100644
--- a/less/progress-bars.less
+++ b/less/progress-bars.less
@@ -53,7 +53,7 @@
 }
 
 // Striped bars
-.progress.striped .bar {
+.progress-striped .bar {
   #gradient > .striped(#62c462);
   .background-size(40px 40px);
 }
@@ -71,25 +71,25 @@
 // ------
 
 // Danger (red)
-.progress.danger .bar {
+.progress-danger .bar {
   #gradient > .vertical(#ee5f5b, #c43c35);
 }
-.progress.danger.striped .bar {
+.progress-danger.progress-striped .bar {
   #gradient > .striped(#ee5f5b);
 }
 
 // Success (green)
-.progress.success .bar {
+.progress-success .bar {
   #gradient > .vertical(#62c462, #57a957);
 }
-.progress.success.striped .bar {
+.progress-success.progress-striped .bar {
   #gradient > .striped(#62c462);
 }
 
 // Info (teal)
-.progress.info .bar {
+.progress-info .bar {
   #gradient > .vertical(#5bc0de, #339bb9);
 }
-.progress.info.striped .bar {
+.progress-info.progress-striped .bar {
   #gradient > .striped(#5bc0de);
 }
diff --git a/less/responsive.less b/less/responsive.less
index 6c3102c14..107fa7dd7 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -115,6 +115,10 @@
     width: auto;
     padding: 0 20px;
   }
+  // Fluid rows
+  .row-fluid {
+    width: 100%;
+  }
   // Undo negative margin on rows
   .row {
     margin-left: 0;
@@ -135,10 +139,10 @@
 @media (min-width: 768px) and (max-width: 940px) {
 
   // Reset grid variables
-  @gridColumns:       16;
-  @gridColumnWidth:   44px;
+  @gridColumns:       12;
+  @gridColumnWidth:   42px;
   @gridGutterWidth:   20px;
-  @siteWidth:         748px;
+  @siteWidth:         724px;
 
   // Bring grid mixins to recalculate widths
   .columns(@columns: 1) {
@@ -148,11 +152,11 @@
     margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
   }
 
-  // 16cols at 30px wide with 16px gutters
+  // 12cols at 44px wide with 20px gutters
   .container {
     width: @siteWidth;
-    padding-left: 10px;
-    padding-right: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
   }
 
   // Default columns
@@ -181,8 +185,43 @@
   .offset9   { .offset(9); }
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
 
+  // FLUID GRID
+  // ----------
+  .row-fluid {
+    @gridColumnWidth:     5.801104972%;
+    @gridGutterWidth:     2.762430939%;
+    @gridRowWidth:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+    @gridTotalWidth:      @gridRowWidth;
+
+    width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
+    margin-left: 0 - @gridGutterWidth;
+
+    // Redeclare the mixins
+    .gridColumn() {
+      float: left;
+      margin-left: @gridGutterWidth;
+    } 
+    [class*="span"] {
+      .gridColumn();
+    }
+    .fluidColumns(@columns: 1) {
+      width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
+    }
+    // Redeclare the columns
+    .span1     { .fluidColumns(1); }
+    .span2     { .fluidColumns(2); }
+    .span3     { .fluidColumns(3); }
+    .span4     { .fluidColumns(4); }
+    .span5     { .fluidColumns(5); }
+    .span6     { .fluidColumns(6); }
+    .span7     { .fluidColumns(7); }
+    .span8     { .fluidColumns(8); }
+    .span9     { .fluidColumns(9); }
+    .span10    { .fluidColumns(10); }
+    .span11    { .fluidColumns(11); }
+    .span12    { .fluidColumns(12); }
+  }
 }
 
 
@@ -199,10 +238,10 @@
   // Unfix the navbar
   .navbar-fixed-top {
     position: static;
-    margin-bottom: @baseLineHeight * 2;
+    margin-bottom: @baseLineHeight;
   }
   .navbar-inner {
-    padding: 10px;
+    padding: 5px;
     background-image: none;
   }
   .navbar .container {
@@ -210,16 +249,18 @@
   }
   // Account for brand name
   .navbar .brand {
-    float: none;
-    display: block;
-    padding-left: 15px;
-    padding-right: 15px;
-    margin: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 0 0 0 -5px;
+  }
+  // Nav collapse clears brand
+  .navbar .nav-collapse {
+    clear: left;
   }
   // Block-level the nav
   .navbar .nav {
     float: none;
-    margin: (@baseLineHeight / 2) 0;
+    margin: 0 0 (@baseLineHeight / 2);
   }
   .navbar .nav > li {
     float: none;
@@ -248,8 +289,10 @@
   // Dropdowns in the navbar
   .navbar .dropdown-menu {
     position: static;
-    display: block;
+    top: auto;
+    left: auto;
     float: none;
+    display: block;
     max-width: none;
     margin: 0 15px;
     padding: 0;
@@ -291,6 +334,7 @@
     display: block;
   }
 
+  // Hide everything in the navbar save .brand and toggle button */
   .nav-collapse {
     overflow: hidden;
     height: 0;
@@ -301,8 +345,8 @@
 
 // LARGE DESKTOP & UP
 // ------------------
-/*
-@media (min-width: 1210px) {
+
+@media (min-width: 1200px) {
 
   // Reset grid variables
   @gridColumns:       12;
@@ -310,6 +354,14 @@
   @gridGutterWidth:   30px;
   @siteWidth:         1170px;
 
+  // Thumbnails
+  .thumbnails {
+    margin-left: @gridGutterWidth * -1;
+  }
+  .thumbnails > li {
+    margin-left: @gridGutterWidth;
+  }
+
   // Bring grid mixins to recalculate widths
   .columns(@columns: 1) {
     width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
@@ -317,7 +369,6 @@
   .offset(@columns: 1) {
     margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
   }
-
   .container {
     width: @siteWidth;
   }
@@ -354,7 +405,42 @@
   .offset9   { .offset(9); }
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
-  .offset12  { .offset(12); }
 
+
+  // FLUID GRID
+  // ----------
+  .row-fluid {
+    @gridColumnWidth:     5.982%;
+    @gridGutterWidth:     2.56%;
+    @gridRowWidth:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+    @gridTotalWidth:      @gridRowWidth;
+
+    width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
+    margin-left: 0 - @gridGutterWidth;
+
+    // Redeclare the mixins
+    .gridColumn() {
+      float: left;
+      margin-left: @gridGutterWidth;
+    } 
+    [class*="span"] {
+      .gridColumn();
+    }
+    .fluidColumns(@columns: 1) {
+      width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
+    }
+    // Redeclare the columns
+    .span1     { .fluidColumns(1); }
+    .span2     { .fluidColumns(2); }
+    .span3     { .fluidColumns(3); }
+    .span4     { .fluidColumns(4); }
+    .span5     { .fluidColumns(5); }
+    .span6     { .fluidColumns(6); }
+    .span7     { .fluidColumns(7); }
+    .span8     { .fluidColumns(8); }
+    .span9     { .fluidColumns(9); }
+    .span10    { .fluidColumns(10); }
+    .span11    { .fluidColumns(11); }
+    .span12    { .fluidColumns(12); }
+  }
 }
-*/
\ No newline at end of file
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 0ba749059..541fbd6a7 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,6 +27,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;
diff --git a/less/variables.less b/less/variables.less
index 4265d7ed3..c1e21978c 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -30,15 +30,6 @@
 @pink:                  #c3325f;
 @purple:                #7a43b6;
 
-// Grid system
-// Modify the grid styles in mixins.less
-@gridColumns:           12;
-@gridColumnWidth:       60px;
-@gridGutterWidth:       20px;
-@siteWidth:             (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-// Fluid width sidebar
-@fluidSidebarWidth:     220px;
-
 // Typography
 @baseFontSize:          13px;
 @baseFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;