tooltip.less 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. //
  2. // Tooltips
  3. // --------------------------------------------------
  4. // Base class
  5. .tooltip {
  6. position: absolute;
  7. z-index: @zindex-tooltip;
  8. display: block;
  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. .reset-text();
  12. font-size: @font-size-small;
  13. opacity: 0;
  14. &.in {
  15. opacity: @tooltip-opacity;
  16. }
  17. &.top {
  18. padding: @tooltip-arrow-width 0;
  19. margin-top: -3px;
  20. }
  21. &.right {
  22. padding: 0 @tooltip-arrow-width;
  23. margin-left: 3px;
  24. }
  25. &.bottom {
  26. padding: @tooltip-arrow-width 0;
  27. margin-top: 3px;
  28. }
  29. &.left {
  30. padding: 0 @tooltip-arrow-width;
  31. margin-left: -3px;
  32. }
  33. // Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
  34. &.top .tooltip-arrow {
  35. bottom: 0;
  36. left: 50%;
  37. margin-left: -@tooltip-arrow-width;
  38. border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  39. border-top-color: @tooltip-arrow-color;
  40. }
  41. &.top-left .tooltip-arrow {
  42. right: @tooltip-arrow-width;
  43. bottom: 0;
  44. margin-bottom: -@tooltip-arrow-width;
  45. border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  46. border-top-color: @tooltip-arrow-color;
  47. }
  48. &.top-right .tooltip-arrow {
  49. bottom: 0;
  50. left: @tooltip-arrow-width;
  51. margin-bottom: -@tooltip-arrow-width;
  52. border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  53. border-top-color: @tooltip-arrow-color;
  54. }
  55. &.right .tooltip-arrow {
  56. top: 50%;
  57. left: 0;
  58. margin-top: -@tooltip-arrow-width;
  59. border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
  60. border-right-color: @tooltip-arrow-color;
  61. }
  62. &.left .tooltip-arrow {
  63. top: 50%;
  64. right: 0;
  65. margin-top: -@tooltip-arrow-width;
  66. border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
  67. border-left-color: @tooltip-arrow-color;
  68. }
  69. &.bottom .tooltip-arrow {
  70. top: 0;
  71. left: 50%;
  72. margin-left: -@tooltip-arrow-width;
  73. border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  74. border-bottom-color: @tooltip-arrow-color;
  75. }
  76. &.bottom-left .tooltip-arrow {
  77. top: 0;
  78. right: @tooltip-arrow-width;
  79. margin-top: -@tooltip-arrow-width;
  80. border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  81. border-bottom-color: @tooltip-arrow-color;
  82. }
  83. &.bottom-right .tooltip-arrow {
  84. top: 0;
  85. left: @tooltip-arrow-width;
  86. margin-top: -@tooltip-arrow-width;
  87. border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  88. border-bottom-color: @tooltip-arrow-color;
  89. }
  90. }
  91. // Wrapper for the tooltip content
  92. .tooltip-inner {
  93. max-width: @tooltip-max-width;
  94. padding: 3px 8px;
  95. color: @tooltip-color;
  96. background-color: @tooltip-bg;
  97. border-radius: @border-radius-base;
  98. }
  99. // Arrows
  100. .tooltip-arrow {
  101. position: absolute;
  102. width: 0;
  103. height: 0;
  104. border-color: transparent;
  105. border-style: solid;
  106. }
  107. @tooltip-color: @white;
  108. @tooltip-max-width: 200px;
  109. .tooltip-content,
  110. .tooltip-inner {
  111. font-weight: bold;
  112. padding: 5px 10px;
  113. box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  114. overflow-wrap: break-word;
  115. hr {
  116. border: 0px;
  117. margin: 10px auto;
  118. width: 80px;
  119. border-bottom: 2px solid @90;
  120. }
  121. dl {
  122. margin: 0 !important;
  123. }
  124. dd,
  125. dt {
  126. padding: 0 !important;
  127. }
  128. .commit-list {
  129. margin-top: 5px;
  130. display: flex;
  131. flex-direction: column;
  132. }
  133. .time-label {
  134. font-size: 11px;
  135. padding: 5px 0 6px;
  136. margin-left: 0;
  137. margin-right: 0;
  138. border-radius: 3px 3px 0 0;
  139. position: relative;
  140. &:after {
  141. display: block;
  142. content: '';
  143. position: absolute;
  144. bottom: -2px;
  145. left: 55px;
  146. right: 55px;
  147. height: 2px;
  148. background: @90;
  149. }
  150. }
  151. .value-label {
  152. display: flex;
  153. justify-content: space-between;
  154. padding: 3px 0;
  155. }
  156. .legend {
  157. padding: 3px 0;
  158. position: relative;
  159. line-height: 10px;
  160. dt {
  161. margin: 0;
  162. position: absolute;
  163. left: 0;
  164. width: 8px;
  165. margin-right: 5px;
  166. &.active span {
  167. background: @purple;
  168. }
  169. &.environment span {
  170. background: @purple-lightest;
  171. }
  172. &.inactive span {
  173. background: @gray-lightest;
  174. }
  175. span {
  176. width: 9px;
  177. height: 9px;
  178. display: inline-block;
  179. border-radius: 50%;
  180. }
  181. }
  182. dd {
  183. float: none;
  184. text-align: left;
  185. margin: 0 0 0 13px;
  186. small {
  187. color: @white-darker;
  188. display: block;
  189. }
  190. }
  191. }
  192. .flat {
  193. line-height: 12px;
  194. padding: 0 5px !important;
  195. position: relative;
  196. dt {
  197. text-align: left;
  198. margin: 0;
  199. position: absolute;
  200. left: 5px;
  201. width: 75px;
  202. margin-right: 5px;
  203. }
  204. dd {
  205. float: none;
  206. text-align: right;
  207. margin: 0 0 0 80px;
  208. }
  209. }
  210. }