Carousel indicators transition (#26902)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 91c23e5fc3c1bc4d0133444462d2eb7e1e8e4b97..b7114e96374c59725a7ec6c006fde9f02c17c534 100644 (file)
--- 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 525f9be446bfc99d551393695b95cbfeb7d93c72..b301abbf80f4fef8acf506b602d11ef7b9d5604e 100644 (file)
--- 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;