rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

redesign indicators

Browse Source
This commit is contained in:
Mark Otto 2016-12-04 20:14:33 -08:00
parent b0db5788df
commit 6d28f07582
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
scss/_carousel.scss
View File

@ -142,26 +142,36 @@
list-style: none;
li {
position: relative;
display: inline-block;
width: $carousel-indicator-size;
height: $carousel-indicator-size;
margin: 1px;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
text-indent: -999px;
cursor: pointer;
// IE9 hack for event handling
//
// Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`,
// so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
background-color: rgba(0,0,0,0); // IE9
border: 1px solid $carousel-indicator-border-color;
border-radius: $carousel-indicator-size;
background-color: rgba($carousel-indicator-active-bg, .5);
&::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
content: "";
width: 100%;
height: 10px;
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
content: "";
width: 100%;
height: 10px;
}
}
.active {
width: $carousel-indicator-active-size;
height: $carousel-indicator-active-size;
margin: 0;
background-color: $carousel-indicator-active-bg;
}
}

5
scss/_variables.scss
View File

@ -891,10 +891,9 @@ $carousel-control-font-size: 20px !default;
$carousel-indicators-width: 60% !default;
$carousel-indicator-size: 10px !default;
$carousel-indicator-active-size: 12px !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-width: 70% !default;
$carousel-caption-sm-up-width: 60% !default;