libs/bootstrap/less/popovers.less

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