src/scss/bootstrap-4.0.0-alpha.6/scss/_popover.scss

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