ten-design-vue
Version:
ten-vue
56 lines (55 loc) • 911 B
text/less
/* dependencies icon,badge */
@import "../vars.less";
.ten-avatar {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
color: #fff;
background: @primary-color;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 14px;
border-radius: 50%;
white-space: nowrap;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.ten-avatar--large {
width: 56px;
height: 56px;
line-height: 56px;
}
.ten-avatar--medium {
width: 40px;
height: 40px;
line-height: 40px;
}
.ten-avatar--small {
width: 24px;
height: 24px;
line-height: 24px;
}
.ten-avatar--image {
background: transparent;
}
.ten-avatar--icon {
font-size: 24px;
line-height: 1.5;
.ten-icon {
vertical-align: middle;
}
}
.avatar-demo {
.ten-avatar {
margin-right: 20px;
}
}