Overhaul carousel a bit more:

* Drop custom type arrow controls for glyphicons icons instead for more consistent rendering
* Remove the captions and instead let folks implement what they want in the carousel
* Move the indicators to the bottom middle instead of top right
* Lighten up gradients on the edges for less harsh lighting

diff --git a/_config.yml b/_config.yml
index df0aece1cf787054102ce0bfeb2225ac644f395d..57a28e0a783450a00cc4badd216d1cb0d24b5350 100644 (file)
--- a/_config.yml
+++ b/_config.yml
@@ -6,7 +6,6 @@ pygments:     true
 permalink:    pretty
 
 # Server
-auto:         true
 source:       ./docs
 destination:  ./_gh_pages
 url:          http://bootstrap.dev:9001

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index c91c7d00ed0fae6723372d708f81839c5d7e53d8..71994a8c8324458b400e8e24d369b3be806c9d31 100644 (file)
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -18,7 +18,6 @@
 
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 <script src="/assets/js/holder/holder.js"></script>
-<script src="/assets/js/google-code-prettify/prettify.js"></script>
 
 <script src="/assets/js/application.js"></script>
 

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 73db5262db7410e308dfca129c3932e99e583249..ce365b8bc48a81fc0190762203342c9f7fe17fe3 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4437,7 +4437,6 @@ a.counter:focus {
 
 .carousel {
   position: relative;
-  margin-bottom: 20px;
   line-height: 1;
 }
 
@@ -4513,27 +4512,27 @@ a.counter:focus {
 .carousel-control.left {
   background-color: rgba(0, 0, 0, 0.001);
   background-color: transparent;
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.001));
-  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0.001)));
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.001));
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.001));
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.001));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.001));
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.001)));
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.001));
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.001));
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.001));
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf000000', endColorstr='#00000000', GradientType=1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 }
 
 .carousel-control.right {
   right: 0;
   left: auto;
-  background-color: rgba(0, 0, 0, 0.75);
+  background-color: rgba(0, 0, 0, 0.5);
   background-color: transparent;
-  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.75));
-  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.001)), to(rgba(0, 0, 0, 0.75)));
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.75));
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.75));
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.75));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.5));
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0, 0, 0, 0.001)), to(rgba(0, 0, 0, 0.5)));
+  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.5));
+  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.5));
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.5));
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#bf000000', GradientType=1);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
 }
 
 .carousel-control:hover,
@@ -4544,42 +4543,45 @@ a.counter:focus {
   filter: alpha(opacity=90);
 }
 
