text-ellipsis.scss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. @use "sass:map";
  2. @use "sass:list";
  3. $btnThemeList: (
  4. (
  5. name: "primary",
  6. textColor: var(--vxe-ui-font-primary-color),
  7. btnColor: #fff,
  8. btnLightenColor: var(--vxe-ui-font-primary-lighten-color),
  9. btnDarkenColor: var(--vxe-ui-font-primary-darken-color),
  10. btnDisabledColor: var(--vxe-ui-font-primary-disabled-color)
  11. ),
  12. (
  13. name: "success",
  14. textColor: var(--vxe-ui-status-success-color),
  15. btnColor: #fff,
  16. btnLightenColor: var(--vxe-ui-status-success-lighten-color),
  17. btnDarkenColor: var(--vxe-ui-status-success-darken-color),
  18. btnDisabledColor: var(--vxe-ui-status-success-disabled-color)
  19. ),
  20. (
  21. name: "info",
  22. textColor: var(--vxe-ui-status-info-color),
  23. btnColor: #fff,
  24. btnLightenColor: var(--vxe-ui-status-info-lighten-color),
  25. btnDarkenColor: var(--vxe-ui-status-info-darken-color),
  26. btnDisabledColor: var(--vxe-ui-status-info-disabled-color)
  27. ),
  28. (
  29. name: "warning",
  30. textColor: var(--vxe-ui-status-warning-color),
  31. btnColor: #fff,
  32. btnLightenColor: var(--vxe-ui-status-warning-lighten-color),
  33. btnDarkenColor: var(--vxe-ui-status-warning-darken-color),
  34. btnDisabledColor: var(--vxe-ui-status-warning-disabled-color)
  35. ),
  36. (
  37. name: "danger",
  38. textColor: var(--vxe-ui-status-danger-color),
  39. btnColor: #fff,
  40. btnLightenColor: var(--vxe-ui-status-danger-lighten-color),
  41. btnDarkenColor: var(--vxe-ui-status-danger-darken-color),
  42. btnDisabledColor: var(--vxe-ui-status-danger-disabled-color)
  43. ),
  44. (
  45. name: "error",
  46. textColor: var(--vxe-ui-status-error-color),
  47. btnColor: #fff,
  48. btnLightenColor: var(--vxe-ui-status-error-lighten-color),
  49. btnDarkenColor: var(--vxe-ui-status-error-darken-color),
  50. btnDisabledColor: var(--vxe-ui-status-error-disabled-color)
  51. )
  52. );
  53. .vxe-text-ellipsis {
  54. display: block;
  55. overflow: hidden;
  56. white-space: normal;
  57. @for $index from 0 to list.length($btnThemeList) {
  58. $item: list.nth($btnThemeList, $index + 1);
  59. &.theme--#{map.get($item, name)} {
  60. color: map.get($item, textColor);
  61. & > .vxe-text-ellipsis--link {
  62. &:focus {
  63. color: map.get($item, btnDarkenColor);
  64. }
  65. &:hover {
  66. color: map.get($item, btnLightenColor);
  67. }
  68. }
  69. }
  70. }
  71. &.is--underline {
  72. &:hover {
  73. .vxe-text-ellipsis--link {
  74. text-decoration: underline;
  75. }
  76. }
  77. }
  78. &.is--single {
  79. text-overflow: ellipsis;
  80. white-space: nowrap;
  81. }
  82. &.is--multi {
  83. word-wrap: break-word;
  84. word-break: break-all;
  85. }
  86. &.is--copy {
  87. & > .vxe-text-ellipsis--icon {
  88. cursor: pointer;
  89. &:focus {
  90. color: var(--vxe-ui-font-darken-color);
  91. }
  92. &:hover {
  93. color: var(--vxe-ui-font-primary-lighten-color);
  94. }
  95. &:active {
  96. color: var(--vxe-ui-font-primary-darken-color);
  97. }
  98. }
  99. }
  100. .vxe-text-ellipsis--reality {
  101. display: none;
  102. z-index: -1;
  103. pointer-events: none;
  104. }
  105. }
  106. .vxe-text-ellipsis--icon {
  107. padding: 0 0.1em;
  108. user-select: none;
  109. }
  110. .vxe-text-ellipsis--content,
  111. .vxe-text-ellipsis--link {
  112. padding: 0 0.1em;
  113. }
  114. .vxe-text-ellipsis--link {
  115. text-decoration: none;
  116. color: inherit;
  117. }
  118. .vxe-text-ellipsis {
  119. &.size--medium {
  120. font-size: var(--vxe-ui-font-size-medium);
  121. }
  122. &.size--small {
  123. font-size: var(--vxe-ui-font-size-small);
  124. }
  125. &.size--mini {
  126. font-size: var(--vxe-ui-font-size-mini);
  127. }
  128. }