From 4f926671e942658b6aaca969614fc5f00dce612e Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Wed, 25 Jul 2018 06:15:05 +0200
Subject: [PATCH] Carousel indicators transition (#26902)

---
 scss/_carousel.scss  | 6 ++++--
 scss/_variables.scss | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 91c23e5fc3..b7114e9637 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 525f9be446..b301abbf80 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;