result.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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-result {
  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. padding: 3em 2em;
  42. @for $index from 0 to list.length($btnThemeList) {
  43. $item: list.nth($btnThemeList, $index + 1);
  44. &.theme--#{map.get($item, name)} {
  45. .vxe-result--icon-wrapper {
  46. color: map.get($item, textColor);
  47. }
  48. }
  49. }
  50. }
  51. .vxe-result--inner {
  52. display: inline-block;
  53. }
  54. .vxe-result--icon-wrapper {
  55. font-size: 4.8em;
  56. & > i {
  57. display: block;
  58. }
  59. }
  60. .vxe-result--img-wrapper {
  61. & > img {
  62. height: 5.2em;
  63. }
  64. }
  65. .vxe-result--title-wrapper {
  66. font-weight: 700;
  67. font-size: 1.74em;
  68. padding: 0.25em 0;
  69. margin-top: 0.6em;
  70. }
  71. .vxe-result--content-wrapper {
  72. padding: 0.25em 0;
  73. color: var(--vxe-ui-font-lighten-color);
  74. }
  75. .vxe-result--extra-wrapper {
  76. padding: 0.25em 0;
  77. margin-top: 1em;
  78. }
  79. .vxe-result {
  80. &.size--medium {
  81. font-size: var(--vxe-ui-font-size-medium);
  82. }
  83. &.size--small {
  84. font-size: var(--vxe-ui-font-size-small);
  85. }
  86. &.size--mini {
  87. font-size: var(--vxe-ui-font-size-mini);
  88. }
  89. }