rate.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. @use "sass:map";
  2. @use "sass:list";
  3. $rateThemeList: (
  4. (
  5. name: "primary",
  6. color: var(--vxe-ui-font-primary-color),
  7. ),
  8. (
  9. name: "success",
  10. color: var(--vxe-ui-status-success-color),
  11. ),
  12. (
  13. name: "info",
  14. color: var(--vxe-ui-status-info-color),
  15. ),
  16. (
  17. name: "warning",
  18. color: var(--vxe-ui-status-warning-color),
  19. ),
  20. (
  21. name: "danger",
  22. color: var(--vxe-ui-status-danger-color),
  23. ),
  24. (
  25. name: "error",
  26. color: var(--vxe-ui-status-error-color),
  27. )
  28. );
  29. .vxe-rate {
  30. display: inline-flex;
  31. flex-direction: row;
  32. color: var(--vxe-ui-font-color);
  33. @for $index from 0 to list.length($rateThemeList) {
  34. $item: list.nth($rateThemeList, $index + 1);
  35. &.theme--#{map.get($item, name)} {
  36. .vxe-rte--item {
  37. color: map.get($item, color);
  38. }
  39. }
  40. }
  41. &.is--disabled {
  42. .vxe-rte--item {
  43. cursor: no-drop;
  44. }
  45. }
  46. &.is--readonly {
  47. .vxe-rte--item {
  48. cursor: default;
  49. }
  50. }
  51. }
  52. .vxe-rte--item {
  53. margin-right: 0.25em;
  54. font-size: 1.2em;
  55. cursor: pointer;
  56. &:last-child {
  57. margin: 0;
  58. }
  59. &.is--checked {
  60. color: var(--vxe-ui-rate-item-color);
  61. }
  62. }
  63. .vxe-rate {
  64. font-size: var(--vxe-ui-font-size-default);
  65. &.size--medium {
  66. font-size: var(--vxe-ui-font-size-medium);
  67. }
  68. &.size--small {
  69. font-size: var(--vxe-ui-font-size-small);
  70. }
  71. &.size--mini {
  72. font-size: var(--vxe-ui-font-size-mini);
  73. }
  74. }