diff options
| author | Martijn Cuppens <[email protected]> | 2018-07-25 06:15:05 +0200 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-07-24 21:15:05 -0700 |
| commit | 4f926671e942658b6aaca969614fc5f00dce612e (patch) | |
| tree | 9355a32d2e9f2ea9e586eaa2796b511e2ca37e3a | |
| parent | bbee41431d51f6d7d7160d9dc4d112b54d13904b (diff) | |
| download | bootstrap-4f926671e942658b6aaca969614fc5f00dce612e.tar.xz bootstrap-4f926671e942658b6aaca969614fc5f00dce612e.zip | |
Carousel indicators transition (#26902)
| -rw-r--r-- | scss/_carousel.scss | 6 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 |
2 files changed, 5 insertions, 2 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 91c23e5fc..b7114e963 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -190,7 +190,9 @@ margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - background-color: rgba($carousel-indicator-active-bg, .5); + background-color: $carousel-indicator-active-bg; + opacity: .5; + @include transition($carousel-indicator-transition); // Use pseudo classes to increase the hit area by 10px on top and bottom. &::before { @@ -214,7 +216,7 @@ } .active { - background-color: $carousel-indicator-active-bg; + opacity: 1; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 525f9be44..b301abbf8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -917,6 +917,7 @@ $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default; $carousel-indicator-active-bg: $white !default; +$carousel-indicator-transition: opacity .6s ease !default; $carousel-caption-width: 70% !default; $carousel-caption-color: $white !default; |