Variable carousel indicator opacity (#29468)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 0e79f179b6d7b73cd4204cdbca69d73951949bc7..020604e335cc71d273083ab0e360f52aeae9a6a3 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -171,12 +171,12 @@
     // 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;
+    opacity: $carousel-indicator-opacity;
     @include transition($carousel-indicator-transition);
   }
 
   .active {
-    opacity: 1;
+    opacity: $carousel-indicator-active-opacity;
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 70d1a68a10fe6cb734015519dfe2734b728a464d..eaa1649883cc5128c7e95883a6dac1bb6f347ac2 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1070,7 +1070,9 @@ $carousel-indicator-width:           30px !default;
 $carousel-indicator-height:          3px !default;
 $carousel-indicator-hit-area-height: 10px !default;
 $carousel-indicator-spacer:          3px !default;
+$carousel-indicator-opacity:         .5 !default;
 $carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-active-opacity:  1 !default;
 $carousel-indicator-transition:      opacity .6s ease !default;
 
 $carousel-caption-width:             70% !default;