empty.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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. ),
  9. (
  10. name: "success",
  11. textColor: var(--vxe-ui-status-success-color),
  12. btnColor: #fff,
  13. ),
  14. (
  15. name: "info",
  16. textColor: var(--vxe-ui-status-info-color),
  17. btnColor: #fff,
  18. ),
  19. (
  20. name: "warning",
  21. textColor: var(--vxe-ui-status-warning-color),
  22. btnColor: #fff,
  23. ),
  24. (
  25. name: "danger",
  26. textColor: var(--vxe-ui-status-danger-color),
  27. btnColor: #fff,
  28. ),
  29. (
  30. name: "error",
  31. textColor: var(--vxe-ui-status-error-color),
  32. btnColor: #fff,
  33. )
  34. );
  35. .vxe-empty {
  36. position: relative;
  37. color: var(--vxe-ui-font-color);
  38. font-family: var(--vxe-ui-font-family);
  39. text-align: center;
  40. font-size: var(--vxe-ui-font-size-default);
  41. @for $index from 0 to list.length($btnThemeList) {
  42. $item: list.nth($btnThemeList, $index + 1);
  43. &.theme--#{map.get($item, name)} {
  44. .vxe-empty--icon-wrapper {
  45. color: map.get($item, textColor);
  46. }
  47. }
  48. }
  49. }
  50. .vxe-empty--inner {
  51. display: inline-block;
  52. }
  53. .vxe-empty--icon-wrapper {
  54. font-size: 4.8em;
  55. & > i {
  56. display: block;
  57. }
  58. }
  59. .vxe-empty--img-wrapper {
  60. & > img {
  61. height: 5.2em;
  62. }
  63. }
  64. .vxe-empty--content-wrapper {
  65. padding-top: 0.5em 0;
  66. }
  67. .vxe-empty {
  68. &.size--medium {
  69. font-size: var(--vxe-ui-font-size-medium);
  70. }
  71. &.size--small {
  72. font-size: var(--vxe-ui-font-size-small);
  73. }
  74. &.size--mini {
  75. font-size: var(--vxe-ui-font-size-mini);
  76. }
  77. }