From d0a7707dd4dc9140889ad2b03a55e9a15b33e3d9 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 22 Dec 2016 14:30:05 -0800
Subject: [PATCH 1/5] start small--set flex instead of block for active items

---
 scss/_carousel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 7949e1564c62..01ad613e0ff3 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -24,7 +24,7 @@
 .carousel-item.active,
 .carousel-item-next,
 .carousel-item-prev {
-  display: block;
+  display: flex;
 }
 
 .carousel-item-next,

From c9285ab4296af309fa5b5dd6c41df6d8be7aa285 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 22 Dec 2016 14:31:33 -0800
Subject: [PATCH 2/5] 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.
---
 scss/_carousel.scss  | 8 ++++++--
 scss/_variables.scss | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 01ad613e0ff3..18286b539fdc 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 b76064d96758..e12ccd149cbb 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;

From ba38d6ed7f70108947a1c8a0aba3376ed5c80383 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 22 Dec 2016 14:41:00 -0800
Subject: [PATCH 3/5] Redo controls in flexbox

- Drops the absolute positioning of the icons within the left/right controls. We have to keep the controls themselves positioned though since we're overlapping HTML elements here.

- No more position, left, right, or margins involved; just some justify-content and align-items.

- Add some comments for explaining which flex property-value pair does what.

- Remove the unapplied font and line-height stuff now that we're all SVGs and flexbox here.
---
 scss/_carousel.scss | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 18286b539fdc..77386f0fd2ab 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -61,6 +61,10 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  justify-content: center; // 2. horizontally center contents
+  align-items: center; // 3. vertically center contents
   width: $carousel-control-width;
   color: $carousel-control-color;
   text-align: center;
@@ -86,26 +90,16 @@
 // Icons for within
 .carousel-control-prev-icon,
 .carousel-control-next-icon {
-  position: absolute;
-  top: 50%;
-  z-index: 5;
   display: inline-block;
   width: $carousel-control-icon-width;
   height: $carousel-control-icon-width;
-  margin-top: -($carousel-control-icon-width / 2);
-  font-family: serif;
-  line-height: 1;
   background: transparent no-repeat center center;
   background-size: 100% 100%;
 }
 .carousel-control-prev-icon {
-  left: 50%;
-  margin-left: -($carousel-control-icon-width / 2);
   background-image: $carousel-control-prev-icon-bg;
 }
 .carousel-control-next-icon {
-  right: 50%;
-  margin-right: -($carousel-control-icon-width / 2);
   background-image: $carousel-control-next-icon-bg;
 }
 

From f0460f4dbbe2f07d4fcba2de15ac12e6ef32c848 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 22 Dec 2016 14:41:27 -0800
Subject: [PATCH 4/5] text-align doesn't apply here, so we can nuke it

---
 scss/_carousel.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 77386f0fd2ab..28886e4c0400 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -121,7 +121,6 @@
   // Use the .carousel-control's width as margin so we don't overlay those
   margin-right: $carousel-control-width;
   margin-left: $carousel-control-width;
-  text-align: center;
   list-style: none;
 
   li {

From c48e6d87849ba38a581712ad540476d7fb6fa368 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Thu, 22 Dec 2016 14:47:28 -0800
Subject: [PATCH 5/5] linting

---
 scss/_carousel.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 28886e4c0400..df1e300b5f26 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -63,8 +63,8 @@
   bottom: 0;
   // Use flex for alignment (1-3)
   display: flex; // 1. allow flex styles
-  justify-content: center; // 2. horizontally center contents
-  align-items: center; // 3. vertically center contents
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
   width: $carousel-control-width;
   color: $carousel-control-color;
   text-align: center;