updated css/js libraries

[e-DoKo.git] / css / bootstrap / popovers.less

diff --git a/css/bootstrap/popovers.less b/css/bootstrap/popovers.less
index 2b3f1b059956b337dad93eab3644d835854557a7..696d74c7d59ded00c5d70b85fa0f46648b61246a 100644 (file)
--- a/css/bootstrap/popovers.less
+++ b/css/bootstrap/popovers.less
@@ -7,111 +7,127 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: @zindexPopover;
+  z-index: @zindex-popover;
   display: none;
-  width: 236px;
+  max-width: @popover-max-width;
   padding: 1px;
-  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);
+  text-align: left; // Reset given new insertion method
+  background-color: @popover-bg;
+  background-clip: padding-box;
+  border: 1px solid @popover-fallback-border-color;
+  border: 1px solid @popover-border-color;
+  border-radius: @border-radius-large;
   .box-shadow(0 5px 10px rgba(0,0,0,.2));
 
-  // Offset the popover to account for the popover arrow
-  &.top     { margin-bottom: 10px; }
-  &.right   { margin-left: 10px; }
-  &.bottom  { margin-top: 10px; }
-  &.left    { margin-right: 10px; }
+  // Overrides for proper insertion
+  white-space: normal;
 
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-top: -@popover-arrow-width; }
+  &.right   { margin-left: @popover-arrow-width; }
+  &.bottom  { margin-top: @popover-arrow-width; }
+  &.left    { margin-left: -@popover-arrow-width; }
 }
 
 .popover-title {
   margin: 0; // reset heading margin
   padding: 8px 14px;
-  font-size: 14px;
+  font-size: @font-size-base;
   font-weight: normal;
   line-height: 18px;
-  background-color: @popoverTitleBackground;
-  border-bottom: 1px solid darken(@popoverTitleBackground, 5%);
-  .border-radius(5px 5px 0 0);
+  background-color: @popover-title-bg;
+  border-bottom: 1px solid darken(@popover-title-bg, 5%);
+  border-radius: 5px 5px 0 0;
 }
 
 .popover-content {
   padding: 9px 14px;
-  p, ul, ol {
-    margin-bottom: 0;
-  }
 }
 
 // Arrows
-.popover .arrow,
-.popover .arrow:after {
-  position: absolute;
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover > .arrow {
+  &,
+  &:after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+.popover > .arrow {
+  border-width: @popover-arrow-outer-width;
 }
-.popover .arrow:after {
+.popover > .arrow:after {
+  border-width: @popover-arrow-width;
   content: "";
-  z-index: -1;
 }
 
 .popover {
-  &.top .arrow {
-    bottom: -@popoverArrowWidth;
+  &.top > .arrow {
     left: 50%;
-    margin-left: -@popoverArrowWidth;
-    border-width: @popoverArrowWidth @popoverArrowWidth 0;
-    border-top-color: @popoverArrowColor;
+    margin-left: -@popover-arrow-outer-width;
+    border-bottom-width: 0;
+    border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-top-color: @popover-arrow-outer-color;
+    bottom: -@popover-arrow-outer-width;
     &:after {
-      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
-      border-top-color: @popoverArrowOuterColor;
-      bottom: -1px;
-      left: -@popoverArrowOuterWidth;
+      content: " ";
+      bottom: 1px;
+      margin-left: -@popover-arrow-width;
+      border-bottom-width: 0;
+      border-top-color: @popover-arrow-color;
     }
   }
-  &.right .arrow {
+  &.right > .arrow {
     top: 50%;
-    left: -@popoverArrowWidth;
-    margin-top: -@popoverArrowWidth;
-    border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
-    border-right-color: @popoverArrowColor;
+    left: -@popover-arrow-outer-width;
+    margin-top: -@popover-arrow-outer-width;
+    border-left-width: 0;
+    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-right-color: @popover-arrow-outer-color;
     &:after {
-      border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
-      border-right-color: @popoverArrowOuterColor;
-      bottom: -@popoverArrowOuterWidth;
-      left: -1px;
+      content: " ";
+      left: 1px;
+      bottom: -@popover-arrow-width;
+      border-left-width: 0;
+      border-right-color: @popover-arrow-color;
     }
   }
-  &.bottom .arrow {
-    top: -@popoverArrowWidth;
+  &.bottom > .arrow {
     left: 50%;
-    margin-left: -@popoverArrowWidth;
-    border-width: 0 @popoverArrowWidth @popoverArrowWidth;
-    border-bottom-color: @popoverArrowColor;
+    margin-left: -@popover-arrow-outer-width;
+    border-top-width: 0;
+    border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-bottom-color: @popover-arrow-outer-color;
+    top: -@popover-arrow-outer-width;
     &:after {
-      border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
-      border-bottom-color: @popoverArrowOuterColor;
-      top: -1px;
-      left: -@popoverArrowOuterWidth;
+      content: " ";
+      top: 1px;
+      margin-left: -@popover-arrow-width;
+      border-top-width: 0;
+      border-bottom-color: @popover-arrow-color;
     }
   }
-  &.left .arrow {
+
+  &.left > .arrow {
     top: 50%;
-    right: -@popoverArrowWidth;
-    margin-top: -@popoverArrowWidth;
-    border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
-    border-left-color: @popoverArrowColor;
+    right: -@popover-arrow-outer-width;
+    margin-top: -@popover-arrow-outer-width;
+    border-right-width: 0;
+    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-left-color: @popover-arrow-outer-color;
     &:after {
-      border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
-      border-left-color: @popoverArrowOuterColor;
-      bottom: -@popoverArrowOuterWidth;
-      right: -1px;
+      content: " ";
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: @popover-arrow-color;
+      bottom: -@popover-arrow-width;
     }
   }
+
 }