amis/scss/components/_avatar.scss
zhou999 2032de2ad7
feat:avatar头像组件 (#3175)
* fix:inputImage 裁剪模式可配置可旋转,但是功能无效

* feat:组件头像avatar

* feat:组件头像avatar完善

* feat:组件头像avatar根据评审完善

* feat:组件头像avatar根据评审完善

* feat:组件头像avatar根据评审完善

Co-authored-by: sqzhou <zhoushengqiang01@baidu.com>
2021-12-28 16:32:11 +08:00

56 lines
886 B
SCSS

@mixin avatar-size($size, $fontSize) {
width: $size;
height: $size;
line-height: $size;
i {
font-size: $fontSize;
}
}
.#{$ns}Avatar {
background: var(--Avatar-bg);
@include avatar-size(var(--Avatar-size-default), var(--Avatar-icon-size-default));
position: relative;
display: inline-block;
overflow: hidden;
flex-shrink: 0;
border-radius: 50%;
text-align: center;
&--lg {
@include avatar-size(var(--Avatar-size-large), var(--Avatar-icon-size-large));
}
&--sm {
@include avatar-size(var(--Avatar-size-small), var(--Avatar-icon-size-small));
}
&--text {
position: absolute;
left: 50%;
transform-origin: 0 center;
}
&--square {
border-radius: 0%;
}
&--rounded {
border-radius: 10%;
}
img {
width: 100%;
height: 100%;
}
&:hover {
img,
i {
transform: scale(1.1);
}
}
}