kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

flexbox powered indicators

Browse source 
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.
This commit is contained in:
Mark Otto 2016-12-22 14:31:33 -08:00 • committed by Mark Otto
parent d426c3c50e
commit 1706f494f0
2 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
scss/_carousel.scss
View file

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

1
scss/_variables.scss
View file

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