.vxe-avatar { position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; border-radius: var(--vxe-ui-base-border-radius); vertical-align: middle; } .vxe-avatar.is--circle { border-radius: 50%; } .vxe-avatar.is--circle .vxe-avatar--img { border-radius: 50%; } .vxe-avatar.is--dot::before { content: ""; position: absolute; top: -0.25em; right: -0.25em; text-align: center; width: 0.5em; height: 0.5em; border-radius: 50%; background-color: #ff4d4f; z-index: 1; } .vxe-avatar.theme--primary { color: #fff; border-color: var(--vxe-ui-font-primary-color); background-color: var(--vxe-ui-font-primary-color); } .vxe-avatar.theme--success { color: #fff; border-color: var(--vxe-ui-status-success-color); background-color: var(--vxe-ui-status-success-color); } .vxe-avatar.theme--info { color: #fff; border-color: var(--vxe-ui-status-info-color); background-color: var(--vxe-ui-status-info-color); } .vxe-avatar.theme--warning { color: #fff; border-color: var(--vxe-ui-status-warning-color); background-color: var(--vxe-ui-status-warning-color); } .vxe-avatar.theme--danger { color: #fff; border-color: var(--vxe-ui-status-danger-color); background-color: var(--vxe-ui-status-danger-color); } .vxe-avatar.theme--error { color: #fff; border-color: var(--vxe-ui-status-error-color); background-color: var(--vxe-ui-status-error-color); } .vxe-avatar--img { width: 100%; height: 100%; border-radius: var(--vxe-ui-base-border-radius); } .vxe-avatar--count { position: absolute; top: -0.8em; right: -0.8em; text-align: center; min-width: 1.5em; height: 1.5em; padding: 0 0.4em; border-radius: 0.8em; font-size: 0.8em; background-color: #ff4d4f; color: #fff; z-index: 1; } .vxe-avatar { width: 36px; height: 36px; } .vxe-avatar.size--medium { width: 32px; height: 32px; font-size: var(--vxe-ui-font-size-medium); } .vxe-avatar.size--small { width: 28px; height: 28px; font-size: var(--vxe-ui-font-size-small); } .vxe-avatar.size--mini { width: 24px; height: 24px; font-size: var(--vxe-ui-font-size-mini); }