From f48278dac6ac89fcf9d1ab7526ec3029dd1a4d8e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 15 Jan 2012 18:40:17 -0800
Subject: [PATCH] updated accordion and carousel; accordion still needs work

---
 bootstrap.css        |  76 +++++++++++++++++++--------
 bootstrap.min.css    |  15 ++++--
 docs/javascript.html |  64 +++++++++++------------
 lib/accordion.less   |  21 ++++++++
 lib/bootstrap.less   |   1 +
 lib/carousel.less    | 119 +++++++++++++++++++++++++++++++------------
 6 files changed, 206 insertions(+), 90 deletions(-)
 create mode 100644 lib/accordion.less

diff --git a/bootstrap.css b/bootstrap.css
index aabc868d2e..8192b24c8a 100644
--- a/bootstrap.css
+++ b/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: Sun Jan 15 16:27:00 PST 2012
+ * Date: Sun Jan 15 18:32:40 PST 2012
  */
 html, body {
   margin: 0;
@@ -2936,10 +2936,29 @@ a.thumbnail:hover {
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
+.accordion {
+  padding: 0;
+}
+.accordion-heading {
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+}
+.accordion-body {
+  padding: 10px;
+  margin-left: 0;
+  margin-bottom: 9px;
+  border: 1px solid #ddd;
+  border-top: 0;
+  display: none;
+}
+.accordion .in {
+  display: block;
+}
 .carousel {
   position: relative;
+  line-height: 1;
 }
-.carousel .carousel-inner {
+.carousel-inner {
   overflow: hidden;
   width: 100%;
   position: relative;
@@ -2971,7 +2990,7 @@ a.thumbnail:hover {
   left: -100%;
 }
 .carousel .next.left, .carousel .prev.right {
-  left: 0%;
+  left: 0;
 }
 .carousel .active.left {
   left: -100%;
@@ -2979,30 +2998,45 @@ a.thumbnail:hover {
 .carousel .active.right {
   left: 100%;
 }
-.carousel .nav {
-  width: auto;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-  height: 50px;
+.carousel-control {
   position: absolute;
-  top: 50%;
-  margin: -25px 0 0;
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
-  font-size: 42px;
-  left: 5px;
+  top: 40%;
+  left: 15px;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  font-size: 60px;
   font-weight: 100;
-  padding: 0 15px;
+  line-height: 30px;
+  color: #ccc;
+  text-align: center;
+  background: #999;
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
 }
-.carousel .nav.right {
-  right: 5px;
+.carousel-control.right {
   left: auto;
+  right: 15px;
 }
-.carousel .nav:hover {
+.carousel-control:hover {
+  color: #fff;
   text-decoration: none;
-  background: rgba(0, 0, 0, 0.8);
+  background: #333;
+  background: rgba(0, 0, 0, 0.75);
+}
+.carousel-caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 15px 5px;
+  background: #333;
+  background: rgba(0, 0, 0, 0.75);
+}
+.carousel-caption h4, .carousel-caption p {
+  color: #fff;
 }
 .pull-right {
   float: right;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 91c6553f6c..6e348c597a 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -513,18 +513,25 @@ a.thumbnail:hover{border-color:#0088cc;-webkit-box-shadow:0 1px 4px rgba(0, 105,
 .progress.success.striped .bar{background-color:#62c462;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
 .progress.info .bar{background-color:#339bb9;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}
 .progress.info.striped .bar{background-color:#5bc0de;background-image:-webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));background-image:-webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:-o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-image:linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}
-.carousel{position:relative;}.carousel .carousel-inner{overflow:hidden;width:100%;position:relative;}
+.accordion{padding:0;}
+.accordion-heading{padding:5px 10px;border:1px solid #ddd;}
+.accordion-body{padding:10px;margin-left:0;margin-bottom:9px;border:1px solid #ddd;border-top:0;display:none;}
+.accordion .in{display:block;}
+.carousel{position:relative;line-height:1;}
+.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 .active{left:0;}
 .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 .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);}
+.carousel-control{position:absolute;top:40%;left:15px;width:40px;height:40px;margin-top:-20px;font-size:60px;font-weight:100;line-height:30px;color:#ccc;text-align:center;background:#999;background:rgba(0, 0, 0, 0.5);-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}.carousel-control.right{left:auto;right:15px;}
+.carousel-control:hover{color:#fff;text-decoration:none;background:#333;background:rgba(0, 0, 0, 0.75);}
+.carousel-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 15px 5px;background:#333;background:rgba(0, 0, 0, 0.75);}
+.carousel-caption h4,.carousel-caption p{color:#fff;}
 .pull-right{float:right;}
 .pull-left{float:left;}
 .hide{display:none;}
diff --git a/docs/javascript.html b/docs/javascript.html
index 015f451428..1a6565c399 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1079,33 +1079,33 @@ $('#my-alert').bind('closed', function () {
         <div class="span9 columns">
           <h2>Example accordion</h2>
           <p>Using the collapse plugin, we built a simple accordion style widget:</p>
-          <dl id="accordion">
-            <dt>
+          <dl class="accordion" id="accordion">
+            <dt class="accordion-heading">
               <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                 Collapsible Group Item #1
               </a>
             </dt>
-            <dd id="collapseOne" class="collapse in">
+            <dd id="collapseOne" class="accordion-body collapse in">
               <p>
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
               </p>
             </dd>
-            <dt>
+            <dt class="accordion-heading">
               <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                 Collapsible Group Item #2
               </a>
             </dt>
-            <dd id="collapseTwo" class="collapse">
+            <dd id="collapseTwo" class="accordion-body collapse">
               <p>
               Blog +1 eiusmod, williamsburg chambray craft beer brooklyn. Trust fund squid whatever, sunt hoodie skateboard mustache 3 wolf moon art party wes anderson ad leggings officia. Skateboard keytar incididunt gluten-free retro sartorial, single-origin coffee et viral. Art party blog sunt, readymade fugiat 8-bit aesthetic ex echo park fanny pack keytar. Thundercats sustainable labore, mustache adipisicing tattooed dolore aute occaecat velit 8-bit raw denim letterpress. In occaecat freegan, next level single-origin coffee chambray excepteur nihil duis exercitation adipisicing ex sartorial twee squid. You probably haven't heard of them fugiat ea retro eiusmod quis cosby sweater, +1 fap sapiente biodiesel banksy.
               </p>
             </dd>
-            <dt>
+            <dt class="accordion-heading">
               <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                 Collapsible Group Item #3
               </a>
             </dt>
-            <dd id="collapseThree" class="collapse">
+            <dd id="collapseThree" class="accordion-body collapse">
               <p>
               Tempor gentrify pariatur nihil salvia, irony synth incididunt odio commodo brunch aute. Four loko est vice echo park wes anderson jean shorts, tempor ea vero locavore. Seitan DIY dolore readymade williamsburg viral. Dolor fap master cleanse delectus, ad butcher labore duis vice mollit cillum exercitation eu banh mi. Austin banksy 3 wolf moon locavore sed, helvetica next level VHS you probably haven't heard of them ethical odio. Incididunt locavore minim, do seitan consequat qui thundercats labore before they sold out retro laborum. Esse twee readymade laboris fap vice, voluptate DIY.
               </p>
@@ -1220,32 +1220,32 @@ $('#myCollapsible').on('hidden', function () {
         <div class="span9 columns">
           <h2>Example carousel</h2>
           <p>Watch the slideshow below.</p>
-          <div id="myCarousel" class="thumbnail carousel slide">
+          <div id="myCarousel" class="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>
+                <img src="http://placehold.it/1000x500" alt="">
+                <div class="carousel-caption">
+                  <h4>First Thumbnail label</h4>
                   <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>
+                <img src="http://placehold.it/1000x500" alt="">
+                <div class="carousel-caption">
+                  <h4>Second Thumbnail label</h4>
                   <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>
+                <img src="http://placehold.it/1000x500" alt="">
+                <div class="carousel-caption">
+                  <h4>Third Thumbnail label</h4>
                   <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>
+            <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
+            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
           </div>
           <hr>
           <h2>Using bootstrap-carousel.js</h2>
@@ -1273,24 +1273,24 @@ $('#myCollapsible').on('hidden', function () {
           <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 class="carousel"&gt;
+  &lt;!-- Carousel items --&gt;
+  &lt;div class="carousel-inner"&gt;
+    ...
+  &lt;/div&gt;
+  &lt;!-- Carousel nav --&gt;
+  &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
+  &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&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>
+<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>
diff --git a/lib/accordion.less b/lib/accordion.less
new file mode 100644
index 0000000000..babbe85f92
--- /dev/null
+++ b/lib/accordion.less
@@ -0,0 +1,21 @@
+// ACCORDION
+// ---------
+
+.accordion {
+  padding: 0;
+}
+.accordion-heading {
+  padding: 5px 10px;
+  border: 1px solid #ddd;
+}
+.accordion-body {
+  padding: 10px;
+  margin-left: 0;
+  margin-bottom: @baseLineHeight / 2;
+  border: 1px solid #ddd;
+  border-top: 0;
+  display: none;
+}
+.accordion .in {
+  display: block;
+}
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index db5ed61f7f..fec87a3396 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -52,6 +52,7 @@
 @import "thumbnails.less";
 @import "labels.less";
 @import "progress-bars.less";
+@import "accordion.less";
 @import "carousel.less";
 
 // Utility classes
diff --git a/lib/carousel.less b/lib/carousel.less
index 0cfb0127a0..a9399ef63c 100644
--- a/lib/carousel.less
+++ b/lib/carousel.less
@@ -2,14 +2,17 @@
 // --------
 
 .carousel {
-
   position: relative;
+  line-height: 1;
+}
 
-  .carousel-inner {
-    overflow: hidden;
-    width: 100%;
-    position: relative;
-  }
+.carousel-inner {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+
+.carousel {
 
   .item {
     display: none;
@@ -17,38 +20,88 @@
     .transition(.6s ease-in-out left);
   }
 
-  .active, .next, .prev { display: block; }
+  .active, 
+  .next, 
+  .prev { display: block; }
 
-  .active { left: 0 }
+  .active {
+    left: 0;
+  }
 
-  .next, .prev {
+  .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); }
+  .next {
+    left: 100%;
   }
-}
\ No newline at end of file
+  .prev {
+    left: -100%;
+  }
+  .next.left, 
+  .prev.right {
+    left: 0;
+  }
+
+  .active.left {
+    left: -100%;
+  }
+  .active.right {
+    left: 100%;
+  }
+
+}
+
+// Left/right controls for nav
+// ---------------------------
+
+.carousel-control {
+  position: absolute;
+  top: 40%;
+  left: 15px;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  font-size: 60px;
+  font-weight: 100;
+  line-height: 30px;
+  color: #ccc;
+  text-align: center;
+  background: #999;
+  background: rgba(0,0,0,.5);
+  .border-radius(20px);
+
+  // Reposition the right one
+  &.right {
+    left: auto;
+    right: 15px;
+  }
+
+  // Hover state
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+    background: #333;
+    background: rgba(0,0,0,.75);
+  }
+}
+
+// Caption for text below images
+// -----------------------------
+
+.carousel-caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 15px 5px;
+  background: #333;
+  background: rgba(0,0,0,.75);
+}
+.carousel-caption h4,
+.carousel-caption p {
+  color: #fff;
+}