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

docs/components.html

@@ -1128,7 +1128,7 @@
       <h3>Rewritten base class</h3>
       <p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup&mdash;no <code>&lt;p&gt;</code> is required by default, just the outter <code>&lt;div&gt;</code>.</p>
       <h3>Single alert message</h3>
-      <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
+      <p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
       <hr>
       <h3>Goes great with javascript</h3>
       <p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>

docs/javascript.html

@@ -240,7 +240,7 @@
           <div class="well" style="background-color: #888; border: none;">
             <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
               <div class="modal-header">
-                <a href="#" class="close js-dismiss">&times;</a>
+                <a href="#" class="close" data-dismiss="modal">&times;</a>
                 <h3>Modal header</h3>
               </div>
               <div class="modal-body">
@@ -489,12 +489,12 @@ $('#myModal').on('hidden', function () {
 <pre class="prettyprint linenums">
 &lt;ul class="nav pills"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Regular link&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="dropdown"&gt;
+  &lt;li class="dropdown" id="menu1"&gt;
     &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"&gt;
       Dropdown
       &lt;b class="caret"&gt;&lt;/b&gt;
     &lt;/a&gt;
-    &lt;ul id="menu1" class="dropdown-menu"&gt;
+    &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;

lib/breadcrumbs.less

@@ -4,7 +4,7 @@
 .breadcrumb {
   padding: 7px 14px;
   margin: 0 0 @baseLineHeight;
-  #gradient > .vertical(#ffffff, #f5f5f5);
+  #gradient > .vertical(@white, #f5f5f5);
   border: 1px solid #ddd;
   .border-radius(3px);
   .box-shadow(inset 0 1px 0 @white);

lib/button-groups.less

@@ -110,7 +110,7 @@
 .info,
 .success {
   .caret {
-    border-top-color: #fff;
+    border-top-color: @white;
     .opacity(75);
   }
 }

lib/buttons.less

@@ -34,9 +34,9 @@
   padding: 5px 10px 6px;
   font-size: @baseFontSize;
   line-height: normal;
-  color: #333;
+  color: @grayDark;
   text-shadow: 0 1px 1px rgba(255,255,255,.75);
-  #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+  #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   .border-radius(4px);

lib/carousel.less

@@ -70,7 +70,7 @@
   line-height: 30px;
   color: #ccc;
   text-align: center;
-  background: #999;
+  background: @grayLight;
   background: rgba(0,0,0,.5);
   .border-radius(20px);
 
@@ -82,9 +82,9 @@
 
   // Hover state
   &:hover {
-    color: #fff;
+    color: @white;
     text-decoration: none;
-    background: #333;
+    background: @grayDark;
     background: rgba(0,0,0,.75);
   }
 }
@@ -98,10 +98,10 @@
   right: 0;
   bottom: 0;
   padding: 10px 15px 5px;
-  background: #333;
+  background: @grayDark;
   background: rgba(0,0,0,.75);
 }
 .carousel-caption h4,
 .carousel-caption p {
-  color: #fff;
+  color: @white;
 }

lib/dropdowns.less

@@ -14,7 +14,7 @@
   vertical-align: top;
   border-left:  4px solid transparent;
   border-right: 4px solid transparent;
-  border-top:   4px solid #000;
+  border-top:   4px solid @black;
   .opacity(30);
   content: "\2193";
 }
@@ -79,7 +79,7 @@
 .dropdown-menu li > a:hover,
 .dropdown-menu .active > a,
 .dropdown-menu .active > a:hover {
-  color: #fff;
+  color: @white;
   text-decoration: none;
   background-color: @linkColor;
 }

lib/navbar.less

@@ -164,7 +164,7 @@
 .navbar .nav .active > a {
   color: @white;
   text-decoration: none;
-  background-color: #222;
+  background-color: @grayDarker;
   background-color: rgba(0,0,0,.5);
 }
 
@@ -174,7 +174,7 @@
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
-  background-color: #222;
+  background-color: @grayDarker;
   border-right: 1px solid #444;
 }
 
@@ -209,7 +209,7 @@
     display: inline-block;
     border-left:   6px solid transparent;
     border-right:  6px solid transparent;
-    border-bottom: 6px solid #fff;
+    border-bottom: 6px solid @white;
     position: absolute;
     top: -6px;
     left: 10px;
@@ -219,7 +219,7 @@
 // Dropdown toggle caret
 .navbar .nav .dropdown-toggle .caret,
 .navbar .nav .open.dropdown .caret {
-  border-top-color: #fff;
+  border-top-color: @white;
 }
 .navbar .nav .active .caret {
   .opacity(100);
@@ -234,7 +234,7 @@
 
 // Dropdown link on hover
 .navbar .nav .active > .dropdown-toggle:hover {
-  color: #fff;
+  color: @white;
 }
 
 // Right aligned menus need alt position

lib/navs.less

@@ -18,7 +18,7 @@
 }
 .nav > li > a:hover {
   text-decoration: none;
-  background-color: #eee;
+  background-color: @grayLighter;
 }
 
 
@@ -97,7 +97,7 @@
   border: 1px solid transparent;
   .border-radius(4px 4px 0 0);
   &:hover {
-    border-color: #eee #eee #ddd;
+    border-color: @grayLighter @grayLighter #ddd;
   }
 }
 // Active state, and it's :hover to override normal :hover
