resources/scss/bootstrap/_popovers.scss

   1 //
   2 // Popovers
   3 // --------------------------------------------------
   4
   5 .popover {
   6   position: absolute;
   7   top: 0;
   8   left: 0;
   9   z-index: $zindex-popover;
  10   display: none;
  11   max-width: $popover-max-width;
  12   padding: 1px;
  13   // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
  14   // So reset our font and text properties to avoid inheriting weird values.
  15   @include reset-text;
  16   font-size: $font-size-base;
  17
  18   background-color: $popover-bg;
  19   background-clip: padding-box;
  20   border: 1px solid $popover-fallback-border-color;
  21   border: 1px solid $popover-border-color;
  22   border-radius: $border-radius-large;
  23   @include box-shadow(0 5px 10px rgba(0, 0, 0, .2));
  24
  25   // Offset the popover to account for the popover arrow
  26   &.top {
  27         margin-top: -$popover-arrow-width;
  28   }
  29   &.right {
  30         margin-left: $popover-arrow-width;
  31   }
  32   &.bottom {
  33         margin-top: $popover-arrow-width;
  34   }
  35   &.left {
  36         margin-left: -$popover-arrow-width;
  37   }
  38 }
  39
  40 .popover-title {
  41   margin: 0; // reset heading margin
  42   padding: 8px 14px;
  43   font-size: $font-size-base;
  44   background-color: $popover-title-bg;
  45   border-bottom: 1px solid darken($popover-title-bg, 5%);
  46   border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
  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   &,
  59   &:after {
  60         position: absolute;
  61         display: block;
  62         width: 0;
  63         height: 0;
  64         border-color: transparent;
  65         border-style: solid;
  66   }
  67 }
  68
  69 .popover > .arrow {
  70   border-width: $popover-arrow-outer-width;
  71 }
  72
  73 .popover > .arrow:after {
  74   border-width: $popover-arrow-width;
  75   content: "";
  76 }
  77
  78 .popover {
  79   &.top > .arrow {
  80         left: 50%;
  81         margin-left: -$popover-arrow-outer-width;
  82         border-bottom-width: 0;
  83         border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
  84         border-top-color: $popover-arrow-outer-color;
  85         bottom: -$popover-arrow-outer-width;
  86         &:after {
  87           content: " ";
  88           bottom: 1px;
  89           margin-left: -$popover-arrow-width;
  90           border-bottom-width: 0;
  91           border-top-color: $popover-arrow-color;
  92         }
  93   }
  94   &.right > .arrow {
  95         top: 50%;
  96         left: -$popover-arrow-outer-width;
  97         margin-top: -$popover-arrow-outer-width;
  98         border-left-width: 0;
  99         border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
 100         border-right-color: $popover-arrow-outer-color;
 101         &:after {
 102           content: " ";
 103           left: 1px;
 104           bottom: -$popover-arrow-width;
 105           border-left-width: 0;
 106           border-right-color: $popover-arrow-color;
 107         }
 108   }
 109   &.bottom > .arrow {
 110         left: 50%;
 111         margin-left: -$popover-arrow-outer-width;
 112         border-top-width: 0;
 113         border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
 114         border-bottom-color: $popover-arrow-outer-color;
 115         top: -$popover-arrow-outer-width;
 116         &:after {
 117           content: " ";
 118           top: 1px;
 119           margin-left: -$popover-arrow-width;
 120           border-top-width: 0;
 121           border-bottom-color: $popover-arrow-color;
 122         }
 123   }
 124
 125   &.left > .arrow {
 126         top: 50%;
 127         right: -$popover-arrow-outer-width;
 128         margin-top: -$popover-arrow-outer-width;
 129         border-right-width: 0;
 130         border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
 131         border-left-color: $popover-arrow-outer-color;
 132         &:after {
 133           content: " ";
 134           right: 1px;
 135           border-right-width: 0;
 136           border-left-color: $popover-arrow-color;
 137           bottom: -$popover-arrow-width;
 138         }
 139   }
 140 }