[Summary view] [Print] [Text view]

   1  .popover {
   2    position: absolute;
   3    top: 0;
   4    left: 0 #{"/* rtl:ignore */"};
   5    z-index: $zindex-popover;
   6    display: block;
   7    max-width: $popover-max-width;
   8    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   9    // So reset our font and text properties to avoid inheriting weird values.
  10    @include reset-text();
  11    @include font-size($popover-font-size);
  12    // Allow breaking very long words so they don't overflow the popover's bounds
  13    word-wrap: break-word;
  14    background-color: $popover-bg;
  15    background-clip: padding-box;
  16    border: $popover-border-width solid $popover-border-color;
  17    @include border-radius($popover-border-radius);
  18    @include box-shadow($popover-box-shadow);
  19  
  20    .popover-arrow {
  21      position: absolute;
  22      display: block;
  23      width: $popover-arrow-width;
  24      height: $popover-arrow-height;
  25  
  26      &::before,
  27      &::after {
  28        position: absolute;
  29        display: block;
  30        content: "";
  31        border-color: transparent;
  32        border-style: solid;
  33      }
  34    }
  35  }
  36  
  37  .bs-popover-top {
  38    > .popover-arrow {
  39      bottom: subtract(-$popover-arrow-height, $popover-border-width);
  40  
  41      &::before {
  42        bottom: 0;
  43        border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
  44        border-top-color: $popover-arrow-outer-color;
  45      }
  46  
  47      &::after {
  48        bottom: $popover-border-width;
  49        border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
  50        border-top-color: $popover-arrow-color;
  51      }
  52    }
  53  }
  54  
  55  .bs-popover-end {
  56    > .popover-arrow {
  57      left: subtract(-$popover-arrow-height, $popover-border-width);
  58      width: $popover-arrow-height;
  59      height: $popover-arrow-width;
  60  
  61      &::before {
  62        left: 0;
  63        border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
  64        border-right-color: $popover-arrow-outer-color;
  65      }
  66  
  67      &::after {
  68        left: $popover-border-width;
  69        border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
  70        border-right-color: $popover-arrow-color;
  71      }
  72    }
  73  }
  74  
  75  .bs-popover-bottom {
  76    > .popover-arrow {
  77      top: subtract(-$popover-arrow-height, $popover-border-width);
  78  
  79      &::before {
  80        top: 0;
  81        border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
  82        border-bottom-color: $popover-arrow-outer-color;
  83      }
  84  
  85      &::after {
  86        top: $popover-border-width;
  87        border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
  88        border-bottom-color: $popover-arrow-color;
  89      }
  90    }
  91  
  92    // This will remove the popover-header's border just below the arrow
  93    .popover-header::before {
  94      position: absolute;
  95      top: 0;
  96      left: 50%;
  97      display: block;
  98      width: $popover-arrow-width;
  99      margin-left: -$popover-arrow-width * .5;
 100      content: "";
 101      border-bottom: $popover-border-width solid $popover-header-bg;
 102    }
 103  }
 104  
 105  .bs-popover-start {
 106    > .popover-arrow {
 107      right: subtract(-$popover-arrow-height, $popover-border-width);
 108      width: $popover-arrow-height;
 109      height: $popover-arrow-width;
 110  
 111      &::before {
 112        right: 0;
 113        border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
 114        border-left-color: $popover-arrow-outer-color;
 115      }
 116  
 117      &::after {
 118        right: $popover-border-width;
 119        border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
 120        border-left-color: $popover-arrow-color;
 121      }
 122    }
 123  }
 124  
 125  .bs-popover-auto {
 126    &[data-popper-placement^="top"] {
 127      @extend .bs-popover-top;
 128    }
 129    &[data-popper-placement^="right"] {
 130      @extend .bs-popover-end;
 131    }
 132    &[data-popper-placement^="bottom"] {
 133      @extend .bs-popover-bottom;
 134    }
 135    &[data-popper-placement^="left"] {
 136      @extend .bs-popover-start;
 137    }
 138  }
 139  
 140  // Offset the popover to account for the popover arrow
 141  .popover-header {
 142    padding: $popover-header-padding-y $popover-header-padding-x;
 143    margin-bottom: 0; // Reset the default from Reboot
 144    @include font-size($font-size-base);
 145    color: $popover-header-color;
 146    background-color: $popover-header-bg;
 147    border-bottom: $popover-border-width solid $popover-border-color;
 148    @include border-top-radius($popover-inner-border-radius);
 149  
 150    &:empty {
 151      display: none;
 152    }
 153  }
 154  
 155  .popover-body {
 156    padding: $popover-body-padding-y $popover-body-padding-x;
 157    color: $popover-body-color;
 158  }