_popover.scss 4.6 KB

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