@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-link { text-decoration: none; color: inherit; &:not(.is--disabled) { cursor: pointer; &:hover { color: var(--vxe-ui-font-primary-color); } } &.is--underline { &:not(.is--disabled) { &:hover { .vxe-link--content { text-decoration: underline; } } } } &.is--disabled { color: var(--vxe-ui-font-disabled-color); cursor: no-drop; } @for $index from 0 to list.length($btnThemeList) { $item: list.nth($btnThemeList, $index + 1); &.theme--#{map.get($item, name)} { color: map.get($item, textColor); &:not(.is--disabled) { &:focus { color: map.get($item, btnDarkenColor); } &:hover { color: map.get($item, btnLightenColor); } } &.is--disabled { color: map.get($item, btnDisabledColor); } } } } .vxe-link--icon { padding: 0 0.1em; } .vxe-link--content { padding: 0 0.1em; } .vxe-link { &.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); } }