diff options
| author | Martijn Cuppens <[email protected]> | 2018-08-26 13:53:36 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-08-26 14:53:36 +0300 |
| commit | 0e8831505ac845f3102fa2c5996a7141c9ab01ee (patch) | |
| tree | 0cf7640a38b68f1dc32f6a115841db9f15ae2d20 /scss/_carousel.scss | |
| parent | b652932f0cdfa3ca054f9b607d56f3bdb046d284 (diff) | |
| download | bootstrap-0e8831505ac845f3102fa2c5996a7141c9ab01ee.tar.xz bootstrap-0e8831505ac845f3102fa2c5996a7141c9ab01ee.zip | |
Simpler carousel indicators css (#26996)
Diffstat (limited to 'scss/_carousel.scss')
| -rw-r--r-- | scss/_carousel.scss | 28 |
1 files changed, 6 insertions, 22 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index b7114e963..97e792ea7 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -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 { |