From 5aed968750177ec35f99dc03e71eec3632beb844 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Mon, 29 Oct 2018 21:11:50 +0100
Subject: Prevent the background to be shown when transitioning

---
 scss/_carousel.scss  | 4 ++++
 scss/_variables.scss | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

(limited to 'scss')

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 9693b129e..5681c1f27 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -89,12 +89,15 @@
   .carousel-item.active,
   .carousel-item-next.carousel-item-left,
   .carousel-item-prev.carousel-item-right {
+    z-index: 1;
     opacity: 1;
   }
 
   .active.carousel-item-left,
   .active.carousel-item-right {
+    z-index: 0;
     opacity: 0;
+    @include transition(0s $carousel-transition-duration opacity);
   }
 }
 
@@ -108,6 +111,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
+  z-index: 1;
   // Use flex for alignment (1-3)
   display: flex; // 1. allow flex styles
   align-items: center; // 2. vertically center contents
diff --git a/scss/_variables.scss b/scss/_variables.scss
index a16ea1fbb..a3538ff6b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1006,7 +1006,8 @@ $carousel-control-icon-width:        20px !default;
 $carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
 $carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
 
-$carousel-transition:                transform .6s ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-transition-duration:       .6s !default;
+$carousel-transition:                transform $carousel-transition-duration ease !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
 
 // Close
-- 
cgit v1.2.3