From ab67ffe167a7d2d7f8cd54ae22c48507f49ecbb8 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 8 Apr 2017 15:20:26 -0700
Subject: [PATCH] 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
---
scss/_carousel.scss | 33 ++++++++++++++-------------------
scss/_mixins.scss | 1 -
scss/mixins/_transforms.scss | 14 --------------
3 files changed, 14 insertions(+), 34 deletions(-)
delete mode 100644 scss/mixins/_transforms.scss
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 1b6e450ae2..70c3cc64dd 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -13,12 +13,9 @@
position: relative;
display: none;
width: 100%;
-
- @include if-supports-3d-transforms() {
- @include transition($carousel-transition);
- backface-visibility: hidden;
- perspective: 1000px;
- }
+ @include transition($carousel-transition);
+ backface-visibility: hidden;
+ perspective: 1000px;
}
.carousel-item.active,
@@ -34,21 +31,19 @@
}
// CSS3 transforms when supported by the browser
-@include if-supports-3d-transforms() {
- .carousel-item-next.carousel-item-left,
- .carousel-item-prev.carousel-item-right {
- transform: translate3d(0, 0, 0);
- }
+.carousel-item-next.carousel-item-left,
+.carousel-item-prev.carousel-item-right {
+ transform: translate3d(0, 0, 0);
+}
- .carousel-item-next,
- .active.carousel-item-right {
- transform: translate3d(100%, 0, 0);
- }
+.carousel-item-next,
+.active.carousel-item-right {
+ transform: translate3d(100%, 0, 0);
+}
- .carousel-item-prev,
- .active.carousel-item-left {
- transform: translate3d(-100%, 0, 0);
- }
+.carousel-item-prev,
+.active.carousel-item-left {
+ transform: translate3d(-100%, 0, 0);
}
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 13aad24875..cc3394f0a0 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -14,7 +14,6 @@
@import "mixins/text-emphasis";
@import "mixins/text-hide";
@import "mixins/text-truncate";
-@import "mixins/transforms";
@import "mixins/visibility";
// // Components
diff --git a/scss/mixins/_transforms.scss b/scss/mixins/_transforms.scss
deleted file mode 100644
index 4005c9d028..0000000000
--- a/scss/mixins/_transforms.scss
+++ /dev/null
@@ -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;
- }
-}
--
GitLab