element-plus/lib/theme-chalk/el-avatar.css

A Component Library for Vue3.0

:root{--el-transition-duration:0.3s;--el-transition-duration-fast:0.2s;--el-ease-in-out-bezier-function:cubic-bezier(0.645, 0.045, 0.355, 1);--el-fast-bezier-transition:cubic-bezier(0.23, 1, 0.32, 1);--el-all-transition:all var(--el-transition-duration) var(--el-ease-in-out-bezier-function);--el-fade-transition:opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-md-fade-transition:transform var(--el-transition-duration) var(--el-fast-bezier-transition),opacity var(--el-transition-duration) var(--el-fast-bezier-transition);--el-fade-linear-transition:opacity var(--el-transition-duration-fast) linear;--el-border-transition-base:border-color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-color-transition-base:color var(--el-transition-duration-fast) var(--el-ease-in-out-bezier-function);--el-avatar-font-color:#fff;--el-avatar-background-color:#c0c4cc;--el-avatar-text-font-size:14px;--el-avatar-icon-font-size:18px;--el-avatar-border-radius:var(--el-border-radius-base);--el-avatar-large-size:40px;--el-avatar-medium-size:36px;--el-avatar-small-size:28px}.el-avatar{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--el-avatar-font-color);background:var(--el-avatar-background-color);width:var(--el-avatar-large-size);height:var(--el-avatar-large-size);line-height:var(--el-avatar-large-size);font-size:var(--el-avatar-text-font-size)}.el-avatar>img{display:block;height:100%;vertical-align:middle}.el-avatar--circle{border-radius:50%}.el-avatar--square{border-radius:var(--el-avatar-border-radius)}.el-avatar--icon{font-size:var(--el-avatar-icon-font-size)}.el-avatar--small{width:var(--el-avatar-small-size);height:var(--el-avatar-small-size);line:var(--el-avatar-small-size)}.el-avatar--medium{width:var(--el-avatar-medium-size);height:var(--el-avatar-medium-size);line:var(--el-avatar-medium-size)}.el-avatar--large{width:var(--el-avatar-large-size);height:var(--el-avatar-large-size);line:var(--el-avatar-large-size)}