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