@use "sass:map"; @use "sass:list"; $btnThemeList: ( ( name: "primary", textColor: var(--vxe-ui-font-primary-color), btnColor: #fff, ), ( name: "success", textColor: var(--vxe-ui-status-success-color), btnColor: #fff, ), ( name: "info", textColor: var(--vxe-ui-status-info-color), btnColor: #fff, ), ( name: "warning", textColor: var(--vxe-ui-status-warning-color), btnColor: #fff, ), ( name: "danger", textColor: var(--vxe-ui-status-danger-color), btnColor: #fff, ), ( name: "error", textColor: var(--vxe-ui-status-error-color), btnColor: #fff, ) ); .vxe-result { position: relative; color: var(--vxe-ui-font-color); font-family: var(--vxe-ui-font-family); text-align: center; font-size: var(--vxe-ui-font-size-default); padding: 3em 2em; @for $index from 0 to list.length($btnThemeList) { $item: list.nth($btnThemeList, $index + 1); &.theme--#{map.get($item, name)} { .vxe-result--icon-wrapper { color: map.get($item, textColor); } } } } .vxe-result--inner { display: inline-block; } .vxe-result--icon-wrapper { font-size: 4.8em; & > i { display: block; } } .vxe-result--img-wrapper { & > img { height: 5.2em; } } .vxe-result--title-wrapper { font-weight: 700; font-size: 1.74em; padding: 0.25em 0; margin-top: 0.6em; } .vxe-result--content-wrapper { padding: 0.25em 0; color: var(--vxe-ui-font-lighten-color); } .vxe-result--extra-wrapper { padding: 0.25em 0; margin-top: 1em; } .vxe-result { &.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); } }