flexbox powered indicators

This revamps the indicators to use flexbox instead of inline-block for added flexbility (hah). Indicators now automatically scale based on the number of elements present, and max out at the `$carousel-indicator-width` instead of always being that wide.

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 01ad613e0ff3062765419b639a281f08fa537b2d..18286b539fdc82f5f8591ad68aee1f3109170893 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -121,6 +121,8 @@
   bottom: 10px;
   left: 0;
   z-index: 15;
+  display: flex;
+  justify-content: center;
   padding-left: 0; // override <ul> default
   // Use the .carousel-control's width as margin so we don't overlay those
   margin-right: $carousel-control-width;
@@ -130,9 +132,11 @@
 
   li {
     position: relative;
-    display: inline-block;
-    width: $carousel-indicator-width;
+    flex: 1 0 auto;
+    max-width: $carousel-indicator-width;
     height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
     background-color: rgba($carousel-indicator-active-bg, .5);

diff --git a/scss/_variables.scss b/scss/_variables.scss
index b76064d96758dd5b988fbb15c64ab6f01b0650b9..e12ccd149cbb44b46e74855e7bade810e81089d9 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -912,6 +912,7 @@ $carousel-control-opacity:                    .5 !default;
 
 $carousel-indicator-width:                    30px !default;
 $carousel-indicator-height:                   3px !default;
+$carousel-indicator-spacer:                   3px !default;
 $carousel-indicator-active-bg:                #fff !default;
 
 $carousel-caption-width:                      70% !default;