From: Mark Otto <markdotto@gmail.com>
Date: Thu, 22 Dec 2016 22:31:33 +0000 (-0800)
Subject: flexbox powered indicators
X-Git-Tag: v4.0.0-alpha.6~244
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1706f494f06a3981097b42f42854a870a51af864;p=thirdparty%2Fbootstrap.git

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 01ad613e0f..18286b539f 100644
--- 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 b76064d967..e12ccd149c 100644
--- 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;