Improved mixin ability with nested media query

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index e80aa63c98191173d751c1b767a567fa6c9535a0..faff04314ede0c1ec0a586389055e491e73c1d39 100644 (file)
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -5610,6 +5610,47 @@ button.close {
 .carousel-inner > .item > a > img {
   line-height: 1;
 }
+@media all and (-webkit-transform-3d) {
+  .carousel-inner > .item {
+    -webkit-transition: -webkit-transform .6s ease-in-out;
+         -o-transition:      -o-transform .6s ease-in-out;
+            transition:         transform .6s ease-in-out;
+
+    -webkit-backface-visibility: hidden;
+        -ms-backface-visibility: hidden;
+         -o-backface-visibility: hidden;
+            backface-visibility: hidden;
+    -webkit-perspective: 1000;
+        -ms-perspective: 1000;
+         -o-perspective: 1000;
+            perspective: 1000;
+  }
+  .carousel-inner > .item.next,
+  .carousel-inner > .item.active.right {
+    left: 0;
+    -webkit-transform: translate3d(100%, 0, 0);
+        -ms-transform: translate3d(100%, 0, 0);
+         -o-transform: translate3d(100%, 0, 0);
+            transform: translate3d(100%, 0, 0);
+  }
+  .carousel-inner > .item.prev,
+  .carousel-inner > .item.active.left {
+    left: 0;
+    -webkit-transform: translate3d(-100%, 0, 0);
+        -ms-transform: translate3d(-100%, 0, 0);
+         -o-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+  }
+  .carousel-inner > .item.next.left,
+  .carousel-inner > .item.prev.right,
+  .carousel-inner > .item.active {
+    left: 0;
+    -webkit-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+  }
+}
 .carousel-inner > .active,
 .carousel-inner > .next,
 .carousel-inner > .prev {
@@ -5776,47 +5817,6 @@ button.close {
     bottom: 20px;
   }
 }
-@media all and (-webkit-transform-3d) {
-  .carousel .item {
-    -webkit-transition: -webkit-transform .6s ease-in-out;
-         -o-transition:      -o-transform .6s ease-in-out;
-            transition:         transform .6s ease-in-out;
-
-    -webkit-backface-visibility: hidden;
-        -ms-backface-visibility: hidden;
-         -o-backface-visibility: hidden;
-            backface-visibility: hidden;
-    -webkit-perspective: 1000;
-        -ms-perspective: 1000;
-         -o-perspective: 1000;
-            perspective: 1000;
-  }
-  .carousel .item.next,
-  .carousel .item.active.right {
-    left: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-        -ms-transform: translate3d(100%, 0, 0);
-         -o-transform: translate3d(100%, 0, 0);
-            transform: translate3d(100%, 0, 0);
-  }
-  .carousel .item.prev,
-  .carousel .item.active.left {
-    left: 0;
-    -webkit-transform: translate3d(-100%, 0, 0);
-        -ms-transform: translate3d(-100%, 0, 0);
-         -o-transform: translate3d(-100%, 0, 0);
-            transform: translate3d(-100%, 0, 0);
-  }
-  .carousel .item.next.left,
-  .carousel .item.prev.right,
-  .carousel .item.active {
-    left: 0;
-    -webkit-transform: translate3d(0, 0, 0);
-        -ms-transform: translate3d(0, 0, 0);
-         -o-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
-  }
-}
 .clearfix:before,
 .clearfix:after,
 .dl-horizontal dd:before,

diff --git a/less/carousel.less b/less/carousel.less
index 0d081928e5720177ae0784f49848145f75c4455c..ea3cade88e89643295ddfff96113605579361eab 100644 (file)
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -24,6 +24,25 @@
       &:extend(.img-responsive);
       line-height: 1;
     }
+
+    // WebKit CSS3 transforms for supported devices
+    @media all and (-webkit-transform-3d) {
+      .transition-transform(~'0.6s ease-in-out');
+      .backface-visibility(~'hidden');
+      .perspective(1000);
+      &.next, &.active.right {
+        .translate3d(100%, 0, 0);
+        left: 0;
+      }
+      &.prev, &.active.left {
+        .translate3d(-100%, 0, 0);
+        left: 0;
+      }
+      &.next.left, &.prev.right, &.active {
+        .translate3d(0, 0, 0);
+        left: 0;
+      }
+    }
   }
 
   > .active,
@@ -230,26 +249,3 @@
     bottom: 20px;
   }
 }
-
-// WebKit CSS3 transforms for supported devices
-@media all and (-webkit-transform-3d) {
-  .carousel {
-    .item {
-      .transition-transform(~'0.6s ease-in-out');
-      .backface-visibility(~'hidden');
-      .perspective(1000);
-      &.next, &.active.right {
-        .translate3d(100%, 0, 0);
-        left: 0;
-      }
-      &.prev, &.active.left {
-        .translate3d(-100%, 0, 0);
-        left: 0;
-      }
-      &.next.left, &.prev.right, &.active {
-        .translate3d(0, 0, 0);
-        left: 0;
-      }
-    }
-  }
-}