Variable carousel indicator opacity (#29468)

46e8f1a3 · astrahov · Martijn Cuppens · 0a3aa08b · 46e8f1a3 · 46e8f1a3
Commit 46e8f1a3 authored 5 years ago by astrahov Committed by Martijn Cuppens 5 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 4 additions and 2 deletions
+4 -2
--- 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;
  }
 }


--- 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;