ac42a07291a224b9b6a23cf5b34a9fd3654df0c29b59d2d85485fbf19b9858633be74429eb2f446030874ae0cae80b4f0ac2df1a4e6a74e9c3a9ff309b911d 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. @import "mixins/mixins";
  2. @import "common/var";
  3. @include b(avatar) {
  4. display: inline-block;
  5. box-sizing: border-box;
  6. text-align: center;
  7. overflow: hidden;
  8. color: $--avatar-font-color;
  9. background: $--avatar-background-color;
  10. width: $--avatar-large-size;
  11. height: $--avatar-large-size;
  12. line-height: $--avatar-large-size;
  13. font-size: $--avatar-text-font-size;
  14. >img {
  15. display: block;
  16. height: 100%;
  17. vertical-align: middle;
  18. }
  19. @include m(circle) {
  20. border-radius: 50%;
  21. }
  22. @include m(square) {
  23. border-radius: $--avatar-border-radius;
  24. }
  25. @include m(icon) {
  26. font-size: $--avatar-icon-font-size;
  27. }
  28. @include m(large) {
  29. width: $--avatar-large-size;
  30. height: $--avatar-large-size;
  31. line-height: $--avatar-large-size;
  32. }
  33. @include m(medium) {
  34. width: $--avatar-medium-size;
  35. height: $--avatar-medium-size;
  36. line-height: $--avatar-medium-size;
  37. }
  38. @include m(small) {
  39. width: $--avatar-small-size;
  40. height: $--avatar-small-size;
  41. line-height: $--avatar-small-size;
  42. }
  43. }