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

8 files changed, 367 insertions, 142 deletions

diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index 62f2ce916..9665306fd 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -23,4 +23,7 @@
 @import "type.less";
 @import "forms.less";
 @import "tables.less";
-@import "patterns.less";
\ No newline at end of file
+@import "patterns.less";
+
+// Responsive
+@import "responsive.less";
\ No newline at end of file
diff --git a/lib/forms.less b/lib/forms.less
index 4bdddc3a2..6edf29e53 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -37,12 +37,6 @@ label {
   color: @grayDark;
 }
 
-// Checkboxs and radio buttons
-input[type=checkbox],
-input[type=radio] {
-  cursor: pointer;
-}
-
 // Inputs, Textareas, Selects
 input,
 textarea,
@@ -69,11 +63,13 @@ input[type=radio] {
   *margin-top: 0; /* IE6-7 */
   line-height: normal;
   border: none;
+  cursor: pointer;
 }
 
 // Reset the file input to browser defaults
 input[type=file] {
   background-color: @white;
+  background-color: initial;
   padding: initial;
   border: initial;
   line-height: initial;
@@ -323,11 +319,11 @@ textarea[readonly] {
     display: block;
     width: auto;
     min-width: 16px;
-    height: 18px;
+    height: @baseLineHeight;
     padding: 4px 4px 4px 5px;
     margin-right: -1px;
     font-weight: normal;
-    line-height: 18px;
+    line-height: @baseLineHeight;
     color: @grayLight;
     text-align: center;
     text-shadow: 0 1px 0 @white;
diff --git a/lib/mixins.less b/lib/mixins.less
index 9c27346c2..5b05654d5 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -71,20 +71,6 @@
   }
 }
 
-// Font face generator
-.font-face(@fontFamily, @fileName, @style, @weight) {
-  @font-face {
-    font-family: @fontFamily;
-    font-style: @style;
-    font-weight: @weight;
-    src: url('@{fileName}.eot');
-    src: url('@{fileName}.eot?#iefix') format('embedded-opentype'),
-         url('@{fileName}.woff') format('woff'),
-         url('@{fileName}.ttf') format('truetype'),
-         url('@{fileName}.svg#@{fontFamily}') format('svg');
-  }
-}
-
 // Grid System
 .fixed-container() {
   width: @siteWidth;
@@ -92,12 +78,13 @@
   margin-right: auto;
   .clearfix();
 }
