amis/packages/amis-ui/scss/components/_avatar.scss
2022-06-01 15:06:00 +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);
}
}
}