-.carousel-control .control {
+.carousel-control .carousel-control .glyphicon-chevron-left,
+.carousel-control .carousel-control .glyphicon-chevron-right {
   position: absolute;
   top: 50%;
   z-index: 5;
-  display: block;
-  margin-top: -35px;
-  margin-left: 30px;
-  font-size: 80px;
-  font-weight: 100;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: 20px;
+  font-size: 20px;
   color: #fff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
 
-.carousel-control.right .control {
-  margin-left: 70px;
+.carousel-control .carousel-control .glyphicon-chevron-right {
+  margin-left: 80px;
 }
 
 .carousel-indicators {
   position: absolute;
-  top: 15px;
-  right: 15px;
+  bottom: 15px;
+  left: 50%;
   z-index: 5;
-  margin: 0;
+  width: 100px;
+  margin: 0 0 0 -50px;
+  text-align: center;
   list-style: none;
 }
 
 .carousel-indicators li {
-  display: block;
-  float: left;
-  width: 10px;
-  height: 10px;
-  margin-left: 5px;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 0;
+  margin-left: 0;
   text-indent: -999px;
   cursor: pointer;
-  background-color: #ccc;
-  background-color: rgba(255, 255, 255, 0.25);
+  border: 1px solid #fff;
   border-radius: 5px;
 }
 
@@ -4587,29 +4589,18 @@ a.counter:focus {
   background-color: #fff;
 }
 
-.carousel-caption {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  max-width: 60%;
-  padding: 40px;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-}
-
-.carousel-caption h3,
-.carousel-caption p {
-  line-height: 20px;
-  color: #fff;
-}
-
-.carousel-caption h3 {
-  margin: 0 0 5px;
-}
-
-.carousel-caption p {
-  margin-bottom: 0;
+@media screen and (min-width: 768px) {
+  .carousel-control .glyphicon-chevron-left,
+  .carousel-control .glyphicon-chevron-right {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    margin-left: 30px;
+    font-size: 30px;
+  }
+  .carousel-control .glyphicon-chevron-right {
+    margin-left: 70px;
+  }
 }
 
 .jumbotron {

diff --git a/docs/javascript.html b/docs/javascript.html
index 3fc8d0471fa614f36276a836ec5c552afa9b5943..3306392671c83472ce8f08e3256eabf28f9c86c9 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1481,32 +1481,20 @@ $('#myCollapsible').on('hidden', function () {
                 </ol>
                 <div class="carousel-inner">
                   <div class="item active">
-                    <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
-                    <div class="carousel-caption">
-                      <h3>First slide label</h3>
-                      <p>Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
-                    </div>
+                    <img data-src="holder.js/900x500/auto/#777:#fff/text:First slide" alt="">
                   </div>
                   <div class="item">
-                    <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
-                    <div class="carousel-caption">
-                      <h3>Second slide label</h3>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare.</p>
-                    </div>
+                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Second slide" alt="">
                   </div>
                   <div class="item">
-                    <img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
-                    <div class="carousel-caption">
-                      <h3>Third slide label</h3>
-                      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-                    </div>
+                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
                   </div>
                 </div>
                 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
-                  <span class="control">&lsaquo;</span>
+                  <span class="glyphicon-chevron-left"></span>
                 </a>
                 <a class="right carousel-control" href="#myCarousel" data-slide="next">
-                  <span class="control">&rsaquo;</span>
+                  <span class="glyphicon-chevron-right"></span>
                 </a>
               </div>
             </div><!-- /example -->

diff --git a/less/carousel.less b/less/carousel.less
index 8696d4155637273857e5ced4c30f16db22494887..167ee52ec64432cb2ae6fbeacaf5c15fe5de4f54 100644 (file)
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -3,18 +3,20 @@
 // --------------------------------------------------
 
 
+// Wrapper for the slide container and indicators
 .carousel {
   position: relative;
-  margin-bottom: @line-height-base;
   line-height: 1;
 }
 
+// Wrap all slides, but only show the active one
 .carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
 }
 
+// Immediate parent of all slides
 .carousel-inner {
 
   > .item {
@@ -85,13 +87,13 @@
 
   // Set gradients for backgrounds
   &.left {
-    #gradient > .horizontal(rgba(0,0,0,.75), rgba(0,0,0,.001));
+    #gradient > .horizontal(rgba(0,0,0,.5), rgba(0,0,0,.001));
     background-color: transparent;
   }
   &.right {
     left: auto;
     right: 0;
-    #gradient > .horizontal(rgba(0,0,0,.001), rgba(0,0,0,.75));
+    #gradient > .horizontal(rgba(0,0,0,.001), rgba(0,0,0,.5));
     background-color: transparent;
   }
 
@@ -104,20 +106,22 @@
   }
 
   // Toggles
-  .control {
+  .carousel-control .glyphicon-chevron-left,
+  .carousel-control .glyphicon-chevron-right {
     position: absolute;
     top: 50%;
     z-index: 5;
-    display: block;
-    margin-top: -35px;
-    margin-left: 30px;
-    font-size: 80px;
-    font-weight: 100;
+    display: inline-block;
+    width:  20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: 20px;
+    font-size: 20px;
     color: #fff;
     text-shadow: 0 1px 2px rgba(0,0,0,.6);
   }
-  &.right .control {
-    margin-left: 70px;
+  .carousel-control .glyphicon-chevron-right {
+    margin-left: 80px;
   }
 }
 
@@ -125,21 +129,22 @@
 // -----------------------------
 .carousel-indicators {
   position: absolute;
-  top: 15px;
-  right: 15px;
+  bottom: 15px;
+  left: 50%;
   z-index: 5;
-  margin: 0;
+  width: 100px;
+  margin: 0 0 0 -50px;
   list-style: none;
+  text-align: center;
 
   li {
-    display: block;
-    float: left;
-    width: 10px;
-    height: 10px;
-    margin-left: 5px;
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-left: 0;
+    margin-right: 0;
     text-indent: -999px;
-    background-color: #ccc;
-    background-color: rgba(255,255,255,.25);
+    border: 1px solid #fff;
     border-radius: 5px;
     cursor: pointer;
   }
@@ -149,28 +154,19 @@
 }
 
 
-// Caption for text below images
-// -----------------------------
-
-.carousel-caption {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  padding: 40px;
-  text-shadow: 0 1px 2px rgba(0,0,0,.6);
-  max-width: 60%;
+// Scale up controls for >768px
+@media screen and (min-width: 768px) {
 
-  h3,
-  p {
-    color: #fff;
-    line-height: @line-height-base;
-  }
-  h3 {
-    margin: 0 0 5px;
+  .carousel-control .glyphicon-chevron-left,
+  .carousel-control .glyphicon-chevron-right {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    margin-left: 30px;
+    font-size: 30px;
   }
-  p {
-    margin-bottom: 0;
+  .carousel-control .glyphicon-chevron-right {
+    margin-left: 70px;
   }
+
 }