gaf-mobile/app/styles/modules/profile-img.less

GAF mobile Web site

@import (reference) '../themes/variables';

/*
    Profile Img Module

    Note:
    1. The modifier &--other is used as a ellipsis, currently used in My projects page
*/

/* Private Var */
@profile-img-size: 58px;
@profile-img-size--small: 24px;
@profile-img-size--xsmall: 16px;

@profile-img-border: 3px;
@profile-img-border--small: 2px;

/* Private Mixin */
.profile-img-sizeConstructor(@dimension, @border-radius) {
    width: @dimension;
    height: @dimension;
    border-radius: @border-radius;
}

.profile-img {
    display: inline-block;
    .profile-img-sizeConstructor(
        @profile-img-size,
        @profile-img-border
    );

    &-icon {
        fill: @quaternary-color-xxlight;
    }

    &--small {
        .profile-img-sizeConstructor(
            @profile-img-size--small,
            @profile-img-border--small
        );
    }

    &--xsmall {
        .profile-img-sizeConstructor(
            @profile-img-size--xsmall,
            @profile-img-border--small
        );
        border: 0.5px solid @border-color--dark;
    }

    &--other {
        padding: 0 2px;
        border: 1px solid @border-color--dark;
        background-color: @body-bg;
    }
}