scss/bootstrap/_popover.scss

0001 .popover {
0002   position: absolute;
0003   top: 0;
0004   left: 0 #{"/* rtl:ignore */"};
0005   z-index: $zindex-popover;
0006   display: block;
0007   max-width: $popover-max-width;
0008   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
0009   // So reset our font and text properties to avoid inheriting weird values.
0010   @include reset-text();
0011   @include font-size($popover-font-size);
0012   // Allow breaking very long words so they don't overflow the popover's bounds
0013   word-wrap: break-word;
0014   background-color: $popover-bg;
0015   background-clip: padding-box;
0016   border: $popover-border-width solid $popover-border-color;
0017   @include border-radius($popover-border-radius);
0018   @include box-shadow($popover-box-shadow);
0019
0020   .popover-arrow {
0021     position: absolute;
0022     display: block;
0023     width: $popover-arrow-width;
0024     height: $popover-arrow-height;
0025     margin: 0 $popover-border-radius;
0026
0027     &::before,
0028     &::after {
0029       position: absolute;
0030       display: block;
0031       content: "";
0032       border-color: transparent;
0033       border-style: solid;
0034     }
0035   }
0036 }
0037
0038 .bs-popover-top {
0039   // Overrule margin set by popper.js
0040   margin-bottom: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
0041
0042   > .popover-arrow {
0043     bottom: subtract(-$popover-arrow-height, $popover-border-width);
0044
0045     &::before {
0046       bottom: 0;
0047       border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
0048       border-top-color: $popover-arrow-outer-color;
0049     }
0050
0051     &::after {
0052       bottom: $popover-border-width;
0053       border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
0054       border-top-color: $popover-arrow-color;
0055     }
0056   }
0057 }
0058
0059 .bs-popover-end {
0060   // Overrule margin set by popper.js
0061   margin-left: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
0062
0063   > .popover-arrow {
0064     left: subtract(-$popover-arrow-height, $popover-border-width);
0065     width: $popover-arrow-height;
0066     height: $popover-arrow-width;
0067     margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
0068
0069     &::before {
0070       left: 0;
0071       border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
0072       border-right-color: $popover-arrow-outer-color;
0073     }
0074
0075     &::after {
0076       left: $popover-border-width;
0077       border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
0078       border-right-color: $popover-arrow-color;
0079     }
0080   }
0081 }
0082
0083 .bs-popover-bottom {
0084   // Overrule margin set by popper.js
0085   margin-top: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
0086
0087   > .popover-arrow {
0088     top: subtract(-$popover-arrow-height, $popover-border-width);
0089
0090     &::before {
0091       top: 0;
0092       border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
0093       border-bottom-color: $popover-arrow-outer-color;
0094     }
0095
0096     &::after {
0097       top: $popover-border-width;
0098       border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
0099       border-bottom-color: $popover-arrow-color;
0100     }
0101   }
0102
0103   // This will remove the popover-header's border just below the arrow
0104   .popover-header::before {
0105     position: absolute;
0106     top: 0;
0107     left: 50%;
0108     display: block;
0109     width: $popover-arrow-width;
0110     margin-left: -$popover-arrow-width / 2;
0111     content: "";
0112     border-bottom: $popover-border-width solid $popover-header-bg;
0113   }
0114 }
0115
0116 .bs-popover-start {
0117   // Overrule margin set by popper.js
0118   margin-right: $popover-arrow-height !important; // stylelint-disable-line declaration-no-important
0119
0120   > .popover-arrow {
0121     right: subtract(-$popover-arrow-height, $popover-border-width);
0122     width: $popover-arrow-height;
0123     height: $popover-arrow-width;
0124     margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
0125
0126     &::before {
0127       right: 0;
0128       border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
0129       border-left-color: $popover-arrow-outer-color;
0130     }
0131
0132     &::after {
0133       right: $popover-border-width;
0134       border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
0135       border-left-color: $popover-arrow-color;
0136     }
0137   }
0138 }
0139
0140 .bs-popover-auto {
0141   &[data-popper-placement^="top"] {
0142     @extend .bs-popover-top;
0143   }
0144   &[data-popper-placement^="right"] {
0145     @extend .bs-popover-end;
0146   }
0147   &[data-popper-placement^="bottom"] {
0148     @extend .bs-popover-bottom;
0149   }
0150   &[data-popper-placement^="left"] {
0151     @extend .bs-popover-start;
0152   }
0153 }
0154
0155 // Offset the popover to account for the popover arrow
0156 .popover-header {
0157   padding: $popover-header-padding-y $popover-header-padding-x;
0158   margin-bottom: 0; // Reset the default from Reboot
0159   @include font-size($font-size-base);
0160   color: $popover-header-color;
0161   background-color: $popover-header-bg;
0162   border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
0163   @include border-top-radius($popover-inner-border-radius);
0164
0165   &:empty {
0166     display: none;
0167   }
0168 }
0169
0170 .popover-body {
0171   padding: $popover-body-padding-y $popover-body-padding-x;
0172   color: $popover-body-color;
0173 }