@use "sass:map"; @use "sass:list"; $btnThemeList: ( ( name: "primary", borderColor: var(--vxe-ui-font-primary-color), bgColor: var(--vxe-ui-font-primary-tinge-color) ), ( name: "success", borderColor: var(--vxe-ui-status-success-color), bgColor: var(--vxe-ui-status-success-tinge-color) ), ( name: "info", borderColor: var(--vxe-ui-status-info-color), bgColor: var(--vxe-ui-status-info-tinge-color) ), ( name: "warning", borderColor: var(--vxe-ui-status-warning-color), bgColor: var(--vxe-ui-status-warning-tinge-color) ), ( name: "danger", borderColor: var(--vxe-ui-status-danger-color), bgColor: var(--vxe-ui-status-danger-tinge-color) ), ( name: "error", borderColor: var(--vxe-ui-status-error-color), bgColor: var(--vxe-ui-status-error-tinge-color) ) ); .vxe-tip { position: relative; display: flex; flex-direction: row; color: var(--vxe-ui-font-color); margin-bottom: var(--vxe-ui-layout-padding-default); padding: var(--vxe-ui-layout-padding-default) var(--vxe-ui-layout-padding-double); &::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 5px; background-color: var(--vxe-ui-font-color); z-index: 1; } @for $index from 0 to list.length($btnThemeList) { $item: list.nth($btnThemeList, $index + 1); &.theme--#{map.get($item, name)} { background-color: map.get($item, bgColor); &::after { background-color: map.get($item, borderColor); } .vxe-tip--icon { color: map.get($item, borderColor); } } } &.has--title { padding: var(--vxe-ui-layout-padding-default) var(--vxe-ui-layout-padding-double) var(--vxe-ui-layout-padding-double) var(--vxe-ui-layout-padding-double); .vxe-tip--icon { font-size: 1.2em; line-height: 2em; } } } .vxe-tip--icon { flex-shrink: 0; padding-right: var(--vxe-ui-layout-padding-half); } .vxe-tip--body { flex-grow: 1; } .vxe-tip--title { font-size: 1.1em; line-height: 2em; font-weight: 700; } .vxe-tip { 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); } }