popovers.less in twitter-bootstrap-rails-2.1.8

- old
+ new

@@ -9,25 +9,28 @@
   left: 0;
   z-index: @zindexPopover;
   display: none;
   width: 236px;
   padding: 1px;
+  text-align: left; // Reset given new insertion method
   background-color: @popoverBackground;
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
   border: 1px solid #ccc;
   border: 1px solid rgba(0,0,0,.2);
   .border-radius(6px);
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
 
+  // Overrides for proper insertion
+  white-space: normal;
+
   // Offset the popover to account for the popover arrow
   &.top     { margin-top: -10px; }
   &.right   { margin-left: 10px; }
   &.bottom  { margin-top: 10px; }
   &.left    { margin-left: -10px; }
-
 }
 
 .popover-title {
   margin: 0; // reset heading margin
   padding: 8px 14px;
@@ -39,79 +42,88 @@
   .border-radius(5px 5px 0 0);
 }
 
 .popover-content {
   padding: 9px 14px;
-  p, ul, ol {
-    margin-bottom: 0;
-  }
 }
 
 // Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
 .popover .arrow,
 .popover .arrow:after {
   position: absolute;
-  display: inline-block;
+  display: block;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
 }
+.popover .arrow {
+  border-width: @popoverArrowOuterWidth;
+}
 .popover .arrow:after {
+  border-width: @popoverArrowWidth;
   content: "";
-  z-index: -1;
 }
 
 .popover {
   &.top .arrow {
-    bottom: -@popoverArrowWidth;
     left: 50%;
-    margin-left: -@popoverArrowWidth;
-    border-width: @popoverArrowWidth @popoverArrowWidth 0;
-    border-top-color: @popoverArrowColor;
+    margin-left: -@popoverArrowOuterWidth;
+    border-bottom-width: 0;
+    border-top-color: #999; // IE8 fallback
+    border-top-color: @popoverArrowOuterColor;
+    bottom: -@popoverArrowOuterWidth;
     &:after {
-      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
-      border-top-color: @popoverArrowOuterColor;
-      bottom: -1px;
-      left: -@popoverArrowOuterWidth;
+      bottom: 1px;
+      margin-left: -@popoverArrowWidth;
+      border-bottom-width: 0;
+      border-top-color: @popoverArrowColor;
     }
   }
   &.right .arrow {
     top: 50%;
-    left: -@popoverArrowWidth;
-    margin-top: -@popoverArrowWidth;
-    border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
-    border-right-color: @popoverArrowColor;
+    left: -@popoverArrowOuterWidth;
+    margin-top: -@popoverArrowOuterWidth;
+    border-left-width: 0;
+    border-right-color: #999; // IE8 fallback
+    border-right-color: @popoverArrowOuterColor;
     &:after {
-      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
-      border-right-color: @popoverArrowOuterColor;
-      bottom: -@popoverArrowOuterWidth;
-      left: -1px;
+      left: 1px;
+      bottom: -@popoverArrowWidth;
+      border-left-width: 0;
+      border-right-color: @popoverArrowColor;
     }
   }
   &.bottom .arrow {
-    top: -@popoverArrowWidth;
     left: 50%;
-    margin-left: -@popoverArrowWidth;
-    border-width: 0 @popoverArrowWidth @popoverArrowWidth;
-    border-bottom-color: @popoverArrowColor;
+    margin-left: -@popoverArrowOuterWidth;
+    border-top-width: 0;
+    border-bottom-color: #999; // IE8 fallback
+    border-bottom-color: @popoverArrowOuterColor;
+    top: -@popoverArrowOuterWidth;
     &:after {
-      border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
-      border-bottom-color: @popoverArrowOuterColor;
-      top: -1px;
-      left: -@popoverArrowOuterWidth;
+      top: 1px;
+      margin-left: -@popoverArrowWidth;
+      border-top-width: 0;
+      border-bottom-color: @popoverArrowColor;
     }
   }
+
   &.left .arrow {
     top: 50%;
-    right: -@popoverArrowWidth;
-    margin-top: -@popoverArrowWidth;
-    border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
-    border-left-color: @popoverArrowColor;
+    right: -@popoverArrowOuterWidth;
+    margin-top: -@popoverArrowOuterWidth;
+    border-right-width: 0;
+    border-left-color: #999; // IE8 fallback
+    border-left-color: @popoverArrowOuterColor;
     &:after {
-      border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
-      border-left-color: @popoverArrowOuterColor;
-      bottom: -@popoverArrowOuterWidth;
-      right: -1px;
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: @popoverArrowColor;
+      bottom: -@popoverArrowWidth;
     }
   }
+
 }