mindcoding-template/less/popovers.less

   1 //
   2 // Popovers
   3 // --------------------------------------------------
   4
   5
   6 .popover {
   7   position: absolute;
   8   top: 0;
   9   left: 0;
  10   z-index: @zindex-popover;
  11   display: none;
  12   max-width: @popover-max-width;
  13   padding: 1px;
  14   text-align: left; // Reset given new insertion method
  15   background-color: @popover-bg;
  16   background-clip: padding-box;
  17   border: 1px solid @popover-fallback-border-color;
  18   border: 1px solid @popover-border-color;
  19   border-radius: @border-radius-large;
  20   .box-shadow(0 5px 10px rgba(0,0,0,.2));
  21
  22   // Overrides for proper insertion
  23   white-space: normal;
  24
  25   // Offset the popover to account for the popover arrow
  26   &.top     { margin-top: -10px; }
  27   &.right   { margin-left: 10px; }
  28   &.bottom  { margin-top: 10px; }
  29   &.left    { margin-left: -10px; }
  30 }
  31
  32 .popover-title {
  33   margin: 0; // reset heading margin
  34   padding: 8px 14px;
  35   font-size: @font-size-base;
  36   font-weight: normal;
  37   line-height: 18px;
  38   background-color: @popover-title-bg;
  39   border-bottom: 1px solid darken(@popover-title-bg, 5%);
  40   border-radius: 5px 5px 0 0;
  41 }
  42
  43 .popover-content {
  44   padding: 9px 14px;
  45 }
  46
  47 // Arrows
  48 //
  49 // .arrow is outer, .arrow:after is inner
  50
  51 .popover .arrow {
  52   &,
  53   &:after {
  54     position: absolute;
  55     display: block;
  56     width: 0;
  57     height: 0;
  58     border-color: transparent;
  59     border-style: solid;
  60   }
  61 }
  62 .popover .arrow {
  63   border-width: @popover-arrow-outer-width;
  64 }
  65 .popover .arrow:after {
  66   border-width: @popover-arrow-width;
  67   content: "";
  68 }
  69
  70 .popover {
  71   &.top .arrow {
  72     left: 50%;
  73     margin-left: -@popover-arrow-outer-width;
  74     border-bottom-width: 0;
  75     border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  76     border-top-color: @popover-arrow-outer-color;
  77     bottom: -@popover-arrow-outer-width;
  78     &:after {
  79       content: " ";
  80       bottom: 1px;
  81       margin-left: -@popover-arrow-width;
  82       border-bottom-width: 0;
  83       border-top-color: @popover-arrow-color;
  84     }
  85   }
  86   &.right .arrow {
  87     top: 50%;
  88     left: -@popover-arrow-outer-width;
  89     margin-top: -@popover-arrow-outer-width;
  90     border-left-width: 0;
  91     border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  92     border-right-color: @popover-arrow-outer-color;
  93     &:after {
  94       content: " ";
  95       left: 1px;
  96       bottom: -@popover-arrow-width;
  97       border-left-width: 0;
  98       border-right-color: @popover-arrow-color;
  99     }
 100   }
 101   &.bottom .arrow {
 102     left: 50%;
 103     margin-left: -@popover-arrow-outer-width;
 104     border-top-width: 0;
 105     border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
 106     border-bottom-color: @popover-arrow-outer-color;
 107     top: -@popover-arrow-outer-width;
 108     &:after {
 109       content: " ";
 110       top: 1px;
 111       margin-left: -@popover-arrow-width;
 112       border-top-width: 0;
 113       border-bottom-color: @popover-arrow-color;
 114     }
 115   }
 116
 117   &.left .arrow {
 118     top: 50%;
 119     right: -@popover-arrow-outer-width;
 120     margin-top: -@popover-arrow-outer-width;
 121     border-right-width: 0;
 122     border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
 123     border-left-color: @popover-arrow-outer-color;
 124     &:after {
 125       content: " ";
 126       right: 1px;
 127       border-right-width: 0;
 128       border-left-color: @popover-arrow-color;
 129       bottom: -@popover-arrow-width;
 130     }
 131   }
 132
 133 }