@use "sass:map"; @use "sass:list"; $rateThemeList: ( ( name: "primary", color: var(--vxe-ui-font-primary-color), ), ( name: "success", color: var(--vxe-ui-status-success-color), ), ( name: "info", color: var(--vxe-ui-status-info-color), ), ( name: "warning", color: var(--vxe-ui-status-warning-color), ), ( name: "danger", color: var(--vxe-ui-status-danger-color), ), ( name: "error", color: var(--vxe-ui-status-error-color), ) ); .vxe-rate { display: inline-flex; flex-direction: row; color: var(--vxe-ui-font-color); @for $index from 0 to list.length($rateThemeList) { $item: list.nth($rateThemeList, $index + 1); &.theme--#{map.get($item, name)} { .vxe-rte--item { color: map.get($item, color); } } } &.is--disabled { .vxe-rte--item { cursor: no-drop; } } &.is--readonly { .vxe-rte--item { cursor: default; } } } .vxe-rte--item { margin-right: 0.25em; font-size: 1.2em; cursor: pointer; &:last-child { margin: 0; } &.is--checked { color: var(--vxe-ui-rate-item-color); } } .vxe-rate { font-size: var(--vxe-ui-font-size-default); &.size--medium { font-size: var(--vxe-ui-font-size-medium); } &.size--small { font-size: var(--vxe-ui-font-size-small); } &.size--mini { font-size: var(--vxe-ui-font-size-mini); } }