yyzone/src/assets/styles/components/avatar.less

yyzone vue components and utils

@prefixAvatarCls: ~'@{yy-css-prefix}avatar';

.@{prefixAvatarCls} {
    &-wrapper {
        display: inline-block;
    }

    &-inner {
        padding-bottom: 100%;
        border-radius: 4px;
        position: relative;
        mask-image: url('../../images/radius.svg');
        mask-size: contain;
    }

    .fullscreen(absolute);
    border-radius: 4px;
    overflow: hidden;
    color: #fff;
    text-align: center;

    &-path {
        .square(100%);

        img {
            .square(100%);
        }
    }

    &-name {
        i {
            font-style: normal;
            vertical-align: middle;
            display: inline-block;
            max-width: 90%;
            .ellipsis()
        }

        &:after {
            content: '';
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
    }
}