rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix Edge bounce and restore original transition easing (#27279)

Browse Source
This commit is contained in:
Martijn Cuppens 2018-10-31 08:45:39 +01:00 committed by XhmikosR
parent f20e46e2da
commit 96b49d7833
2 changed files with 7 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
scss/_carousel.scss
View File

@ -23,55 +23,32 @@
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@include clearfix();
} }
.carousel-item { .carousel-item {
position: relative; position: relative;
display: none; display: none;
align-items: center; float: left;
width: 100%; width: 100%;
backface-visibility: hidden; margin-right: -100%;
perspective: 1000px; @include transition($carousel-transition);
} }
.carousel-item.active, .carousel-item.active,
.carousel-item-next, .carousel-item-next,
.carousel-item-prev { .carousel-item-prev {
display: block; display: block;
@include transition($carousel-transition);
} }
.carousel-item-next, .carousel-item-next:not(.carousel-item-left),
.carousel-item-prev {
position: absolute;
top: 0;
}
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
transform: translateX(0);
@supports (transform-style: preserve-3d) {
transform: translate3d(0, 0, 0);
}
}
.carousel-item-next,
.active.carousel-item-right { .active.carousel-item-right {
transform: translateX(100%); transform: translateX(100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(100%, 0, 0);
}
} }
.carousel-item-prev, .carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left { .active.carousel-item-left {
transform: translateX(-100%); transform: translateX(-100%);
@supports (transform-style: preserve-3d) {
transform: translate3d(-100%, 0, 0);
}
} }

2
scss/_variables.scss
View File

@ -1007,7 +1007,7 @@ $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg
$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-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-duration: .6s !default; $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`) $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
// Close // Close