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

Conflicts:
	bootstrap.css

bootstrap.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: Thu Jan  5 01:33:17 PST 2012
+ * Date: Thu Jan  5 01:36:56 PST 2012
  */
 html, body {
   margin: 0;
@@ -491,7 +491,7 @@ address {
 }
 code, pre {
   padding: 0 3px 2px;
-  font-family: Menlo, Monaco, Courier New, monospace;
+  font-family: Menlo, Monaco, "Courier New", monospace;
   font-size: 12px;
   color: #404040;
   -webkit-border-radius: 3px;
@@ -2587,6 +2587,8 @@ i {
   top: 50%;
   left: 50%;
   z-index: 11000;
+  max-height: 500px;
+  overflow: auto;
   width: 560px;
   margin: -250px 0 0 -250px;
   background-color: #ffffff;
@@ -2908,6 +2910,71 @@ a.thumbnail:hover {
 .thumbnail .caption {
   padding: 9px;
 }
+.carousel {
+  position: relative;
+}
+.carousel .carousel-inner {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+.carousel .item {
+  display: none;
+  position: relative;
+  -webkit-transition: 0.6s ease-in-out left;
+  -moz-transition: 0.6s ease-in-out left;
+  -ms-transition: 0.6s ease-in-out left;
+  -o-transition: 0.6s ease-in-out left;
+  transition: 0.6s ease-in-out left;
+}
+.carousel .active, .carousel .next, .carousel .prev {
+  display: block;
+}
+.carousel .next, .carousel .prev {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.carousel .next {
+  left: 100%;
+}
+.carousel .prev {
+  left: -100%;
+}
+.carousel .next.left, .carousel .prev.right {
+  left: 0%;
+}
+.carousel .active.left {
+  left: -100%;
+}
+.carousel .active.right {
+  left: 100%;
+}
+.carousel .nav {
+  width: auto;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  height: 50px;
+  position: absolute;
+  top: 50%;
+  margin: -25px 0 0;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 42px;
+  left: 5px;
+  font-weight: 100;
+  padding: 0 15px;
+}
+.carousel .nav.right {
+  right: 5px;
+  left: auto;
+}
+.carousel .nav:hover {
+  text-decoration: none;
+  background: rgba(0, 0, 0, 0.8);
+}
 .hidden {
   display: none;
   visibility: hidden;

bootstrap.min.css

@@ -87,7 +87,7 @@ blockquote{padding-left:15px;margin-bottom:18px;border-left:5px solid #eee;}bloc
 blockquote small{display:block;line-height:18px;color:#bfbfbf;}blockquote small:before{content:'\2014 \00A0';}
 blockquote.pull-right{float:right;}blockquote.pull-right p,blockquote.pull-right small{text-align:right;}
 address{display:block;margin-bottom:18px;line-height:18px;}
-code,pre{padding:0 3px 2px;font-family:Menlo, Monaco, Courier New, monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
+code,pre{padding:0 3px 2px;font-family:Menlo,Monaco,"Courier New",monospace;font-size:12px;color:#404040;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
 code{padding:1px 3px;background-color:#fee9cc;}
 pre{display:block;padding:8.5px;margin:0 0 9px;font-size:12px;line-height:18px;background-color:#f5f5f5;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre;white-space:pre-wrap;word-break:break-all;}pre.prettyprint{margin-bottom:18px;}
 pre code{padding:0;background-color:transparent;}
@@ -396,7 +396,7 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 .pagination.centered{text-align:center;}
 .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background-color:#000000;}.modal-backdrop.fade{opacity:0;}
 .modal-backdrop,.modal-backdrop.fade.in{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
-.modal{position:fixed;top:50%;left:50%;z-index:11000;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
+.modal{position:fixed;top:50%;left:50%;z-index:11000;max-height:500px;overflow:auto;width:560px;margin:-250px 0 0 -250px;background-color:#ffffff;border:1px solid #999;border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.modal .close{margin-top:7px;}
 .modal.fade{-webkit-transition:opacity .3s linear, top .3s ease-out;-moz-transition:opacity .3s linear, top .3s ease-out;-ms-transition:opacity .3s linear, top .3s ease-out;-o-transition:opacity .3s linear, top .3s ease-out;transition:opacity .3s linear, top .3s ease-out;top:-25%;}
 .modal.fade.in{top:50%;}
 .modal-header{padding:5px 15px;border-bottom:1px solid #eee;}
@@ -442,5 +442,16 @@ i{background-image:url(docs/assets/img/glyphicons-halflings-sprite.png);backgrou
 a.thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
 .thumbnail>img{display:block;max-width:100%;}
 .thumbnail .caption{padding:9px;}
+.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;}
+.carousel .item{display:none;position:relative;-webkit-transition:0.6s ease-in-out left;-moz-transition:0.6s ease-in-out left;-ms-transition:0.6s ease-in-out left;-o-transition:0.6s ease-in-out left;transition:0.6s ease-in-out left;}
+.carousel .active,.carousel .next,.carousel .prev{display:block;}
+.carousel .next,.carousel .prev{position:absolute;top:0;width:100%;}
+.carousel .next{left:100%;}
+.carousel .prev{left:-100%;}
+.carousel .next.left,.carousel .prev.right{left:0%;}
+.carousel .active.left{left:-100%;}
+.carousel .active.right{left:100%;}
+.carousel .nav{width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;height:50px;position:absolute;top:50%;margin:-25px 0 0;cursor:pointer;background:rgba(0, 0, 0, 0.7);color:white;font-size:42px;left:5px;font-weight:100;padding:0 15px;}.carousel .nav.right{right:5px;left:auto;}
+.carousel .nav:hover{text-decoration:none;background:rgba(0, 0, 0, 0.8);}
 .hidden{display:none;visibility:hidden;}
 @media (max-width: 480px){.modal{width:auto;margin:0;} .horizontal-form .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .horizontal-form .controls{margin-left:0;} .horizontal-form .control-list{padding-top:0;} .horizontal-form .form-actions{padding-left:0;} .modal{position:fixed;top:20px;left:20px;right:20px;width:auto;}.modal .close{padding:10px;}}@media (max-width: 768px){.container{width:auto;padding:0 20px;} .row{margin-left:0;} .row>[class*="span"]{float:none;display:block;width:auto;margin:0;} .nav{position:absolute;top:0;left:0;width:180px;padding-top:40px;list-style:none;} .nav,.nav>li:last-child a{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;} .nav>li{float:none;display:none;} .nav>li>a{float:none;background-color:#222;} .nav>.active{display:block;position:absolute;top:0;left:0;} .navbar ul .active>a{background-color:transparent;} .nav>.active a:after{display:inline-block;width:0;height:0;margin-top:8px;margin-left:6px;text-indent:-99999px;vertical-align:top;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #ffffff;filter:alpha(opacity=100);-moz-opacity:1;opacity:1;content:"↓";} .nav>.active a:hover{background-color:rgba(255, 255, 255, 0.05);}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}

docs/javascript.html

@@ -117,6 +117,10 @@
               <td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td>
               <td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td>
             </tr>
+            <tr>
+              <td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td>
+              <td>A plugin for rotating through elements. A merry-go-round.</td>
+            </tr>
          </tbody>
        </table>
        <h3>Is javascript necessary?</h3>
@@ -720,7 +724,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
           <h3>Events</h3>
           <p>Bootstrap's alert class exposes a few events for hooking into alert functionality. </p>
-          <table class="zebra-striped">
+          <table class="bordered-table striped-table">
             <thead>
              <tr>
                <th style="width: 150px;">Event</th>
@@ -1002,6 +1006,110 @@ $('#myCollapsible').on('hidden', function () {
       </div>
     </section>
 
+     <!-- Carousel
+    ================================================== -->
+
+    <section id="carousel">
+      <div class="page-header">
+        <h1>Carousel <small>bootstrap-carousel.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span3 columns">
+          <p>A generic plugin for cycling through elements. A merry-go-round.</p>
+          <a href="../js/bootstrap-carousel.js" target="_blank" class="btn primary">Download</a>
+        </div>
+        <div class="span9 columns">
+          <h3>Using bootstrap-carousel.js</h3>
+          <pre class="prettyprint linenums">$('.carousel').carousel()</pre>
+          <h3>Options</h3>
+          <table class="bordered-table striped-table">
+            <thead>
+             <tr>
+               <th style="width: 100px;">Name</th>
+               <th style="width: 50px;">type</th>
+               <th style="width: 50px;">default</th>
+               <th>description</th>
+             </tr>
+            </thead>
+            <tbody>
+             <tr>
+               <td>interval</td>
+               <td>number</td>
+               <td>5000</td>
+               <td>The amount of type to delay between automatically cycling an item.</td>
+             </tr>
+            </tbody>
+          </table>
+          <h3>Markup</h3>
+          <p>Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.</p>
+<pre class="prettyprint linenums">
+&lt;div class="thumbnail carousel"&gt;
+
+  &lt;!-- items --&gt;
+  &lt;div class="carousel-inner"&gt;…&lt;/div&gt;
+
+  &lt;!-- navigation --&gt;
+  &lt;a class="nav" href="#myCarousel" data-slide="next"&gt;&amp;lt;&lt;/a&gt;
+  &lt;a class="nav" href="#myCarousel" data-slide="prev"&gt;&amp;gt;&lt;/a&gt;
+
+&lt;/div&gt;
+</pre>
+<h3>Methods</h3>
+<h4>.carousel(options)</h4>
+<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
+<pre class="prettyprint linenums">
+$('.myCarousel').carousel({
+  interval: 2000
+})</pre>
+<h4>.carousel('cycle')</h4>
+<p>Cycles through the carousel items from left to right.</p>
+<h4>.carousel('pause')</h4>
+<p>Stops the carousel from cycling through items.</p>
+<h4>.carousel('prev')</h4>
+<p>Cycles to the previous item.</p>
+<h4>.carousel('next')</h4>
+<p>Cycles to the next item.</p>
+          <h3>Demo</h3>
+
+          <!-- carousel -->
+
+          <div id="myCarousel" class="thumbnail carousel slide">
+
+            <div class="carousel-inner">
+              <div class="item active">
+                <img src="http://placehold.it/1100x400" alt="">
+                <div class="caption">
+                  <h5>First Thumbnail label</h5>
+                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+                </div>
+              </div>
+
+              <div class="item">
+                <img src="http://placehold.it/1100x400" alt="">
+                <div class="caption">
+                  <h5>Second Thumbnail label</h5>
+                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+                </div>
+              </div>
+
+              <div class="item">
+                <img src="http://placehold.it/1100x400" alt="">
+                <div class="caption">
+                  <h5>Third Thumbnail label</h5>
+                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+                </div>
+              </div>
+            </div>
+
+            <a class="left nav" href="#myCarousel" data-slide="prev">&laquo;</a>
+            <a class="right nav" href="#myCarousel" data-slide="next">&raquo;</a>
+
+          </div>
+
+        </div>
+      </div>
+    </section>
+
       <!-- Footer
       ================================================== -->
       <footer class="footer">
@@ -1028,6 +1136,7 @@ $('#myCollapsible').on('hidden', function () {
     <script src="../js/bootstrap-popover.js"></script>
     <script src="../js/bootstrap-button.js"></script>
     <script src="../js/bootstrap-collapse.js"></script>
+    <script src="../js/bootstrap-carousel.js"></script>
     <script src="assets/js/application.js"></script>
     <script>
       $(function () {
@@ -1036,13 +1145,14 @@ $('#myCollapsible').on('hidden', function () {
           selector: "a[rel=twipsy]"
         })
 
-        //popover demo
+        // popover demo
         $("a[rel=popover]")
           .popover()
           .click(function(e) {
             e.preventDefault()
           })
 
+        // button state demo
         $('#fat-btn')
           .click(function () {
             var btn = $(this)
@@ -1051,6 +1161,9 @@ $('#myCollapsible').on('hidden', function () {
               btn.button('reset')
             }, 3000)
           })
+
+        // carousel demo
+        $('#myCarousel').carousel()
       })
     </script>
   </body>

js/bootstrap-carousel.js

@@ -25,12 +25,63 @@
  /* CAROUSEL CLASS DEFINITION
   * ========================= */
 
-  var Carousel = function () {
-
+  var Carousel = function (element, options) {
+    this.$element = $(element)
+    this.options = $.extend({}, $.fn.carousel.defaults, options)
+    this.options.slide && this.slide(this.options.slide)
   }
 
   Carousel.prototype = {
 
+    cycle: function () {
+      this.interval = setInterval($.proxy(this.next, this), this.options.interval)
+      return this
+    }
+
+  , pause: function () {
+      clearInterval(this.interval)
+      return this
+    }
+
+  , next: function () {
+      return this.slide('next')
+    }
+
+  , prev: function () {
+      return this.slide('prev')
+    }
+
+  , slide: function (type) {
+      var $active = this.$element.find('.active')
+        , $next = $active[type]()
+        , isCycling = this.interval
+        , direction = type == 'next' ? 'left' : 'right'
+        , fallback  = type == 'next' ? 'first' : 'last'
+        , that = this
+
+      isCycling && this.pause()
+
+      $next = $next.length ? $next : this.$element.find('.item')[fallback]()
+
+      if (!$.support.transition && this.$element.hasClass('slide')) {
+        $active.removeClass('active')
+        $next.addClass('active')
+      } else {
+        $next.addClass(type)
+        $next[0].offsetWidth // force reflow
+        $active.addClass(direction)
+        $next.addClass(direction)
+        this.$element.one($.support.transition.end, function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+        })
+      }
+
+      isCycling && this.cycle()
+
+      return this
+    }
+
   }
 
 
@@ -41,11 +92,30 @@
     return this.each(function () {
       var $this = $(this)
         , data = $this.data('carousel')
-      if (!data) $this.data('carousel', (data = new Carousel(this)))
-      if (typeof option == 'string') data[option].call($this)
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
+      if (typeof option == 'string' || (option = options.slide)) data[option]()
+      else data.cycle()
     })
   }
 
+  $.fn.carousel.defaults = {
+    interval: 5000
+  }
+
   $.fn.carousel.Constructor = Carousel
 
+
+ /* CAROUSEL DATA-API
+  * ================= */
+
+  $(function () {
+    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
+      var $this = $(this)
+        , $target = $($this.attr('data-target') || $this.attr('href'))
+        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
+      $target.carousel(options)
+    })
+  })
+
 }( window.jQuery )
\ No newline at end of file

lib/mixins.less

@@ -60,7 +60,7 @@
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
     .monospace() {
-      font-family: Menlo, Monaco, Courier New, monospace;
+      font-family: Menlo, Monaco, "Courier New", monospace;
     }
   }
   .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {

lib/modals.less

@@ -23,6 +23,8 @@
   top: 50%;
   left: 50%;
   z-index: 11000;
+  max-height: 500px;
+  overflow: auto;
   width: 560px;
   margin: -250px 0 0 -250px;
   background-color: @white;

lib/thumbnails.less

@@ -32,3 +32,53 @@ a.thumbnail:hover {
 .thumbnail .caption {
   padding: 9px;
 }
+
+.carousel {
+
+  position: relative;
+
+  .carousel-inner {
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+  }
+
+  .item {
+    display: none;
+    position: relative;
+    .transition(.6s ease-in-out left);
+  }
+
+  .active, .next, .prev { display: block; }
+
+  .next, .prev {
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .next { left: 100%; }
+  .prev { left: -100%; }
+  .next.left, .prev.right { left: 0% }
+
+  .active.left { left: -100% }
+  .active.right { left: 100% }
+
+  .nav {
+    width: auto;
+    .border-radius(0);
+    height: 50px;
+    position: absolute;
+    top: 50%;
+    margin: -25px 0 0;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    font-size: 42px;
+    left: 5px;
+    font-weight: 100;
+    padding: 0 15px;
+    &.right { right: 5px; left: auto; }
+    &:hover { text-decoration: none; background: rgba(0, 0, 0, 0.8); }
+  }
+}
\ No newline at end of file