@talentsoft-opensource/hylia/atoms/avatar.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.Hylia-a-avatar {
    position: relative;

    &:before {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;

        content: "";
        transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1);
        transform-origin: center center;
        border-style: solid;
        border-radius: 50%;
    }

    &:hover {
        &:before {
            transform: translateY(-50%) translateX(-50%);
        }
    }

    &--candidate {
        &:before {
            border-color: @harkonnem;
        }
    }

    &--default {
        &:before {
            border-color: @apprentice;
        }
    }

    &--disable {
        &:before {
            border-color: @apprentice;
        }

        &.Hylia-a-avatar--initial {
            .Hylia-a-avatar__initial {
                color: @apprentice;
            }

            .Hylia-a-avatar__picture {
                background-color: lighten(@minion, 7%);
            }

            i {
                color: lighten(@apprentice, 10%);
            }
        }

        .Hylia-a-avatar__picture {
            filter: grayscale(75%);
        }
    }

    &--collaborator {
        &:before {
            border-color: @protoss;
        }
    }

    &--me {
        &:before {
            border-color: @terran;
        }
    }

    &--initial {
        .Hylia-a-avatar__picture {
            background-color: @minion;
            font-family: @condensed_bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .Hylia-a-avatar__initial {
            position: relative;
            z-index: 1;
            color: @stormtrooper;
        }

        i {
            position: absolute;
            color: @apprentice;
        }
    }

    &__picture {
        position: absolute;
        top: 50%;
        left: 50%;

        transform: translateY(-50%) translateX(-50%);

        background-position: center;
        background-size: cover;
    }

    &__wrapper {
        position: absolute;
        top: 50%;
        left: 50%;

        overflow: hidden;

        transform: translateY(-50%) translateX(-50%);

        border-radius: 50%;
    }

    /** 
    * Modifier
    **/
    // XLLarge
    @picture-xlLarge: 13rem;
    @border-xlLarge: 0.4rem;
    @container-xlLarge: 15rem;
    &--xlarge {
        width: @container-xlLarge;
        height: @container-xlLarge;

        &:before {
            width: @picture-xlLarge;
            height: @picture-xlLarge;
            border-width: @border-xlLarge;
            transform: translateY(-50%) translateX(-50%) scale(1.1);
        }

        &:hover {
            .Hylia-a-avatar__wrapper {
                width: @container-xlLarge;
                height: @container-xlLarge;
            }
        }

        .Hylia-a-avatar__wrapper {
            width: @picture-xlLarge;
            height: @picture-xlLarge;
        }

        .Hylia-a-avatar__picture {
            width: @picture-xlLarge + 2rem;
            height: @picture-xlLarge + 2rem;
        }

        // Inital
        &.Hylia-a-avatar--initial {
            .Hylia-a-avatar__initial {
                font-size: 7rem;
            }

            i {
                font-size: 14.5rem;
                top: 2rem;
            }
        }
    }

    // Large
    @picture-large: 6.6rem;
    @border-large: 0.2rem;
    @container-large: 7.6rem;
    &--large {
        width: @container-large;
        height: @container-large;

        &:before {
            width: @picture-large;
            height: @picture-large;
            border-width: @border-large;

            transform: translateY(-50%) translateX(-50%) scale(1.1);
        }

        &:hover {
            .Hylia-a-avatar__wrapper {
                width: @container-large;
                height: @container-large;
            }
        }

        .Hylia-a-avatar__wrapper {
            width: @picture-large;
            height: @picture-large;
        }

        .Hylia-a-avatar__picture {
            width: @picture-large + 2rem;
            height: @picture-large + 2rem;
        }

        // Inital
        &.Hylia-a-avatar--initial {
            .Hylia-a-avatar__initial {
                font-size: 4rem;
            }

            i {
                font-size: 7rem;
                top: 1.8rem;
            }
        }
    }

    // Medium
    @picture-medium: 4.5rem;
    @border-medium: 0.2rem;
    @container-medium: 6rem;
    &--medium {
        width: @container-medium;
        height: @container-medium;

        &:before {
            width: @picture-medium;
            height: @picture-medium;
            border-width: @border-medium;

            transform: translateY(-50%) translateX(-50%) scale(1.1);
        }

        &:hover {
            .Hylia-a-avatar__wrapper {
                width: 5.5rem;
                height: 5.5rem;
            }
        }

        .Hylia-a-avatar__wrapper {
            width: @picture-medium;
            height: @picture-medium;
        }

        .Hylia-a-avatar__picture {
            width: @picture-medium + 1rem;
            height: @picture-medium + 1rem;
        }

        // Inital
        &.Hylia-a-avatar--initial {
            .Hylia-a-avatar__initial {
                font-size: 2.5rem;
            }

            i {
                font-size: 5rem;
                top: 1rem;
            }
        }
    }

    // Small
    @picture-small: 3rem;
    @border-small: 0.2rem;
    @container-small: 4rem;
    &--small {
        width: @container-small;
        height: @container-small;

        &:before {
            width: @picture-small;
            height: @picture-small;
            border-width: @border-small;

            transform: translateY(-50%) translateX(-50%) scale(1.1);
        }

        &:hover {
            .Hylia-a-avatar__wrapper {
                width: @container-small;
                height: @container-small;
            }
        }

        .Hylia-a-avatar__wrapper {
            width: @picture-small;
            height: @picture-small;
        }

        .Hylia-a-avatar__picture {
            width: @picture-small + 1rem;
            height: @picture-small + 1rem;
        }

        // Inital
        &.Hylia-a-avatar--initial {
            .Hylia-a-avatar__initial {
                font-size: 2rem;
            }

            i {
                font-size: 3.6rem;
                top: 0.8rem;
            }
        }
    }

    // XSmall
    @picture-xsmall: 2.4rem;
    @border-xsmall: 0.1rem;
    @container-xsmall: 3rem;
    &--xsmall {
        width: @container-xsmall;
        height: @container-xsmall;

        &:before {
            width: @picture-xsmall;
            height: @picture-xsmall;
            border-width: @border-xsmall;

            transform: translateY(-50%) translateX(-50%) scale(1.1);
        }

        &:hover {
            .Hylia-a-avatar__wrapper {
                width: @container-xsmall;
                height: @container-xsmall;
            }
        }

        .Hylia-a-avatar__wrapper {
            width: @picture-xsmall;
            height: @picture-xsmall;
        }

        .Hylia-a-avatar__picture {
            width: @picture-xsmall + 1rem;
            height: @picture-xsmall + 1rem;
        }

        // Inital
        &.Hylia-a-avatar--initial {
            .Hylia-a-avatar__initial {
                font-size: 1.5rem;
            }

            i {
                font-size: 2.8rem;
                top: 0.8rem;
            }
        }
    }
}