diff options
| author | Martijn Cuppens <martijn.cuppens@gmail.com> | 2018-10-29 23:11:50 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2018-10-30 09:57:02 +0300 |
| commit | 5aed968750177ec35f99dc03e71eec3632beb844 (patch) | |
| tree | e4a3c6c0dab1dfe588b7ed6e779d4b9754ed804e /scss | |
| parent | 5e6b53a7c012be9bcef5b2c5edc7b3cdafc102a7 (diff) | |
Prevent the background to be shown when transitioning
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_carousel.scss | 4 | ||||
| -rw-r--r-- | scss/_variables.scss | 3 |
2 files changed, 6 insertions, 1 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 9693b129ec..5681c1f277 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 a16ea1fbbf..a3538ff6b9 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 |