Carousel indicators transition (#26902)

twbs · Jul 25, 2018 · 4f92667 · 4f92667
1 parent bbee414
commit 4f92667
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git 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
@@ -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;