mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-20 04:11:39 +02:00
Code Issues Releases Wiki 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
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; list-style: none;
li { li {
position: relative;
display: inline-block; display: inline-block;
width: $carousel-indicator-size; width: $carousel-indicator-width;
height: $carousel-indicator-size; height: $carousel-indicator-height;
margin: 1px;
text-indent: -999px; text-indent: -999px;
cursor: pointer; cursor: pointer;
// IE9 hack for event handling background-color: rgba($carousel-indicator-active-bg, .5);
//
// Internet Explorer 9 does not properly handle clicks on elements with a `background-color` of `transparent`, &::before {
// so we use `rgba(0,0,0,0)` instead since it's a non-buggy equivalent. position: absolute;
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer top: -10px;
background-color: rgba(0,0,0,0); // IE9 left: 0;
border: 1px solid $carousel-indicator-border-color; display: inline-block;
border-radius: $carousel-indicator-size; content: "";
width: 100%;
height: 10px;
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
content: "";
width: 100%;
height: 10px;
}
} }
.active { .active {
width: $carousel-indicator-active-size;
height: $carousel-indicator-active-size;
margin: 0;
background-color: $carousel-indicator-active-bg; 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-indicators-width: 60% !default;
$carousel-indicator-size: 10px !default; $carousel-indicator-width: 30px !default;
$carousel-indicator-active-size: 12px !default; $carousel-indicator-height: 3px !default;
$carousel-indicator-active-bg: #fff !default; $carousel-indicator-active-bg: #fff !default;
$carousel-indicator-border-color: #fff !default;
$carousel-caption-width: 70% !default; $carousel-caption-width: 70% !default;
$carousel-caption-sm-up-width: 60% !default; $carousel-caption-sm-up-width: 60% !default;