1 files changed, 42 insertions, 10 deletions
diff --git a/less/mixins.less b/less/mixins.less
index e1e06bd2a6..fd162a0491 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -509,37 +509,69 @@
 // -------------------------
 // For tipsies and popovers
 #popoverArrow {
-  .top(@arrowWidth: 5px, @color: @black) {
-    bottom: 0;
+  .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
+    bottom: -@arrowWidth;
     left: 50%;
     margin-left: -@arrowWidth;
     border-left: @arrowWidth solid transparent;
     border-right: @arrowWidth solid transparent;
+    border-top: @arrowWidth solid #ccc;
     border-top: @arrowWidth solid @color;
+    &:after {
+      border-left: @arrowWidth - 1 solid transparent;
+      border-right: @arrowWidth - 1 solid transparent;
+      border-top: @arrowWidth - 1 solid #fff;
+      bottom: 1px;
+      left: -@arrowWidth + 1;
+    }
   }
-  .left(@arrowWidth: 5px, @color: @black) {
+  .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
     top: 50%;
-    right: 0;
+    left: -@arrowWidth;
     margin-top: -@arrowWidth;
     border-top: @arrowWidth solid transparent;
     border-bottom: @arrowWidth solid transparent;
-    border-left: @arrowWidth solid @color;
+    border-right: @arrowWidth solid #ccc;
+    border-right: @arrowWidth solid @color;
+    &:after {
+      border-top: @arrowWidth - 1 solid transparent;
+      border-bottom: @arrowWidth - 1 solid transparent;
+      border-right: @arrowWidth - 1 solid #fff;
+      bottom: -@arrowWidth + 1;
+      left: 1px;
+    }
   }
-  .bottom(@arrowWidth: 5px, @color: @black) {
-    top: 0;
+  .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
+    top: -@arrowWidth;
     left: 50%;
     margin-left: -@arrowWidth;
     border-left: @arrowWidth solid transparent;
     border-right: @arrowWidth solid transparent;
+    border-bottom: @arrowWidth solid #ccc;
     border-bottom: @arrowWidth solid @color;
+    &:after {
+      border-left: @arrowWidth - 1 solid transparent;
+      border-right: @arrowWidth - 1 solid transparent;
+      border-bottom: @arrowWidth - 1 solid #f5f5f5;
+      top: 1px;
+      left: -@arrowWidth + 1;
+    }
   }
-  .right(@arrowWidth: 5px, @color: @black) {
+  .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
     top: 50%;
-    left: 0;
+    right: -@arrowWidth;
     margin-top: -@arrowWidth;
     border-top: @arrowWidth solid transparent;
     border-bottom: @arrowWidth solid transparent;
-    border-right: @arrowWidth solid @color;
+    border-left: @arrowWidth solid #ccc;
+    border-left: @arrowWidth solid @color;
+    &:after {
+      border-top: @arrowWidth - 1 solid transparent;
+      border-bottom: @arrowWidth - 1 solid transparent;
+      border-left: @arrowWidth - 1 solid #fff;
+      bottom: -@arrowWidth + 1;
+      right: 1px;
+    }
   }
 }