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:
parent
feb35b94a6
commit
ab67ffe167
|
@ -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);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in New Issue