1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/static/less/popovers.less	Fri Dec 20 22:30:44 2013 +0100
     1.3 @@ -0,0 +1,133 @@
     1.4 +//
     1.5 +// Popovers
     1.6 +// --------------------------------------------------
     1.7 +
     1.8 +
     1.9 +.popover {
    1.10 +  position: absolute;
    1.11 +  top: 0;
    1.12 +  left: 0;
    1.13 +  z-index: @zindex-popover;
    1.14 +  display: none;
    1.15 +  max-width: @popover-max-width;
    1.16 +  padding: 1px;
    1.17 +  text-align: left; // Reset given new insertion method
    1.18 +  background-color: @popover-bg;
    1.19 +  background-clip: padding-box;
    1.20 +  border: 1px solid @popover-fallback-border-color;
    1.21 +  border: 1px solid @popover-border-color;
    1.22 +  border-radius: @border-radius-large;
    1.23 +  .box-shadow(0 5px 10px rgba(0,0,0,.2));
    1.24 +
    1.25 +  // Overrides for proper insertion
    1.26 +  white-space: normal;
    1.27 +
    1.28 +  // Offset the popover to account for the popover arrow
    1.29 +  &.top     { margin-top: -10px; }
    1.30 +  &.right   { margin-left: 10px; }
    1.31 +  &.bottom  { margin-top: 10px; }
    1.32 +  &.left    { margin-left: -10px; }
    1.33 +}
    1.34 +
    1.35 +.popover-title {
    1.36 +  margin: 0; // reset heading margin
    1.37 +  padding: 8px 14px;
    1.38 +  font-size: @font-size-base;
    1.39 +  font-weight: normal;
    1.40 +  line-height: 18px;
    1.41 +  background-color: @popover-title-bg;
    1.42 +  border-bottom: 1px solid darken(@popover-title-bg, 5%);
    1.43 +  border-radius: 5px 5px 0 0;
    1.44 +}
    1.45 +
    1.46 +.popover-content {
    1.47 +  padding: 9px 14px;
    1.48 +}
    1.49 +
    1.50 +// Arrows
    1.51 +//
    1.52 +// .arrow is outer, .arrow:after is inner
    1.53 +
    1.54 +.popover .arrow {
    1.55 +  &,
    1.56 +  &:after {
    1.57 +    position: absolute;
    1.58 +    display: block;
    1.59 +    width: 0;
    1.60 +    height: 0;
    1.61 +    border-color: transparent;
    1.62 +    border-style: solid;
    1.63 +  }
    1.64 +}
    1.65 +.popover .arrow {
    1.66 +  border-width: @popover-arrow-outer-width;
    1.67 +}
    1.68 +.popover .arrow:after {
    1.69 +  border-width: @popover-arrow-width;
    1.70 +  content: "";
    1.71 +}
    1.72 +
    1.73 +.popover {
    1.74 +  &.top .arrow {
    1.75 +    left: 50%;
    1.76 +    margin-left: -@popover-arrow-outer-width;
    1.77 +    border-bottom-width: 0;
    1.78 +    border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
    1.79 +    border-top-color: @popover-arrow-outer-color;
    1.80 +    bottom: -@popover-arrow-outer-width;
    1.81 +    &:after {
    1.82 +      content: " ";
    1.83 +      bottom: 1px;
    1.84 +      margin-left: -@popover-arrow-width;
    1.85 +      border-bottom-width: 0;
    1.86 +      border-top-color: @popover-arrow-color;
    1.87 +    }
    1.88 +  }
    1.89 +  &.right .arrow {
    1.90 +    top: 50%;
    1.91 +    left: -@popover-arrow-outer-width;
    1.92 +    margin-top: -@popover-arrow-outer-width;
    1.93 +    border-left-width: 0;
    1.94 +    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
    1.95 +    border-right-color: @popover-arrow-outer-color;
    1.96 +    &:after {
    1.97 +      content: " ";
    1.98 +      left: 1px;
    1.99 +      bottom: -@popover-arrow-width;
   1.100 +      border-left-width: 0;
   1.101 +      border-right-color: @popover-arrow-color;
   1.102 +    }
   1.103 +  }
   1.104 +  &.bottom .arrow {
   1.105 +    left: 50%;
   1.106 +    margin-left: -@popover-arrow-outer-width;
   1.107 +    border-top-width: 0;
   1.108 +    border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
   1.109 +    border-bottom-color: @popover-arrow-outer-color;
   1.110 +    top: -@popover-arrow-outer-width;
   1.111 +    &:after {
   1.112 +      content: " ";
   1.113 +      top: 1px;
   1.114 +      margin-left: -@popover-arrow-width;
   1.115 +      border-top-width: 0;
   1.116 +      border-bottom-color: @popover-arrow-color;
   1.117 +    }
   1.118 +  }
   1.119 +
   1.120 +  &.left .arrow {
   1.121 +    top: 50%;
   1.122 +    right: -@popover-arrow-outer-width;
   1.123 +    margin-top: -@popover-arrow-outer-width;
   1.124 +    border-right-width: 0;
   1.125 +    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
   1.126 +    border-left-color: @popover-arrow-outer-color;
   1.127 +    &:after {
   1.128 +      content: " ";
   1.129 +      right: 1px;
   1.130 +      border-right-width: 0;
   1.131 +      border-left-color: @popover-arrow-color;
   1.132 +      bottom: -@popover-arrow-width;
   1.133 +    }
   1.134 +  }
   1.135 +
   1.136 +}