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.

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 18286b539fdc82f5f8591ad68aee1f3109170893..77386f0fd2ab9e9088fd44de98baf072f23e9763 100644 (file)
--- 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;
 }