kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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.
This commit is contained in:
Mark Otto 2016-12-22 14:41:00 -08:00 committed by Mark Otto
parent 1706f494f0
commit be7a8c68f7
1 changed files with 4 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
scss/_carousel.scss
View File

@ -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;
}