popovers.less 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. //
  2. // Popovers
  3. // --------------------------------------------------
  4. .popover {
  5. position: absolute;
  6. top: 0;
  7. left: 0;
  8. z-index: @zindex-popover;
  9. display: none;
  10. max-width: @popover-max-width;
  11. padding: 1px;
  12. // Reset font and text properties given new insertion method
  13. font-family: @font-family-base;
  14. font-size: @font-size-base;
  15. font-weight: normal;
  16. line-height: @line-height-base;
  17. text-align: left;
  18. background-color: @popover-bg;
  19. background-clip: padding-box;
  20. border: 1px solid @popover-fallback-border-color;
  21. border: 1px solid @popover-border-color;
  22. border-radius: @border-radius-large;
  23. .box-shadow(0 5px 10px rgba(0,0,0,.2));
  24. // Overrides for proper insertion
  25. white-space: normal;
  26. // Offset the popover to account for the popover arrow
  27. &.top { margin-top: -@popover-arrow-width; }
  28. &.right { margin-left: @popover-arrow-width; }
  29. &.bottom { margin-top: @popover-arrow-width; }
  30. &.left { margin-left: -@popover-arrow-width; }
  31. }
  32. .popover-title {
  33. margin: 0; // reset heading margin
  34. padding: 8px 14px;
  35. font-size: @font-size-base;
  36. background-color: @popover-title-bg;
  37. border-bottom: 1px solid darken(@popover-title-bg, 5%);
  38. border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
  39. }
  40. .popover-content {
  41. padding: 9px 14px;
  42. }
  43. // Arrows
  44. //
  45. // .arrow is outer, .arrow:after is inner
  46. .popover > .arrow {
  47. &,
  48. &:after {
  49. position: absolute;
  50. display: block;
  51. width: 0;
  52. height: 0;
  53. border-color: transparent;
  54. border-style: solid;
  55. }
  56. }
  57. .popover > .arrow {
  58. border-width: @popover-arrow-outer-width;
  59. }
  60. .popover > .arrow:after {
  61. border-width: @popover-arrow-width;
  62. content: "";
  63. }
  64. .popover {
  65. &.top > .arrow {
  66. left: 50%;
  67. margin-left: -@popover-arrow-outer-width;
  68. border-bottom-width: 0;
  69. border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  70. border-top-color: @popover-arrow-outer-color;
  71. bottom: -@popover-arrow-outer-width;
  72. &:after {
  73. content: " ";
  74. bottom: 1px;
  75. margin-left: -@popover-arrow-width;
  76. border-bottom-width: 0;
  77. border-top-color: @popover-arrow-color;
  78. }
  79. }
  80. &.right > .arrow {
  81. top: 50%;
  82. left: -@popover-arrow-outer-width;
  83. margin-top: -@popover-arrow-outer-width;
  84. border-left-width: 0;
  85. border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  86. border-right-color: @popover-arrow-outer-color;
  87. &:after {
  88. content: " ";
  89. left: 1px;
  90. bottom: -@popover-arrow-width;
  91. border-left-width: 0;
  92. border-right-color: @popover-arrow-color;
  93. }
  94. }
  95. &.bottom > .arrow {
  96. left: 50%;
  97. margin-left: -@popover-arrow-outer-width;
  98. border-top-width: 0;
  99. border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  100. border-bottom-color: @popover-arrow-outer-color;
  101. top: -@popover-arrow-outer-width;
  102. &:after {
  103. content: " ";
  104. top: 1px;
  105. margin-left: -@popover-arrow-width;
  106. border-top-width: 0;
  107. border-bottom-color: @popover-arrow-color;
  108. }
  109. }
  110. &.left > .arrow {
  111. top: 50%;
  112. right: -@popover-arrow-outer-width;
  113. margin-top: -@popover-arrow-outer-width;
  114. border-right-width: 0;
  115. border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
  116. border-left-color: @popover-arrow-outer-color;
  117. &:after {
  118. content: " ";
  119. right: 1px;
  120. border-right-width: 0;
  121. border-left-color: @popover-arrow-color;
  122. bottom: -@popover-arrow-width;
  123. }
  124. }
  125. }