Ensure carousel works in IE10/11

- Drops the `if-supports-3d-transforms()` mixin since all our browsers do support it

- Updates carousel to not rely on that mixin
This commit is contained in:
Mark Otto 2017-04-08 15:20:26 -07:00 committed by Mark Otto
parent feb35b94a6
commit ab67ffe167
3 changed files with 14 additions and 34 deletions

View File

@ -13,12 +13,9 @@
position: relative; position: relative;
display: none; display: none;
width: 100%; width: 100%;
@include transition($carousel-transition);
@include if-supports-3d-transforms() { backface-visibility: hidden;
@include transition($carousel-transition); perspective: 1000px;
backface-visibility: hidden;
perspective: 1000px;
}
} }
.carousel-item.active, .carousel-item.active,
@ -34,21 +31,19 @@
} }
// CSS3 transforms when supported by the browser // CSS3 transforms when supported by the browser
@include if-supports-3d-transforms() { .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
.carousel-item-prev.carousel-item-right { transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
}
.carousel-item-next, .carousel-item-next,
.active.carousel-item-right { .active.carousel-item-right {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
.carousel-item-prev, .carousel-item-prev,
.active.carousel-item-left { .active.carousel-item-left {
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
}
} }

View File

@ -14,7 +14,6 @@
@import "mixins/text-emphasis"; @import "mixins/text-emphasis";
@import "mixins/text-hide"; @import "mixins/text-hide";
@import "mixins/text-truncate"; @import "mixins/text-truncate";
@import "mixins/transforms";
@import "mixins/visibility"; @import "mixins/visibility";
// // Components // // Components

View File

@ -1,14 +0,0 @@
// Applies the given styles only when the browser support CSS3 3D transforms.
@mixin if-supports-3d-transforms() {
@media (-webkit-transform-3d) {
// Old Safari, Old Android
// http://caniuse.com/#feat=css-featurequeries
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d
@content;
}
@supports (transform: translate3d(0,0,0)) {
// The Proper Way: Using a CSS feature query
@content;
}
}