Following up on #21389, this implements flexbox into some aspects of the carousel. The entire thing isn't flexbox (yet?) as I think that might require a rethinking of the JS approach. (Compare our JS methods to https://blog.madewithenvy.com/the-order-property-flexbox-carousels-87a168567820#.7vubbda6s, for example.)
However, this does make the following changes:
-
Sets
display: flexinstead ofblockon active carousel items. There's no visual different here, but if folks want to get creative, this might make it a bit easier. -
Rebuilds carousel controls (the left and right click areas) with flexbox. They're still absolutely positioned themselves, but the icons within are now aligned via flexbox. Far simpler styling overall.
-
Rebuilds carousel indicators with flexbox. Instead of a fixed
width, we're now using amax-widthand some flexbox styling to scale to n number of indicators quite easily. This required adding some new horizontalmargin(display: flexdoesn't "suffer" from the same HTML space asinline-block); I've added a new variable to help customize that here. -
Removed some unused CSS that was left in since the move back to SVGs for icons and more.
Fixes #21305 (closed).