text.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  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 {
  54. position: relative;
  55. color: var(--vxe-ui-font-color);
  56. @for $index from 0 to list.length($btnThemeList) {
  57. $item: list.nth($btnThemeList, $index + 1);
  58. &.theme--#{map.get($item, name)} {
  59. color: map.get($item, textColor);
  60. }
  61. }
  62. }
  63. .vxe-text--copy-icon {
  64. cursor: pointer;
  65. &:focus {
  66. color: var(--vxe-ui-font-darken-color);
  67. }
  68. &:hover {
  69. color: var(--vxe-ui-font-primary-lighten-color);
  70. }
  71. &:active {
  72. color: var(--vxe-ui-font-primary-darken-color);
  73. }
  74. @for $index from 0 to list.length($btnThemeList) {
  75. $item: list.nth($btnThemeList, $index + 1);
  76. &.theme--#{map.get($item, name)} {
  77. color: map.get($item, textColor);
  78. &:focus {
  79. color: map.get($item, btnDarkenColor);
  80. }
  81. &:hover {
  82. color: map.get($item, btnLightenColor);
  83. }
  84. &:active {
  85. color: map.get($item, btnDarkenColor);
  86. }
  87. }
  88. }
  89. }
  90. .vxe-text--loading,
  91. .vxe-text--prefix-icon,
  92. .vxe-text--suffix-icon,
  93. .vxe-text--copy-icon {
  94. user-select: none;
  95. }
  96. .vxe-text {
  97. & > span {
  98. padding-right: 0.1em;
  99. &:last-child {
  100. padding-right: 0;
  101. }
  102. }
  103. }
  104. .vxe-text {
  105. &.size--medium {
  106. font-size: var(--vxe-ui-font-size-medium);
  107. }
  108. &.size--small {
  109. font-size: var(--vxe-ui-font-size-small);
  110. }
  111. &.size--mini {
  112. font-size: var(--vxe-ui-font-size-mini);
  113. }
  114. }