root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Simpler carousel indicators css (#26996)

This commit is contained in:
Martijn Cuppens 2018-08-26 13:53:36 +02:00 committed by XhmikosR
parent b652932f0c
commit 0e8831505a
2 changed files with 21 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
scss/_carousel.scss
View File

@ -170,7 +170,7 @@
.carousel-indicators {
position: absolute;
right: 0;
bottom: 10px;
bottom: 0;
left: 0;
z-index: 15;
display: flex;
@ -182,7 +182,7 @@
list-style: none;
li {
position: relative;
box-sizing: content-box;
flex: 0 1 auto;
width: $carousel-indicator-width;
height: $carousel-indicator-height;
@ -191,28 +191,12 @@
text-indent: -999px;
cursor: pointer;
background-color: $carousel-indicator-active-bg;
background-clip: padding-box;
// Use transparent borders to increase the hit area by 10px on top and bottom.
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5;
@include transition($carousel-indicator-transition);
// Use pseudo classes to increase the hit area by 10px on top and bottom.
&::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
&::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
}
.active {

1
scss/_variables.scss
View File

@ -930,6 +930,7 @@ $carousel-control-opacity: .5 !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer: 3px !default;
$carousel-indicator-active-bg: $white !default;
$carousel-indicator-transition: opacity .6s ease !default;