zmp-ui/avatar/styles/index.less

Zalo Mini App framework

@import './variables.less';
@import './mixins.less';

.@{avatar-prefix-cls}{
	width: @avatar-size;
	height: @avatar-size;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background: @gr60-gr40-diagonal;
	vertical-align: middle;
	text-align: center;
	color: @avatar-text-color;
	.avatar-text-size();	
	font-weight: 500;
	&-online{
		position: absolute;
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;   
		width: @avatar-online-dot-size;
    height: @avatar-online-dot-size;
    content: '';
    background-color: @light-avatar-status-online;
    border: solid 2px @light-avatar-status-background;
    border-radius: 100%;
		.badge-position(@avatar-online-dot-size, @avatar-size);
	}
	&-image{
		width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
    overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
  &-inner{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: inherit;
  }
	&-blocked{
		position: absolute;
		box-sizing: content-box;
		-moz-box-sizing: content-box;
		-webkit-box-sizing: content-box;
		width: @avatar-blocked-size;
		height: @avatar-blocked-size;
		border: solid 2px @light-avatar-status-background;
		border-radius: 100%;
		.badge-position(@avatar-blocked-size, @avatar-size);
		svg{
			position: absolute;
			left: 0;
			top: 0;
		}
		path.zaui-avatar-block-icon-bg{
			fill: @light-avatar-status-background;
		}
	}
	&-story,&-story-seen{
		z-index: 1;
    cursor: pointer;
		.@{avatar-prefix-cls}-image,.@{avatar-prefix-cls}-inner{
			width: calc(@avatar-size - calc(@avatar-story-space * 4));
      height: calc(@avatar-size - calc(@avatar-story-space * 4));
			left: calc(@avatar-story-space * 2);
      top: calc(@avatar-story-space * 2);
		}
    &::before {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
      position: absolute;
      content: '';
      border-radius: 100%;
      z-index: -1;
      width: calc(@avatar-size - calc(@avatar-story-space * 2));
      height: calc(@avatar-size - calc(@avatar-story-space * 2));
      border: solid @avatar-story-space  @light-avatar-border;
      background: transparent;
      top: @avatar-story-space;
      left: @avatar-story-space;
    }
    &::after {
      position: absolute;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;      
			content: '';
      border-radius: 100%;
      z-index: -2;
      top: 0;
      left: 0;
      width:  @avatar-size;
      height: @avatar-size;
      background: @light-avatar-story-contour-color;
    }
	}
	&-story-seen{
		&::after{
			background: @light-avatar-story-seen;
		}
	}
  &-text-small{
    .avatar-text-size('small');
  }
  &-text-xsmall{
    .avatar-text-size('xsmall');
  }
  &-text-medium{
    .avatar-text-size('medium');
  }
  &-text-large{
    .avatar-text-size('large');
  }
  &-color-01{
    background: @avatar-background-gradient-01;
  }
  &-color-02{
    background: @avatar-background-gradient-02;
  }
  &-color-03{
    background: @avatar-background-gradient-03;
  }
  &-color-04{
    background: @avatar-background-gradient-04;
  }
}


.@{avatar-group-prefix-cls} {
	@max-width: calc( calc(@avatar-group-item-size * 2) + calc(@avatar-border-width * 4 ));
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: @max-width;
  width: max-content;
  justify-content: center;
  align-items: center;
  padding: @avatar-border-width;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
  &.@{avatar-group-prefix-cls}-horizontal {
    flex-wrap: nowrap;
    max-width: unset;
    width: max-content;
    .@{avatar-prefix-cls}-group-item {
      &:not(:first-child) {
        margin-left: -8px;
      }
      &:nth-child(1) {
        z-index: 1;
        margin-top: 0;
      }
      &:nth-child(2) {
        z-index: 2;
        margin-top: 0;
      }
      &:nth-child(3),&:nth-child(3):last-child {
        z-index: 3;
        margin-top: 0;
      }
      &:nth-child(4) {
        z-index: 4;
        margin-top: 0;
      }
    }
  }
  .@{avatar-prefix-cls}-group-item {
		border: solid @avatar-border-width @light-avatar-border;
    .@{avatar-prefix-cls}-inner {
      border: solid @avatar-border-width @light-avatar-border;
    }
    flex-wrap: wrap;
    &:nth-child(1) {
      z-index: 2;
    }
    &:nth-child(2) {
      z-index: 3;
      margin-left: calc(@avatar-border-width * -2);
    }
    &:nth-child(3) {
      z-index: 1;
      margin-top: calc(@avatar-border-width * -2);
			&:last-child{
				margin-top: calc(@avatar-border-width * -4);	
			}
    }
    &:nth-child(4) {
      z-index: 4;
      margin-left: calc(@avatar-border-width * -2);
      margin-top: calc(@avatar-border-width * -2);
    }
  }
}


.if-dark-theme({
	.@{avatar-prefix-cls}{
    &-online{
      background-color: @dark-avatar-status-online;
      border: solid 2px @dark-avatar-status-background;

    }
    &-blocked{
      border: solid 2px @dark-avatar-status-background;
      path.zaui-avatar-block-icon-bg{
        fill: @dark-avatar-status-background;
      }
    }
    &-story,&-story-seen{
      &::before {
        border: solid @avatar-story-space  @dark-avatar-border;
      }
      &::after {
        background: @dark-avatar-story-contour-color;
      }
    }
    &-story-seen{
      &::after{
        background: @dark-avatar-story-seen;
      }
    } 
  }
  .@{avatar-group-prefix-cls} {
    .@{avatar-prefix-cls}-group-item {
      .@{avatar-prefix-cls}-inner {
        border: solid @avatar-border-width @dark-avatar-border;
      }
    }
  }
});