-.columns(@columnSpan: 1) {
-  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+.columns(@columns: 1) {
+  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 }
-.offset(@columnOffset: 1) {
-  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
+.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() {
   display: inline;
diff --git a/lib/patterns.less b/lib/patterns.less
index 1b27b7184..f1badc46d 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -3,34 +3,41 @@
  * ---------------------------------------------------------------------------- */
 
 
-// TOPBAR
-// ------
+// NAVBAR (FIXED AND STATIC)
+// -------------------------
 
-// Topbar for Branding and Nav
-.topbar {
-  height: 40px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10000;
-  overflow: visible;
+// Navbar variables
+@navBarHeight: 40px;
+@navBarBgStart: #333;
+@navBarBgEnd: #222;
 
-  // Links get text shadow
+// Common styles
+.navbar {
+  height: @navBarHeight;
+  overflow: visible;
+}
+// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
+.navbar-inner {
+  background-color: @navBarBgEnd;
+  #gradient > .vertical(@navBarBgStart, @navBarBgEnd);
+  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
+  .box-shadow(@shadow);
+}
+// Text and links
+.navbar {
+  // Links get text-shadow
   a {
     color: @grayLight;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   }
-
   // Hover and active states
   .brand a:hover,
   ul .active > a {
-    background-color: #333;
+    background-color: @navBarBgStart;
     background-color: rgba(255,255,255,.05);
     color: @white;
     text-decoration: none;
   }
-
   // Website or project name
   .brand {
     float: left;
@@ -42,7 +49,6 @@
     font-weight: 200;
     line-height: 1;
   }
-
   // Plain text in topbar
   p {
     margin: 0;
@@ -52,19 +58,15 @@
       color: @white;
     }
   }
+}
 
-  // Search Form
-  form {
-    float: left;
-    margin: 5px 0 0 0;
-    position: relative;
-    .opacity(100);
-  }
-  // Todo: remove from v2.0 when ready, added for legacy
-  form.pull-right {
-    float: right;
-  }
-  input {
+// Navbar search
+.navbar-search {
+  position: relative;
+  margin-top: 6px;
+  margin-bottom: 0;
+  float: left;
+  .search-query {
     background-color: #444;
     background-color: rgba(255,255,255,.3);
     #font > .sans-serif(13px, normal, 1);
@@ -72,8 +74,7 @@
     color: @white;
     color: rgba(255,255,255,.75);
     border: 1px solid #111;
-    .border-radius(4px);
-    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
+    @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
     .box-shadow(@shadow);
     .transition(none);
 
@@ -104,19 +105,32 @@
   }
 }
 
-// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
-.topbar-inner {
-  background-color: #222;
-  #gradient > .vertical(#333, #222);
-  @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
-  .box-shadow(@shadow);
+
+// Static navbar
+.navbar-static {
+  margin-bottom: @baseLineHeight;
+}
+.navbar-static .navbar-inner {
+  padding-left:  20px;
+  padding-right: 20px;
+  .border-radius(4px);
 }
 
+// Fixed navbar
+.navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10000;
+}
+
+
 
 // NAVIGATION
 // ----------
 
-// Topbar Nav
+// Nav for navbar and topbar
 // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
 .nav {
   display: block;
@@ -302,14 +316,14 @@
   }
 }
 
-// Basic Tabs
+// Tabs
 .tabs {
-  float: left;
-  width: 100%;
-  border-bottom: 1px solid #ddd;
+  border-color: #ddd;
+  border-style: solid;
+  border-width: 0 0 1px;
   > li {
     position: relative; // For the dropdowns mostly
-    top: 1px;
+    margin-bottom: -1px;
     > a {
       padding: 0 15px;
       margin-right: 2px;
@@ -322,61 +336,129 @@
         border-color: #eee #eee #ddd;
       }
     }
-    &.active > a {
-      color: @gray;
-      background-color: @white;
-      border: 1px solid #ddd;
+  }
+  // Active state, and it's :hover to override normal :hover
+  .active > a,
+  .active > a:hover {
+    color: @gray;
+    background-color: @white;
+    border: 1px solid #ddd;
+    border-bottom-color: transparent;
+    cursor: default;
+  }
+}
+
+.tabbable {
+  margin-bottom: @baseLineHeight;
+
+  // Tabs on top
+  .tabs {
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+  .tab-content {
+    padding: 19px;
+    border: 1px solid #ddd;
+  }
+
+  // Tabs on bottom
+  &.tabs-bottom .tabs > li {
+    margin-top: -1px;
+    margin-bottom: 0;
+  }
+  &.tabs-bottom .tabs > li > a {
+    .border-radius(0 0 4px 4px);
+    &:hover {
       border-bottom-color: transparent;
+      border-top-color: #ddd;
     }
   }
+  &.tabs-bottom .tabs > .active > a,
+  &.tabs-bottom .tabs > .active > a:hover {
+    border-color: transparent #ddd #ddd #ddd;
+  }
+
+  // Tabs on left
+  &.tabs-left .tabs {
+    float: left;
+  }
+  &.tabs-left .tabs > li {
+    float: none;
+  }
+
+  // Tabs on right
+  &.tabs-right .tabs {
+    float: right;
+  }
+  &.tabs-right .tabs > li {
+    float: none;
+  }
+}
+
+
+// Dropdowns in tabs
+.tabs {
+  // first one for backwards compatibility
+  .menu-dropdown,
   .dropdown-menu {
     top: 35px;
     border-width: 1px;
     .border-radius(0 6px 6px 6px);
   }
+  // first one for backwards compatibility
+  a.menu:after,
   .dropdown-toggle:after {
     border-top-color: #999;
     margin-top: 15px;
     margin-left: 5px;
   }
+  // first one for backwards compatibility
+  li.open.menu .menu,
   .open.dropdown .dropdown-toggle {
     border-color: #999;
   }
+  // first one for backwards compatibility
+  li.open a.menu:after,
   .dropdown.open .dropdown-toggle:after {
     border-top-color: #555;
   }
 }
-.tab-content {
-  clear: both;
-}
 
-// Basic pill nav
+// Pills
 .pills {
   a {
     margin: 5px 3px 5px 0;
     padding: 0 15px;
-    text-shadow: 0 1px 1px @white;
     line-height: 30px;
+    text-shadow: 0 1px 1px @white;
     .border-radius(15px);
     &:hover {
-      background: @linkColorHover;
       color: @white;
       text-decoration: none;
       text-shadow: 0 1px 1px rgba(0,0,0,.25);
+      background-color: @linkColorHover;
     }
   }
   .active a {
-    background: @linkColor;
     color: @white;
     text-shadow: 0 1px 1px rgba(0,0,0,.25);
+    background-color: @linkColor;
   }
 }
 
-.tab-content > *,
-.pill-content > * {
-  display: none;
+// Stacked pills
+.pills-vertical > li {
+  float: none;
 }
 
+// Tabbable areas
+.tab-content,
+.pill-content {
+}
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+  display: none;
+}
 .tab-content > .active,
 .pill-content > .active {
   display: block;
@@ -438,11 +520,11 @@ footer {
 // ------------
 
 .page-header {
-  margin-bottom: @baseLineHeight - 1;
-  border-bottom: 1px solid #ddd;
+  margin-bottom: @baseLineHeight * 1.5;
+  border-bottom: 1px solid #eee;
   .box-shadow(0 1px 0 rgba(255,255,255,.5));
   h1 {
-    margin-bottom: (@baseLineHeight / 2) - 1px;
+    margin-bottom: @baseLineHeight * .75;
   }
 }
 
diff --git a/lib/responsive.less b/lib/responsive.less
new file mode 100644
index 000000000..a1a33164f
--- /dev/null
+++ b/lib/responsive.less
@@ -0,0 +1,180 @@
+/* Responsive.less
+ * For phone and tablet devices
+ * ------------------------------------------------------------- */
+
+
+// UP TO LANDSCAPE PHONE
+// ---------------------
+
+@media (max-width: 480px) {
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 10px;
+  }
+  // Make all columns even
+  [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+  // Resize modals
+  .modal {
+    width: auto;
+    margin: 0;
+  }
+
+  // Remove the horizontal form styles
+  .form-horizontal .control-group > label {
+    float: none;
+    width: auto;
+    padding-top: 0;
+    text-align: left;
+  }
+  // Move over all input controls and content
+  .form-horizontal .controls {
+    margin-left: 0;
+  }
+  // Move the options list down to align with labels
+  .form-horizontal .control-list {
+    padding-top: 0; // has to be padding because margin collaspes
+  }
+  // Move over buttons in .form-actions to align with .controls
+  .form-horizontal .form-actions {
+    padding-left: 0;
+  }
+
+}
+
+
+// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
+// --------------------------------------------------
+
+@media (min-width: 480px) and (max-width: 768px) {
+  // Remove width from containers
+  .container {
+    width: auto;
+    padding: 0 10px;
+  }
+  // Make all columns even
+  [class*="span"] {
+    float: none;
+    display: block;
+    width: auto;
+    margin: 0;
+  }
+}
+
+
+// PORTRAIT TABLET TO DEFAULT DESKTOP
+// ----------------------------------
+
+@media (min-width: 768px) and (max-width: 940px) {
+
+  // Reset grid variables
+  @gridColumns:       16;
+  @gridColumnWidth:   44px;
+  @gridGutterWidth:   20px;
+  @siteWidth:         748px;
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columnSpan: 1) {
+    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  }
+  .offset(@columnOffset: 1) {
+    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+  }
+
+  // 16cols at 30px wide with 16px gutters
+  .container {
+    width: @siteWidth;
+  }
+
+  // Default columns
+  .span1     { .columns(1); }
+  .span2     { .columns(2); }
+  .span3     { .columns(3); }
+  .span4     { .columns(4); }
+  .span5     { .columns(5); }
+  .span6     { .columns(6); }
+  .span7     { .columns(7); }
+  .span8     { .columns(8); }
+  .span9     { .columns(9); }
+  .span10    { .columns(10); }
+  .span11    { .columns(11); }
+  .span12    { .columns(12); }
+
+  // Offset column options
+  .offset1   { .offset(1); }
+  .offset2   { .offset(2); }
+  .offset3   { .offset(3); }
+  .offset4   { .offset(4); }
+  .offset5   { .offset(5); }
+  .offset6   { .offset(6); }
+  .offset7   { .offset(7); }
+  .offset8   { .offset(8); }
+  .offset9   { .offset(9); }
+  .offset10  { .offset(10); }
+  .offset11  { .offset(11); }
+  .offset12  { .offset(12); }
+
+}
+
+/*
+// LARGE DESKTOP & UP
+// ------------------
+
+@media (min-width: 1210px) {
+
+  // Reset grid variables
+  @gridColumns:       12;
+  @gridColumnWidth:   70px;
+  @gridGutterWidth:   30px;
+  @siteWidth:         1170px;
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columnSpan: 1) {
+    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+  }
+  .offset(@columnOffset: 1) {
+    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
+  }
+
+  .container {
+    width: @siteWidth;
+  }
+  [class*="span"] {
+    margin-left: @gridGutterWidth;
+  }
+
+  // Default columns
+  .span1     { .columns(1); }
+  .span2     { .columns(2); }
+  .span3     { .columns(3); }
+  .span4     { .columns(4); }
+  .span5     { .columns(5); }
+  .span6     { .columns(6); }
+  .span7     { .columns(7); }
+  .span8     { .columns(8); }
+  .span9     { .columns(9); }
+  .span10    { .columns(10); }
+  .span11    { .columns(11); }
+  .span12    { .columns(12); }
+
+  // Offset column options
+  .offset1   { .offset(1); }
+  .offset2   { .offset(2); }
+  .offset3   { .offset(3); }
+  .offset4   { .offset(4); }
+  .offset5   { .offset(5); }
+  .offset6   { .offset(6); }
+  .offset7   { .offset(7); }
+  .offset8   { .offset(8); }
+  .offset9   { .offset(9); }
+  .offset10  { .offset(10); }
+  .offset11  { .offset(11); }
+  .offset12  { .offset(12); }
+
+}
+*/
\ No newline at end of file
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index b6852535c..f15f6853c 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -24,20 +24,28 @@ body {
 }
 
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
-.container-fluid {
+.fluid-container {
   position: relative;
   min-width: 940px;
   padding-left: 20px;
   padding-right: 20px;
   .clearfix();
-  > .sidebar {
-    float: left;
-    width: 220px;
-  }
-  // TODO in v2: rename this and .popover .content to be more specific
-  > .content {
-    margin-left: 240px;
-  }
+}
+// Sidebars (left and right options)
+.fluid-sidebar-left,
+.fluid-sidebar-right {
+  width: 220px;
+}
+.fluid-sidebar-left   { float: left; }
+.fluid-sidebar-right  { float: right; }
+// The main content area
+.fluid-content {
+  margin-left: 240px;
+}
+// Reverse layout for sidebar on right
+.fluid-container.reverse .fluid-content {
+  margin-left: 0;
+  margin-right: 240px;
 }
 
 
@@ -76,10 +84,9 @@ a {
 // GRID SYSTEM
 // -----------
 // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
-
 .row {
+  margin-left: -@gridGutterWidth;
   .clearfix();
-  margin-left: -1 * @gridGutterWidth;
 }
 
 // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
@@ -101,20 +108,6 @@ a {
 .span10    { .columns(10); }
 .span11    { .columns(11); }
 .span12    { .columns(12); }
-.span13    { .columns(13); }
-.span14    { .columns(14); }
-.span15    { .columns(15); }
-.span16    { .columns(16); }
-
-// For optional 24-column grid
-.span17    { .columns(17); }
-.span18    { .columns(18); }
-.span19    { .columns(19); }
-.span20    { .columns(20); }
-.span21    { .columns(21); }
-.span22    { .columns(22); }
-.span23    { .columns(23); }
-.span24    { .columns(24); }
 
 // Offset column options
 .offset1   { .offset(1); }
@@ -128,10 +121,3 @@ a {
 .offset9   { .offset(9); }
 .offset10  { .offset(10); }
 .offset11  { .offset(11); }
-.offset12  { .offset(12); }
-
-// Unique column sizes for 16-column grid
-.span-one-third     { width: 300px; }
-.span-two-thirds    { width: 620px; }
-.offset-one-third   { margin-left: 340px; }
-.offset-two-thirds  { margin-left: 660px; }
diff --git a/lib/type.less b/lib/type.less
index 4232a24df..a490bf5fa 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -24,12 +24,12 @@ p {
 h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
   color: @grayDark;
+  text-rendering: optimizelegibility;
   small {
     color: @grayLight;
   }
 }
 h1 {
-  margin-bottom: @baseLineHeight;
   font-size: 30px;
   line-height: @baseLineHeight * 2;
   small {
@@ -40,11 +40,11 @@ h2 {
   font-size: 24px;
   line-height: @baseLineHeight * 2;
   small {
-    font-size: 14px;
+    font-size: 18px;
   }
 }
 h3 {
-  line-height: @baseLineHeight * 2;
+  line-height: @baseLineHeight * 1.5;
   font-size: 18px;
   small {
     font-size: 14px;
@@ -74,7 +74,7 @@ h6 {
 
 // Unordered and Ordered lists
 ul, ol {
-  margin: 0 0 @baseLineHeight 25px;
+  margin: 0 0 @baseLineHeight / 2 25px;
 }
 ul ul,
 ul ol,
@@ -90,7 +90,7 @@ ol {
 }
 li {
   line-height: @baseLineHeight;
-  color: @gray;
+  color: @grayDark;
 }
 ul.unstyled {
   list-style: none;
@@ -135,6 +135,14 @@ em {
   color: @grayLight;
 }
 
+// Abbreviations and acronyms
+abbr {
+  font-size: 90%;
+  text-transform: uppercase;
+  border-bottom: 1px dotted #ddd;
+  cursor: help;
+}
+
 // Blockquotes
 blockquote {
   margin-bottom: @baseLineHeight;
diff --git a/lib/variables.less b/lib/variables.less
index 864dbe8c0..92d09de70 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -38,29 +38,12 @@
 // ----
 
 // Modify the grid styles in mixins.less
-@gridColumns:       16;
-@gridColumnWidth:   40px;
+@gridColumns:       12;
+@gridColumnWidth:   60px;
 @gridGutterWidth:   20px;
-@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
 @siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
 
-// COLOR SCHEME
-// ------------
-
-// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
-@baseColor:         @blue;                  // Set a base color
-@complement:        spin(@baseColor, 180);  // Determine a complementary color
-@split1:            spin(@baseColor, 158);  // Split complements
-@split2:            spin(@baseColor, -158);
-@triad1:            spin(@baseColor, 135);  // Triads colors
-@triad2:            spin(@baseColor, -135);
-@tetra1:            spin(@baseColor, 90);   // Tetra colors
-@tetra2:            spin(@baseColor, -90);
-@analog1:           spin(@baseColor, 22);   // Analogs colors
-@analog2:           spin(@baseColor, -22);
-
-
 // THEME VARIABLES
 // ---------------