index.less 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. @import '../../style/themes/index';
  2. @import '../../style/mixins/index';
  3. @avatar-prefix-cls: ~'@{ant-prefix}-avatar';
  4. .@{avatar-prefix-cls} {
  5. .reset-component();
  6. position: relative;
  7. display: inline-block;
  8. overflow: hidden;
  9. color: @avatar-color;
  10. white-space: nowrap;
  11. text-align: center;
  12. vertical-align: middle;
  13. background: @avatar-bg;
  14. &-image {
  15. background: transparent;
  16. }
  17. .@{ant-prefix}-image-img {
  18. display: block;
  19. }
  20. .avatar-size(@avatar-size-base, @avatar-font-size-base);
  21. &-lg {
  22. .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
  23. }
  24. &-sm {
  25. .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
  26. }
  27. &-square {
  28. border-radius: @avatar-border-radius;
  29. }
  30. & > img {
  31. display: block;
  32. width: 100%;
  33. height: 100%;
  34. object-fit: cover;
  35. }
  36. }
  37. .avatar-size(@size, @font-size) {
  38. width: @size;
  39. height: @size;
  40. line-height: @size;
  41. border-radius: 50%;
  42. &-string {
  43. position: absolute;
  44. left: 50%;
  45. transform-origin: 0 center;
  46. }
  47. &.@{avatar-prefix-cls}-icon {
  48. font-size: @font-size;
  49. > .@{iconfont-css-prefix} {
  50. margin: 0;
  51. }
  52. }
  53. }
  54. @import './group';
  55. @import './rtl';