git.roojs.org Git - roojs1/blob - scss/bootstrap/_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   // 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   .arrow {
  21     position: absolute;
  22     display: block;
  23     width: $popover-arrow-width;
  24     height: $popover-arrow-height;
  25     margin: 0 $popover-border-radius;
  26
  27     &::before,
  28     &::after {
  29       position: absolute;
  30       display: block;
  31       content: "";
  32       border-color: transparent;
  33       border-style: solid;
  34     }
  35   }
  36 }
  37
  38 .bs-popover-top {
  39   margin-bottom: $popover-arrow-height;
  40
  41   > .arrow {
  42     bottom: subtract(-$popover-arrow-height, $popover-border-width);
  43
  44     &::before {
  45       bottom: 0;
  46       border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
  47       border-top-color: $popover-arrow-outer-color;
  48     }
  49
  50     &::after {
  51       bottom: $popover-border-width;
  52       border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
  53       border-top-color: $popover-arrow-color;
  54     }
  55   }
  56 }
  57
  58 .bs-popover-right {
  59   margin-left: $popover-arrow-height;
  60
  61   > .arrow {
  62     left: subtract(-$popover-arrow-height, $popover-border-width);
  63     width: $popover-arrow-height;
  64     height: $popover-arrow-width;
  65     margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
  66
  67     &::before {
  68       left: 0;
  69       border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
  70       border-right-color: $popover-arrow-outer-color;
  71     }
  72
  73     &::after {
  74       left: $popover-border-width;
  75       border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
  76       border-right-color: $popover-arrow-color;
  77     }
  78   }
  79 }
  80
  81 .bs-popover-bottom {
  82   margin-top: $popover-arrow-height;
  83
  84   > .arrow {
  85     top: subtract(-$popover-arrow-height, $popover-border-width);
  86
  87     &::before {
  88       top: 0;
  89       border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
  90       border-bottom-color: $popover-arrow-outer-color;
  91     }
  92
  93     &::after {
  94       top: $popover-border-width;
  95       border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
  96       border-bottom-color: $popover-arrow-color;
  97     }
  98   }
  99
 100   // This will remove the popover-header's border just below the arrow
 101   .popover-header::before {
 102     position: absolute;
 103     top: 0;
 104     left: 50%;
 105     display: block;
 106     width: $popover-arrow-width;
 107     margin-left: -$popover-arrow-width / 2;
 108     content: "";
 109     border-bottom: $popover-border-width solid $popover-header-bg;
 110   }
 111 }
 112
 113 .bs-popover-left {
 114   margin-right: $popover-arrow-height;
 115
 116   > .arrow {
 117     right: subtract(-$popover-arrow-height, $popover-border-width);
 118     width: $popover-arrow-height;
 119     height: $popover-arrow-width;
 120     margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
 121
 122     &::before {
 123       right: 0;
 124       border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
 125       border-left-color: $popover-arrow-outer-color;
 126     }
 127
 128     &::after {
 129       right: $popover-border-width;
 130       border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
 131       border-left-color: $popover-arrow-color;
 132     }
 133   }
 134 }
 135
 136 .bs-popover-auto {
 137   &[x-placement^="top"] {
 138     @extend .bs-popover-top;
 139   }
 140   &[x-placement^="right"] {
 141     @extend .bs-popover-right;
 142   }
 143   &[x-placement^="bottom"] {
 144     @extend .bs-popover-bottom;
 145   }
 146   &[x-placement^="left"] {
 147     @extend .bs-popover-left;
 148   }
 149 }
 150
 151
 152 // Offset the popover to account for the popover arrow
 153 .popover-header {
 154   padding: $popover-header-padding-y $popover-header-padding-x;
 155   margin-bottom: 0; // Reset the default from Reboot
 156   @include font-size($font-size-base);
 157   color: $popover-header-color;
 158   background-color: $popover-header-bg;
 159   border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
 160   @include border-top-radius($popover-inner-border-radius);
 161
 162   &:empty {
 163     display: none;
 164   }
 165 }
 166
 167 .popover-body {
 168   padding: $popover-body-padding-y $popover-body-padding-x;
 169   color: $popover-body-color;
 170 }