meri-design-dev/custom/theme/Avatar.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-avatar
  position: relative
  display: inline-block
  padding-right: 12px

.p-avatar .p-avatar-content
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden

.p-avatar .p-avatar-large
  width: 32px
  height: 32px
  border-radius: 16px

.p-avatar .p-avatar-medium
  width: 28px
  height: 28px
  border-radius: 14px

.p-avatar .p-avatar-small
  width: 24px
  height: 24px
  border-radius: 14px

.p-avatar .p-avatar-minimum
  width: 20px
  height: 20px
  border-radius: 10px

.p-avatar .p-avatar-back-blue
  background-color: $blue-500

.p-avatar .p-avatar-back-cyan
  background-color: $cyan-500

.p-avatar .p-avatar-back-turquoise
  background-color: $turquoise-500

.p-avatar .p-avatar-back-green
  background-color: $green-500

.p-avatar .p-avatar-back-yellow
  background-color: $yellow-500

.p-avatar .p-avatar-back-orange
  background-color: $orange-500

.p-avatar .p-avatar-back-red
  background-color: $red-500

.p-avatar .p-avatar-back-carmine
  background-color: $carmine-500

.p-avatar .p-avatar-back-purple
  background-color: $purple-500

.p-avatar .p-avatar-image
  background-color: $grey-200

.p-avatar .p-avatar-image svg
  width: 100%
  height: 100%

.p-avatar .p-avatar-image img
  display: inline-block
  width: 100%
  height: 100%

.p-avatar .p-avatar-logo svg
  width: 100%
  height: 100%

.p-avatar .p-avatar-logo img
  display: inline-block
  width: 100%
  height: 100%

.p-avatar .p-avatar-text
  font-weight: 400
  color: $white
  line-height: 12px
  font-size: 12px

.p-avatar .p-avatar-large-font
  font-size: 14px