carousel.less in bootstrap_farsi-3.3.6

- old
+ new

@@ -16,16 +16,41 @@
   > .item {
     display: none;
     position: relative;
     .carousel-transition(.6s ease-in-out);
 
+
     // Account for jankitude on images
     > img,
     > a > img {
       &:extend(.img-responsive);
       line-height: 1;
     }
+
+    // WebKit CSS3 transforms for supported devices
+    @media all and (transform-3d), (-webkit-transform-3d) {
+      .transition-transform(~'0.6s ease-in-out');
+      .backface-visibility(~'hidden');
+      .perspective(1000px);
+
+      &.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,
   > .next,
   > .prev {
@@ -45,11 +70,11 @@
 
   > .next {
     .left(100%);
   }
   > .prev {
-    .left(-100%);
+    .left(100%);
   }
   > .next.left,
   > .prev.right {
     .left(0);
   }
@@ -67,27 +92,29 @@
 // ---------------------------
 
 .carousel-control {
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
   width: @carousel-control-width;
   .opacity(@carousel-control-opacity);
   font-size: @carousel-control-font-size;
   color: @carousel-control-color;
   text-align: center;
   text-shadow: @carousel-text-shadow;
+  background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
   // We can't have this transition here because WebKit cancels the carousel
   // animation if you trip this while in the middle of another animation.
 
   // Set gradients for backgrounds
   &.left {
+    .left(0);
+    .right(auto);
   }
   &.right {
-    left: auto;
-    right: 0;
+    .left(auto);
+    .right(0);
   }
 
   // Hover/focus state
   &:hover,
   &:focus {
@@ -102,10 +129,11 @@
   .icon-next,
   .glyphicon-chevron-left,
   .glyphicon-chevron-right {
     position: absolute;
     top: 50%;
+    margin-top: -10px;
     z-index: 5;
     display: inline-block;
   }
   .icon-prev,
   .glyphicon-chevron-left {
@@ -119,11 +147,11 @@
   }
   .icon-prev,
   .icon-next {
     width:  20px;
     height: 20px;
-    margin-top: -10px;
+    line-height: 1;
     font-family: serif;
   }
 
 
   .icon-prev {
@@ -167,10 +195,11 @@
     // IE8-9 hack for event handling
     //
     // Internet Explorer 8-9 does not support clicks on elements without a set
     // `background-color`. We cannot use `filter` since that's not viewed as a
     // background color by the browser. Thus, a hack is needed.
+    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
     //
     // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
     // set alpha transparency for the best results possible.
     background-color: #000 \9; // IE8
     background-color: rgba(0,0,0,0); // IE9
@@ -210,21 +239,21 @@
   .carousel-control {
     .glyphicon-chevron-left,
     .glyphicon-chevron-right,
     .icon-prev,
     .icon-next {
-      width: 30px;
-      height: 30px;
-      margin-top: -15px;
-      font-size: 30px;
+      width: (@carousel-control-font-size * 1.5);
+      height: (@carousel-control-font-size * 1.5);
+      margin-top: (@carousel-control-font-size / -2);
+      font-size: (@carousel-control-font-size * 1.5);
     }
     .glyphicon-chevron-left,
     .icon-prev {
-      .margin-left(-15px);
+      .margin-left((@carousel-control-font-size / -2));
     }
     .glyphicon-chevron-right,
     .icon-next {
-      .margin-right(-15px);
+      .margin-right((@carousel-control-font-size / -2));
     }
   }
 
   // Show and left align the captions
   .carousel-caption {