index-pure.less 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
  4. @tooltip-arrow-shadow-width: 3px;
  5. @tooltip-arrow-rotate-width: sqrt(@tooltip-arrow-width * @tooltip-arrow-width * 2) +
  6. @tooltip-arrow-shadow-width * 2;
  7. @tooltip-arrow-offset-vertical: 5px; // 8 - 3px
  8. @tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
  9. // Base class
  10. .@{tooltip-prefix-cls} {
  11. .reset-component();
  12. position: absolute;
  13. z-index: @zindex-tooltip;
  14. display: block;
  15. width: max-content;
  16. max-width: @tooltip-max-width;
  17. visibility: visible;
  18. &-hidden {
  19. display: none;
  20. }
  21. &-placement-top,
  22. &-placement-topLeft,
  23. &-placement-topRight {
  24. padding-bottom: @tooltip-distance;
  25. }
  26. &-placement-right,
  27. &-placement-rightTop,
  28. &-placement-rightBottom {
  29. padding-left: @tooltip-distance;
  30. }
  31. &-placement-bottom,
  32. &-placement-bottomLeft,
  33. &-placement-bottomRight {
  34. padding-top: @tooltip-distance;
  35. }
  36. &-placement-left,
  37. &-placement-leftTop,
  38. &-placement-leftBottom {
  39. padding-right: @tooltip-distance;
  40. }
  41. // Wrapper for the tooltip content
  42. &-inner {
  43. min-width: 30px;
  44. min-height: 32px;
  45. padding: 6px 8px;
  46. color: @tooltip-color;
  47. text-align: left;
  48. text-decoration: none;
  49. word-wrap: break-word;
  50. background-color: @tooltip-bg;
  51. border-radius: @border-radius-base;
  52. box-shadow: @box-shadow-base;
  53. }
  54. // Arrows
  55. &-arrow {
  56. position: absolute;
  57. display: block;
  58. width: @tooltip-arrow-rotate-width;
  59. height: @tooltip-arrow-rotate-width;
  60. overflow: hidden;
  61. background: transparent;
  62. pointer-events: none;
  63. &-content {
  64. position: absolute;
  65. top: 0;
  66. right: 0;
  67. bottom: 0;
  68. left: 0;
  69. display: block;
  70. width: @tooltip-arrow-width;
  71. height: @tooltip-arrow-width;
  72. margin: auto;
  73. background-color: @tooltip-bg;
  74. content: '';
  75. pointer-events: auto;
  76. }
  77. }
  78. &-placement-top &-arrow,
  79. &-placement-topLeft &-arrow,
  80. &-placement-topRight &-arrow {
  81. bottom: @tooltip-distance - @tooltip-arrow-rotate-width;
  82. &-content {
  83. box-shadow: @tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
  84. transform: translateY((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
  85. }
  86. }
  87. &-placement-top &-arrow {
  88. left: 50%;
  89. transform: translateX(-50%);
  90. }
  91. &-placement-topLeft &-arrow {
  92. left: @tooltip-arrow-offset-horizontal;
  93. }
  94. &-placement-topRight &-arrow {
  95. right: @tooltip-arrow-offset-horizontal;
  96. }
  97. &-placement-right &-arrow,
  98. &-placement-rightTop &-arrow,
  99. &-placement-rightBottom &-arrow {
  100. left: @tooltip-distance - @tooltip-arrow-rotate-width;
  101. &-content {
  102. box-shadow: -@tooltip-arrow-shadow-width @tooltip-arrow-shadow-width 7px fade(@black, 7%);
  103. transform: translateX((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
  104. }
  105. }
  106. &-placement-right &-arrow {
  107. top: 50%;
  108. transform: translateY(-50%);
  109. }
  110. &-placement-rightTop &-arrow {
  111. top: @tooltip-arrow-offset-vertical;
  112. }
  113. &-placement-rightBottom &-arrow {
  114. bottom: @tooltip-arrow-offset-vertical;
  115. }
  116. &-placement-left &-arrow,
  117. &-placement-leftTop &-arrow,
  118. &-placement-leftBottom &-arrow {
  119. right: @tooltip-distance - @tooltip-arrow-rotate-width;
  120. &-content {
  121. box-shadow: @tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
  122. transform: translateX((-@tooltip-arrow-rotate-width / 2)) rotate(45deg);
  123. }
  124. }
  125. &-placement-left &-arrow {
  126. top: 50%;
  127. transform: translateY(-50%);
  128. }
  129. &-placement-leftTop &-arrow {
  130. top: @tooltip-arrow-offset-vertical;
  131. }
  132. &-placement-leftBottom &-arrow {
  133. bottom: @tooltip-arrow-offset-vertical;
  134. }
  135. &-placement-bottom &-arrow,
  136. &-placement-bottomLeft &-arrow,
  137. &-placement-bottomRight &-arrow {
  138. top: @tooltip-distance - @tooltip-arrow-rotate-width;
  139. &-content {
  140. box-shadow: -@tooltip-arrow-shadow-width -@tooltip-arrow-shadow-width 7px fade(@black, 7%);
  141. transform: translateY((@tooltip-arrow-rotate-width / 2)) rotate(45deg);
  142. }
  143. }
  144. &-placement-bottom &-arrow {
  145. left: 50%;
  146. transform: translateX(-50%);
  147. }
  148. &-placement-bottomLeft &-arrow {
  149. left: @tooltip-arrow-offset-horizontal;
  150. }
  151. &-placement-bottomRight &-arrow {
  152. right: @tooltip-arrow-offset-horizontal;
  153. }
  154. }
  155. .generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
  156. .generator-tooltip-preset-color(@i - 1);
  157. @color: extract(@preset-colors, @i);
  158. @lightColor: '@{color}-6';
  159. .@{tooltip-prefix-cls}-@{color} {
  160. .@{tooltip-prefix-cls}-inner {
  161. background-color: @@lightColor;
  162. }
  163. .@{tooltip-prefix-cls}-arrow {
  164. &-content {
  165. background-color: @@lightColor;
  166. }
  167. }
  168. }
  169. }
  170. .generator-tooltip-preset-color();
  171. @import './rtl';