@@ -201,13 +201,13 @@
 // -------------------------
 .tabs .active .dropdown-toggle .caret,
 .pills .active .dropdown-toggle .caret {
-  border-top-color: #333;
+  border-top-color: @grayDark;
 }
 
 // Active:hover dropdown links
 // -------------------------
 .nav > .dropdown.active > a:hover {
-  color: #000;
+  color: @black;
   cursor: pointer;
 }
 
@@ -216,20 +216,20 @@
 .tabs .open .dropdown-toggle,
 .pills .open .dropdown-toggle,
 .nav > .open.active > a:hover {
-  color: #fff;
+  color: @white;
-  background-color: #999;
+  background-color: @grayLight;
-  border-color: #999;
+  border-color: @grayLight;
 }
 .nav .open .caret,
 .nav .open.active .caret,
 .nav .open a:hover .caret {
-  border-top-color: #fff;
+  border-top-color: @white;
   .opacity(100);
 }
 
 // Dropdowns in stacked tabs
 .tabs.stacked .open > a:hover {
-  border-color: #999;
+  border-color: @grayLight;
 }
 
 
@@ -312,7 +312,7 @@
   .border-radius(4px 0 0 4px);
 }
 .tabs-left .tabs > li > a:hover {
-  border-color: #eee #ddd #eee #eee;
+  border-color: @grayLighter #ddd @grayLighter @grayLighter;
 }
 .tabs-left .tabs .active > a,
 .tabs-left .tabs .active > a:hover {
@@ -330,7 +330,7 @@
   .border-radius(0 4px 4px 0);
 }
 .tabs-right .tabs > li > a:hover {
-  border-color: #eee #eee #eee #ddd;
+  border-color: @grayLighter @grayLighter @grayLighter #ddd;
 }
 .tabs-right .tabs .active > a,
 .tabs-right .tabs .active > a:hover {

lib/scaffolding.less

@@ -24,9 +24,9 @@ body {
 // Fluid layouts (left aligned, with sidebar, min- & max-width content)
 .fluid-container {
   position: relative;
-  min-width: 940px;
+  min-width: @siteWidth;
-  padding-left: 20px;
+  padding-left: @gridGutterWidth;
-  padding-right: 20px;
+  padding-right: @gridGutterWidth;
   .clearfix();
 }
 
@@ -35,17 +35,17 @@ body {
   width: @fluidSidebarWidth;
   margin: 0 20px 18px;
 }
-.sidebar-left   { padding-left: @fluidSidebarWidth + 40; }
+.sidebar-left   { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
-.sidebar-right  { padding-right: @fluidSidebarWidth + 40; }
+.sidebar-right  { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
 
 // Float the sidebars accordingly
 .sidebar-left .fluid-sidebar {
   float: left;
-  margin-left: (@fluidSidebarWidth + 20) * -1;
+  margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
 }
 .sidebar-right .fluid-sidebar {
   float: right;
-  margin-right: (@fluidSidebarWidth + 20) * -1;
+  margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
 }
 
 // The main content area

lib/tables.less

@@ -144,7 +144,7 @@ table {
       margin-top: 7px;
       border-width: 0 4px 4px;
       border-style: solid;
-      border-color: #000 transparent;
+      border-color: @black transparent;
       visibility: hidden;
     }
   }
@@ -174,7 +174,7 @@ table {
       border-bottom: none;
       border-left: 4px solid transparent;
       border-right: 4px solid transparent;
-      border-top: 4px solid #000;
+      border-top: 4px solid @black;
       visibility:visible;
       .box-shadow(none); //can't add boxshadow to downward facing arrow :(
       .opacity(60);

lib/tooltip.less

@@ -22,7 +22,7 @@
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: white;
+  color: @white;
   text-align: center;
   text-decoration: none;
   background-color: @black;

lib/type.less

@@ -119,7 +119,7 @@ hr {
   margin: @baseLineHeight 0;
   border: 0;
   border-top: 1px solid #e5e5e5;
-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid @white;
 }
 
 // Emphasis
@@ -148,7 +148,7 @@ abbr {
 blockquote {
   padding-left: 15px;
   margin-bottom: @baseLineHeight;
-  border-left: 5px solid #eee;
+  border-left: 5px solid @grayLighter;
   p {
     margin-bottom: 0;
     #font > .shorthand(16px,300,@baseLineHeight * 1.25);
@@ -168,7 +168,7 @@ blockquote {
     padding-left: 0;
     padding-right: 15px;
     border-left: 0;
-    border-right: 5px solid #eee;
+    border-right: 5px solid @grayLighter;
     p,
     small {
       text-align: right;

lib/variables.less

@@ -13,6 +13,7 @@
 
 // Grays
 @black:                 #000;
+@grayDarker:            #222;
 @grayDark:              #333;
 @gray:                  #555;
 @grayLight:             #999;
@@ -65,7 +66,7 @@
 
 // Navbar
 @navBarHeight:                    40px;
-@navbarBackground:                #222;
+@navbarBackground:                @grayDarker;
-@navbarBackgroundHighlight:       #333;
+@navbarBackgroundHighlight:       @grayDark;