link.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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-link {
  54. text-decoration: none;
  55. color: inherit;
  56. &:not(.is--disabled) {
  57. cursor: pointer;
  58. &:hover {
  59. color: var(--vxe-ui-font-primary-color);
  60. }
  61. }
  62. &.is--underline {
  63. &:not(.is--disabled) {
  64. &:hover {
  65. .vxe-link--content {
  66. text-decoration: underline;
  67. }
  68. }
  69. }
  70. }
  71. &.is--disabled {
  72. color: var(--vxe-ui-font-disabled-color);
  73. cursor: no-drop;
  74. }
  75. @for $index from 0 to list.length($btnThemeList) {
  76. $item: list.nth($btnThemeList, $index + 1);
  77. &.theme--#{map.get($item, name)} {
  78. color: map.get($item, textColor);
  79. &:not(.is--disabled) {
  80. &:focus {
  81. color: map.get($item, btnDarkenColor);
  82. }
  83. &:hover {
  84. color: map.get($item, btnLightenColor);
  85. }
  86. }
  87. &.is--disabled {
  88. color: map.get($item, btnDisabledColor);
  89. }
  90. }
  91. }
  92. }
  93. .vxe-link--icon {
  94. padding: 0 0.1em;
  95. }
  96. .vxe-link--content {
  97. padding: 0 0.1em;
  98. }
  99. .vxe-link {
  100. &.size--medium {
  101. font-size: var(--vxe-ui-font-size-medium);
  102. }
  103. &.size--small {
  104. font-size: var(--vxe-ui-font-size-small);
  105. }
  106. &.size--mini {
  107. font-size: var(--vxe-ui-font-size-mini);
  108. }
  109. }