@use "sass:map"; @use "sass:list"; $btnThemeList: ( ( name: "primary", textColor: var(--vxe-ui-font-primary-color), btnColor: #fff, btnLightenColor: var(--vxe-ui-font-primary-lighten-color), btnDarkenColor: var(--vxe-ui-font-primary-darken-color), btnDisabledColor: var(--vxe-ui-font-primary-disabled-color) ), ( name: "success", textColor: var(--vxe-ui-status-success-color), btnColor: #fff, btnLightenColor: var(--vxe-ui-status-success-lighten-color), btnDarkenColor: var(--vxe-ui-status-success-darken-color), btnDisabledColor: var(--vxe-ui-status-success-disabled-color) ), ( name: "info", textColor: var(--vxe-ui-status-info-color), btnColor: #fff, btnLightenColor: var(--vxe-ui-status-info-lighten-color), btnDarkenColor: var(--vxe-ui-status-info-darken-color), btnDisabledColor: var(--vxe-ui-status-info-disabled-color) ), ( name: "warning", textColor: var(--vxe-ui-status-warning-color), btnColor: #fff, btnLightenColor: var(--vxe-ui-status-warning-lighten-color), btnDarkenColor: var(--vxe-ui-status-warning-darken-color), btnDisabledColor: var(--vxe-ui-status-warning-disabled-color) ), ( name: "danger", textColor: var(--vxe-ui-status-danger-color), btnColor: #fff, btnLightenColor: var(--vxe-ui-status-danger-lighten-color), btnDarkenColor: var(--vxe-ui-status-danger-darken-color), btnDisabledColor: var(--vxe-ui-status-danger-disabled-color) ), ( name: "error", textColor: var(--vxe-ui-status-error-color), btnColor: #fff, btnLightenColor: var(--vxe-ui-status-error-lighten-color), btnDarkenColor: var(--vxe-ui-status-error-darken-color), btnDisabledColor: var(--vxe-ui-status-error-disabled-color) ) ); .vxe-text { position: relative; color: var(--vxe-ui-font-color); @for $index from 0 to list.length($btnThemeList) { $item: list.nth($btnThemeList, $index + 1); &.theme--#{map.get($item, name)} { color: map.get($item, textColor); } } &.is--copy { & > .vxe-text--icon { cursor: pointer; &:focus { color: var(--vxe-ui-font-darken-color); } &:hover { color: var(--vxe-ui-font-primary-lighten-color); } &:active { color: var(--vxe-ui-font-primary-darken-color); } } } } .vxe-text--icon { padding: 0 0.1em; user-select: none; } .vxe-text--content { padding: 0 0.1em; } .vxe-text { &.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); } }