bootstrap.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. .rc-tooltip.rc-tooltip-zoom-appear,
  2. .rc-tooltip.rc-tooltip-zoom-enter {
  3. opacity: 0;
  4. }
  5. .rc-tooltip.rc-tooltip-zoom-enter,
  6. .rc-tooltip.rc-tooltip-zoom-leave {
  7. display: block;
  8. }
  9. .rc-tooltip-zoom-enter,
  10. .rc-tooltip-zoom-appear {
  11. opacity: 0;
  12. animation-duration: 0.3s;
  13. animation-fill-mode: both;
  14. animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  15. animation-play-state: paused;
  16. }
  17. .rc-tooltip-zoom-leave {
  18. animation-duration: 0.3s;
  19. animation-fill-mode: both;
  20. animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
  21. animation-play-state: paused;
  22. }
  23. .rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
  24. .rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
  25. animation-name: rcToolTipZoomIn;
  26. animation-play-state: running;
  27. }
  28. .rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
  29. animation-name: rcToolTipZoomOut;
  30. animation-play-state: running;
  31. }
  32. @keyframes rcToolTipZoomIn {
  33. 0% {
  34. opacity: 0;
  35. transform-origin: 50% 50%;
  36. transform: scale(0, 0);
  37. }
  38. 100% {
  39. opacity: 1;
  40. transform-origin: 50% 50%;
  41. transform: scale(1, 1);
  42. }
  43. }
  44. @keyframes rcToolTipZoomOut {
  45. 0% {
  46. opacity: 1;
  47. transform-origin: 50% 50%;
  48. transform: scale(1, 1);
  49. }
  50. 100% {
  51. opacity: 0;
  52. transform-origin: 50% 50%;
  53. transform: scale(0, 0);
  54. }
  55. }
  56. .rc-tooltip {
  57. position: absolute;
  58. z-index: 1070;
  59. display: block;
  60. visibility: visible;
  61. font-size: 12px;
  62. line-height: 1.5;
  63. opacity: 0.9;
  64. }
  65. .rc-tooltip-hidden {
  66. display: none;
  67. }
  68. .rc-tooltip-placement-top,
  69. .rc-tooltip-placement-topLeft,
  70. .rc-tooltip-placement-topRight {
  71. padding: 5px 0 9px 0;
  72. }
  73. .rc-tooltip-placement-right,
  74. .rc-tooltip-placement-rightTop,
  75. .rc-tooltip-placement-rightBottom {
  76. padding: 0 5px 0 9px;
  77. }
  78. .rc-tooltip-placement-bottom,
  79. .rc-tooltip-placement-bottomLeft,
  80. .rc-tooltip-placement-bottomRight {
  81. padding: 9px 0 5px 0;
  82. }
  83. .rc-tooltip-placement-left,
  84. .rc-tooltip-placement-leftTop,
  85. .rc-tooltip-placement-leftBottom {
  86. padding: 0 9px 0 5px;
  87. }
  88. .rc-tooltip-inner {
  89. padding: 8px 10px;
  90. color: #fff;
  91. text-align: left;
  92. text-decoration: none;
  93. background-color: #373737;
  94. border-radius: 6px;
  95. box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
  96. min-height: 34px;
  97. }
  98. .rc-tooltip-arrow {
  99. position: absolute;
  100. width: 0;
  101. height: 0;
  102. border-color: transparent;
  103. border-style: solid;
  104. }
  105. .rc-tooltip-placement-top .rc-tooltip-arrow,
  106. .rc-tooltip-placement-topLeft .rc-tooltip-arrow,
  107. .rc-tooltip-placement-topRight .rc-tooltip-arrow {
  108. bottom: 4px;
  109. margin-left: -5px;
  110. border-width: 5px 5px 0;
  111. border-top-color: #373737;
  112. }
  113. .rc-tooltip-placement-top .rc-tooltip-arrow {
  114. left: 50%;
  115. }
  116. .rc-tooltip-placement-topLeft .rc-tooltip-arrow {
  117. left: 15%;
  118. }
  119. .rc-tooltip-placement-topRight .rc-tooltip-arrow {
  120. right: 15%;
  121. }
  122. .rc-tooltip-placement-right .rc-tooltip-arrow,
  123. .rc-tooltip-placement-rightTop .rc-tooltip-arrow,
  124. .rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  125. left: 4px;
  126. margin-top: -5px;
  127. border-width: 5px 5px 5px 0;
  128. border-right-color: #373737;
  129. }
  130. .rc-tooltip-placement-right .rc-tooltip-arrow {
  131. top: 50%;
  132. }
  133. .rc-tooltip-placement-rightTop .rc-tooltip-arrow {
  134. top: 15%;
  135. margin-top: 0;
  136. }
  137. .rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
  138. bottom: 15%;
  139. }
  140. .rc-tooltip-placement-left .rc-tooltip-arrow,
  141. .rc-tooltip-placement-leftTop .rc-tooltip-arrow,
  142. .rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  143. right: 4px;
  144. margin-top: -5px;
  145. border-width: 5px 0 5px 5px;
  146. border-left-color: #373737;
  147. }
  148. .rc-tooltip-placement-left .rc-tooltip-arrow {
  149. top: 50%;
  150. }
  151. .rc-tooltip-placement-leftTop .rc-tooltip-arrow {
  152. top: 15%;
  153. margin-top: 0;
  154. }
  155. .rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
  156. bottom: 15%;
  157. }
  158. .rc-tooltip-placement-bottom .rc-tooltip-arrow,
  159. .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
  160. .rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  161. top: 4px;
  162. margin-left: -5px;
  163. border-width: 0 5px 5px;
  164. border-bottom-color: #373737;
  165. }
  166. .rc-tooltip-placement-bottom .rc-tooltip-arrow {
  167. left: 50%;
  168. }
  169. .rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
  170. left: 15%;
  171. }
  172. .rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
  173. right: 15%;
  174. }