tooltip.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /**Variable**/
  2. /*tppltip*/
  3. .vxe-table--tooltip-wrapper {
  4. display: none;
  5. position: absolute;
  6. top: -100%;
  7. left: -100%;
  8. font-size: 12px;
  9. max-width: 400px;
  10. border-radius: $vxe-border-radius;
  11. padding: 8px 12px;
  12. white-space: normal;
  13. word-break: break-word;
  14. box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
  15. color: $vxe-font-color;
  16. font-family: $vxe-font-family;
  17. &:not(.is--enterable) {
  18. pointer-events: none;
  19. }
  20. &.is--visible {
  21. display: block;
  22. }
  23. &.is--arrow {
  24. .vxe-table--tooltip-arrow {
  25. display: block;
  26. }
  27. }
  28. &.is--enterable {
  29. &:after {
  30. content: "";
  31. position: absolute;
  32. left: 0;
  33. width: 100%;
  34. height: 6px;
  35. background-color: transparent;
  36. }
  37. }
  38. .vxe-table--tooltip-content {
  39. white-space: pre-line;
  40. }
  41. .vxe-table--tooltip-arrow {
  42. display: none;
  43. position: absolute;
  44. border-color: transparent;
  45. border-width: 6px;
  46. border-style: solid;
  47. left: 50%;
  48. transform: translateX(-6px);
  49. &:before {
  50. content: "";
  51. position: absolute;
  52. border-color: transparent;
  53. border-width: 5px;
  54. border-style: solid;
  55. left: -5px;
  56. }
  57. }
  58. &.placement--top {
  59. &.is--enterable {
  60. &:after {
  61. bottom: -6px;
  62. }
  63. }
  64. .vxe-table--tooltip-arrow {
  65. bottom: -12px;
  66. &:before {
  67. top: -7px;
  68. }
  69. }
  70. }
  71. &.placement--bottom {
  72. &.is--enterable {
  73. &:after {
  74. top: -6px;
  75. }
  76. }
  77. .vxe-table--tooltip-arrow {
  78. top: -12px;
  79. &:before {
  80. top: -4px;
  81. }
  82. }
  83. }
  84. }
  85. .vxe-table--tooltip-wrapper {
  86. &.theme--light {
  87. background-color: $vxe-tooltip-light-background-color;
  88. border: 1px solid $vxe-input-border-color;
  89. &.placement--top {
  90. .vxe-table--tooltip-arrow {
  91. border-top-color: $vxe-input-border-color;
  92. &:before {
  93. border-top-color: $vxe-tooltip-light-background-color;
  94. }
  95. }
  96. }
  97. &.placement--bottom {
  98. .vxe-table--tooltip-arrow {
  99. border-bottom-color: $vxe-input-border-color;
  100. &:before {
  101. border-bottom-color: $vxe-tooltip-light-background-color;
  102. }
  103. }
  104. }
  105. }
  106. &.theme--dark {
  107. background: $vxe-tooltip-dark-background-color;
  108. color: $vxe-tooltip-dark-color;
  109. &.placement--top {
  110. .vxe-table--tooltip-arrow {
  111. border-top-color: $vxe-tooltip-dark-background-color;
  112. &:before {
  113. border-top-color: $vxe-tooltip-dark-background-color;
  114. }
  115. }
  116. }
  117. &.placement--bottom {
  118. .vxe-table--tooltip-arrow {
  119. border-bottom-color: $vxe-tooltip-dark-background-color;
  120. &:before {
  121. border-bottom-color: $vxe-tooltip-dark-background-color;
  122. }
  123. }
  124. }
  125. }
  126. }
  127. /*valid error*/
  128. .vxe-table--tooltip-wrapper {
  129. &.vxe-table--valid-error {
  130. background-color: $vxe-tooltip-validate-error-background-color;
  131. color: $vxe-tooltip-validate-error-color;
  132. }
  133. }