bootstrap.less 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. @import "./boostrap/anim.less";
  2. @tooltip-prefix-cls: rc-tooltip;
  3. //
  4. // Tooltips
  5. // --------------------------------------------------
  6. @font-size-base : 12px;
  7. @line-height-base : 1.5;
  8. @border-radius-base : 6px;
  9. @overlay-shadow : 0 0 4px rgba(0, 0, 0, 0.17);
  10. //** Tooltip text color
  11. @tooltip-color: #fff;
  12. //** Tooltip background color
  13. @tooltip-bg: #373737;
  14. @tooltip-opacity: 0.9;
  15. //** Tooltip arrow width
  16. @tooltip-arrow-width: 5px;
  17. //** Tooltip distance with trigger
  18. @tooltip-distance: @tooltip-arrow-width + 4;
  19. //** Tooltip arrow color
  20. @tooltip-arrow-color: @tooltip-bg;
  21. // Base class
  22. .@{tooltip-prefix-cls} {
  23. position: absolute;
  24. z-index: 1070;
  25. display: block;
  26. visibility: visible;
  27. // remove left/top by yiminghe
  28. // left: -9999px;
  29. // top: -9999px;
  30. font-size: @font-size-base;
  31. line-height: @line-height-base;
  32. opacity: @tooltip-opacity;
  33. &-hidden {
  34. display: none;
  35. }
  36. &-placement-top, &-placement-topLeft, &-placement-topRight {
  37. padding: @tooltip-arrow-width 0 @tooltip-distance 0;
  38. }
  39. &-placement-right, &-placement-rightTop, &-placement-rightBottom {
  40. padding: 0 @tooltip-arrow-width 0 @tooltip-distance;
  41. }
  42. &-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
  43. padding: @tooltip-distance 0 @tooltip-arrow-width 0;
  44. }
  45. &-placement-left, &-placement-leftTop, &-placement-leftBottom {
  46. padding: 0 @tooltip-distance 0 @tooltip-arrow-width;
  47. }
  48. }
  49. // Wrapper for the tooltip content
  50. .@{tooltip-prefix-cls}-inner {
  51. padding: 8px 10px;
  52. color: @tooltip-color;
  53. text-align: left;
  54. text-decoration: none;
  55. background-color: @tooltip-bg;
  56. border-radius: @border-radius-base;
  57. box-shadow: @overlay-shadow;
  58. min-height: 34px;
  59. }
  60. // Arrows
  61. .@{tooltip-prefix-cls}-arrow {
  62. position: absolute;
  63. width: 0;
  64. height: 0;
  65. border-color: transparent;
  66. border-style: solid;
  67. }
  68. .@{tooltip-prefix-cls} {
  69. &-placement-top &-arrow,
  70. &-placement-topLeft &-arrow,
  71. &-placement-topRight &-arrow {
  72. bottom: @tooltip-distance - @tooltip-arrow-width;
  73. margin-left: -@tooltip-arrow-width;
  74. border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
  75. border-top-color: @tooltip-arrow-color;
  76. }
  77. &-placement-top &-arrow {
  78. left: 50%;
  79. }
  80. &-placement-topLeft &-arrow {
  81. left: 15%;
  82. }
  83. &-placement-topRight &-arrow {
  84. right: 15%;
  85. }
  86. &-placement-right &-arrow,
  87. &-placement-rightTop &-arrow,
  88. &-placement-rightBottom &-arrow {
  89. left: @tooltip-distance - @tooltip-arrow-width;
  90. margin-top: -@tooltip-arrow-width;
  91. border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
  92. border-right-color: @tooltip-arrow-color;
  93. }
  94. &-placement-right &-arrow {
  95. top: 50%;
  96. }
  97. &-placement-rightTop &-arrow {
  98. top: 15%;
  99. margin-top: 0;
  100. }
  101. &-placement-rightBottom &-arrow {
  102. bottom: 15%;
  103. }
  104. &-placement-left &-arrow,
  105. &-placement-leftTop &-arrow,
  106. &-placement-leftBottom &-arrow {
  107. right: @tooltip-distance - @tooltip-arrow-width;
  108. margin-top: -@tooltip-arrow-width;
  109. border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
  110. border-left-color: @tooltip-arrow-color;
  111. }
  112. &-placement-left &-arrow {
  113. top: 50%;
  114. }
  115. &-placement-leftTop &-arrow {
  116. top: 15%;
  117. margin-top: 0;
  118. }
  119. &-placement-leftBottom &-arrow {
  120. bottom: 15%;
  121. }
  122. &-placement-bottom &-arrow,
  123. &-placement-bottomLeft &-arrow,
  124. &-placement-bottomRight &-arrow {
  125. top: @tooltip-distance - @tooltip-arrow-width;
  126. margin-left: -@tooltip-arrow-width;
  127. border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
  128. border-bottom-color: @tooltip-arrow-color;
  129. }
  130. &-placement-bottom &-arrow {
  131. left: 50%;
  132. }
  133. &-placement-bottomLeft &-arrow {
  134. left: 15%;
  135. }
  136. &-placement-bottomRight &-arrow {
  137. right: 15%;
  138. }
  139. }