@talentsoft-opensource/hylia/organisms/navbar-profil.less

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

.navbar-profil {
    position: relative;

    height: 4.5rem;

    &__wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        margin: auto;
    }

    &__identity {
        overflow: hidden;

        height: 4.5rem;
    }

    &__background {
        background-color: transparent;
    }

    &__avatar {
        position: absolute;
        top: -185%;
        left: 50%;

        transition: all 0.5s;
        transform: translate(-50%, 0);
    }

    &__flag {
        position: absolute;
        right: 0;
        bottom: 1rem;
    }

    &__identity-item {
        transition: all 0.2s;
        transform: translateY(0%);
    }

    &__actions {
        transition: all 0.5s;
    }

    /*
* When the menu is sticked
*/
    &--sticky {
        position: fixed;
        z-index: 1000;

        .navbar-profil__identity-item {
            transition: all 0.2s;
            transform: translateY(-100%);
        }

        .navbar-profil__wrapper {
            width: @wrapper-xl;
            padding: 1rem 5rem;
        }

        .navbar-profil__avatar {
            transition: all 0.5s;
            transform: translate(-50%, -50%);
        }

        .navbar-profil__actions {
            transition: all 0.5s;
            transform: scale(0.8);
            transform-origin: center right;
        }

        &.navbar-profil__background {
            top: 0;
            left: 0;

            width: 100%;

            transition: all 1s;

            background-color: @stormtrooper;
            box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
        }
    }
}