You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

141 lines
3.4 KiB

  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: 1px;
  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. background-color: $popover-bg;
  14. background-clip: padding-box;
  15. border: $popover-border-width solid $popover-border-color;
  16. @include border-radius($border-radius-lg);
  17. @include box-shadow(0 5px 10px rgba(0,0,0,.2));
  18. // Popover directions
  19. &.popover-top,
  20. &.bs-tether-element-attached-bottom {
  21. margin-top: -$popover-arrow-width;
  22. .popover-arrow {
  23. bottom: -$popover-arrow-outer-width;
  24. left: 50%;
  25. margin-left: -$popover-arrow-outer-width;
  26. border-top-color: $popover-arrow-outer-color;
  27. border-bottom-width: 0;
  28. &::after {
  29. bottom: 1px;
  30. margin-left: -$popover-arrow-width;
  31. content: "";
  32. border-top-color: $popover-arrow-color;
  33. border-bottom-width: 0;
  34. }
  35. }
  36. }
  37. &.popover-right,
  38. &.bs-tether-element-attached-left {
  39. margin-left: $popover-arrow-width;
  40. .popover-arrow {
  41. top: 50%;
  42. left: -$popover-arrow-outer-width;
  43. margin-top: -$popover-arrow-outer-width;
  44. border-right-color: $popover-arrow-outer-color;
  45. border-left-width: 0;
  46. &::after {
  47. bottom: -$popover-arrow-width;
  48. left: 1px;
  49. content: "";
  50. border-right-color: $popover-arrow-color;
  51. border-left-width: 0;
  52. }
  53. }
  54. }
  55. &.popover-bottom,
  56. &.bs-tether-element-attached-top {
  57. margin-top: $popover-arrow-width;
  58. .popover-arrow {
  59. top: -$popover-arrow-outer-width;
  60. left: 50%;
  61. margin-left: -$popover-arrow-outer-width;
  62. border-top-width: 0;
  63. border-bottom-color: $popover-arrow-outer-color;
  64. &::after {
  65. top: 1px;
  66. margin-left: -$popover-arrow-width;
  67. content: "";
  68. border-top-width: 0;
  69. border-bottom-color: $popover-arrow-color;
  70. }
  71. }
  72. }
  73. &.popover-left,
  74. &.bs-tether-element-attached-right {
  75. margin-left: -$popover-arrow-width;
  76. .popover-arrow {
  77. top: 50%;
  78. right: -$popover-arrow-outer-width;
  79. margin-top: -$popover-arrow-outer-width;
  80. border-right-width: 0;
  81. border-left-color: $popover-arrow-outer-color;
  82. &::after {
  83. right: 1px;
  84. bottom: -$popover-arrow-width;
  85. content: "";
  86. border-right-width: 0;
  87. border-left-color: $popover-arrow-color;
  88. }
  89. }
  90. }
  91. }
  92. // Offset the popover to account for the popover arrow
  93. .popover-title {
  94. padding: 8px 14px;
  95. margin: 0; // reset heading margin
  96. font-size: $font-size-base;
  97. background-color: $popover-title-bg;
  98. border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
  99. @include border-radius(($border-radius-lg - 1) ($border-radius-lg - 1) 0 0);
  100. }
  101. .popover-content {
  102. padding: 9px 14px;
  103. }
  104. // Arrows
  105. //
  106. // .popover-arrow is outer, .popover-arrow::after is inner
  107. .popover-arrow {
  108. &,
  109. &::after {
  110. position: absolute;
  111. display: block;
  112. width: 0;
  113. height: 0;
  114. border-color: transparent;
  115. border-style: solid;
  116. }
  117. }
  118. .popover-arrow {
  119. border-width: $popover-arrow-outer-width;
  120. }
  121. .popover-arrow::after {
  122. content: "";
  123. border-width: $popover-arrow-width;
  124. }