You are here

popover.css in Open Social 8

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 14px;
  opacity: 0;
}

.tooltip.in {
  opacity: 0.9;
}

.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}

.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}

.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}

.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  text-align: center;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 0;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 0.875rem;
  background-clip: padding-box;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.popover.top {
  margin-top: -10px;
}

.popover.right {
  margin-left: 10px;
}

.popover.bottom {
  margin-top: 10px;
}

.popover.left {
  margin-left: -10px;
}

.popover-title {
  margin: 0;
  padding: 8px 14px;
  font-size: 0.875rem;
}

.popover-content {
  padding: 9px 14px;
}

.popover > .arrow, .popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.popover > .arrow {
  border-width: 11px;
}

.popover > .arrow:after {
  border-width: 10px;
  content: "";
}

.popover.top > .arrow {
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;
  bottom: -11px;
}

.popover.top > .arrow:after {
  content: " ";
  bottom: 1px;
  margin-left: -10px;
  border-bottom-width: 0;
}

.popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;
}

.popover.right > .arrow:after {
  content: " ";
  left: 1px;
  bottom: -10px;
  border-left-width: 0;
}

.popover.bottom > .arrow {
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  top: -11px;
}

.popover.bottom > .arrow:after {
  content: " ";
  top: 1px;
  margin-left: -10px;
  border-top-width: 0;
}

.popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
}

.popover.left > .arrow:after {
  content: " ";
  right: 1px;
  border-right-width: 0;
  bottom: -10px;
}

[data-toggle="popover"].icon-before:before {
  margin-right: 0.3em;
}

File

themes/socialbase/assets/css/popover.css
View source
  1. .tooltip {
  2. position: absolute;
  3. z-index: 1070;
  4. display: block;
  5. font-style: normal;
  6. font-weight: normal;
  7. letter-spacing: normal;
  8. line-break: auto;
  9. line-height: 1.5;
  10. text-align: left;
  11. text-align: start;
  12. text-decoration: none;
  13. text-shadow: none;
  14. text-transform: none;
  15. white-space: normal;
  16. word-break: normal;
  17. word-spacing: normal;
  18. word-wrap: normal;
  19. font-size: 14px;
  20. opacity: 0;
  21. }
  22. .tooltip.in {
  23. opacity: 0.9;
  24. }
  25. .tooltip.top {
  26. margin-top: -3px;
  27. padding: 5px 0;
  28. }
  29. .tooltip.right {
  30. margin-left: 3px;
  31. padding: 0 5px;
  32. }
  33. .tooltip.bottom {
  34. margin-top: 3px;
  35. padding: 5px 0;
  36. }
  37. .tooltip.left {
  38. margin-left: -3px;
  39. padding: 0 5px;
  40. }
  41. .tooltip-inner {
  42. max-width: 200px;
  43. padding: 3px 8px;
  44. text-align: center;
  45. }
  46. .tooltip-arrow {
  47. position: absolute;
  48. width: 0;
  49. height: 0;
  50. border-color: transparent;
  51. border-style: solid;
  52. }
  53. .tooltip.top .tooltip-arrow {
  54. bottom: 0;
  55. left: 50%;
  56. margin-left: -5px;
  57. border-width: 5px 5px 0;
  58. }
  59. .tooltip.right .tooltip-arrow {
  60. top: 50%;
  61. left: 0;
  62. margin-top: -5px;
  63. border-width: 5px 5px 5px 0;
  64. }
  65. .tooltip.left .tooltip-arrow {
  66. top: 50%;
  67. right: 0;
  68. margin-top: -5px;
  69. border-width: 5px 0 5px 5px;
  70. }
  71. .tooltip.bottom .tooltip-arrow {
  72. top: 0;
  73. left: 50%;
  74. margin-left: -5px;
  75. border-width: 0 5px 5px;
  76. }
  77. .popover {
  78. position: absolute;
  79. top: 0;
  80. left: 0;
  81. z-index: 1060;
  82. display: none;
  83. max-width: 276px;
  84. padding: 0;
  85. font-style: normal;
  86. font-weight: normal;
  87. letter-spacing: normal;
  88. line-break: auto;
  89. line-height: 1.5;
  90. text-align: left;
  91. text-align: start;
  92. text-decoration: none;
  93. text-shadow: none;
  94. text-transform: none;
  95. white-space: normal;
  96. word-break: normal;
  97. word-spacing: normal;
  98. word-wrap: normal;
  99. font-size: 0.875rem;
  100. background-clip: padding-box;
  101. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  102. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  103. }
  104. .popover.top {
  105. margin-top: -10px;
  106. }
  107. .popover.right {
  108. margin-left: 10px;
  109. }
  110. .popover.bottom {
  111. margin-top: 10px;
  112. }
  113. .popover.left {
  114. margin-left: -10px;
  115. }
  116. .popover-title {
  117. margin: 0;
  118. padding: 8px 14px;
  119. font-size: 0.875rem;
  120. }
  121. .popover-content {
  122. padding: 9px 14px;
  123. }
  124. .popover > .arrow, .popover > .arrow:after {
  125. position: absolute;
  126. display: block;
  127. width: 0;
  128. height: 0;
  129. border-color: transparent;
  130. border-style: solid;
  131. }
  132. .popover > .arrow {
  133. border-width: 11px;
  134. }
  135. .popover > .arrow:after {
  136. border-width: 10px;
  137. content: "";
  138. }
  139. .popover.top > .arrow {
  140. left: 50%;
  141. margin-left: -11px;
  142. border-bottom-width: 0;
  143. bottom: -11px;
  144. }
  145. .popover.top > .arrow:after {
  146. content: " ";
  147. bottom: 1px;
  148. margin-left: -10px;
  149. border-bottom-width: 0;
  150. }
  151. .popover.right > .arrow {
  152. top: 50%;
  153. left: -11px;
  154. margin-top: -11px;
  155. border-left-width: 0;
  156. }
  157. .popover.right > .arrow:after {
  158. content: " ";
  159. left: 1px;
  160. bottom: -10px;
  161. border-left-width: 0;
  162. }
  163. .popover.bottom > .arrow {
  164. left: 50%;
  165. margin-left: -11px;
  166. border-top-width: 0;
  167. top: -11px;
  168. }
  169. .popover.bottom > .arrow:after {
  170. content: " ";
  171. top: 1px;
  172. margin-left: -10px;
  173. border-top-width: 0;
  174. }
  175. .popover.left > .arrow {
  176. top: 50%;
  177. right: -11px;
  178. margin-top: -11px;
  179. border-right-width: 0;
  180. }
  181. .popover.left > .arrow:after {
  182. content: " ";
  183. right: 1px;
  184. border-right-width: 0;
  185. bottom: -10px;
  186. }
  187. [data-toggle="popover"].icon-before:before {
  188. margin-right: 0.3em;
  189. }