@talentsoft-opensource/hylia/molecules/navbar.less

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

.navbar {
    position: relative;

    &--sticky {
        position: fixed;
        top: 0;

        transition: all 1s;
        transform: translateY(7.5rem);
    }

    a {
        display: inline-flex;

        width: 100%;

        color: @smart;
    }

    &--horizontal {
        display: flex;

        &--active {
            &:before {
                position: absolute;
                bottom: -0.3rem;
                left: 0;

                display: block;

                width: 100%;
                height: 0.5rem;

                content: "";

                border-radius: 100rem;
                background-color: @smart;
            }
        }

        li {
            position: relative;

            padding: 0 1rem 1rem 1rem;

            cursor: pointer;
            text-decoration: none;

            .font(@condensed_regular, 1.4rem, @smart, 1.8rem);

            a {
                padding: 0 1rem 1rem 1rem;

                text-decoration: none;

                .font(@condensed_regular, 1.4rem, @smart, 1.8rem);
            }
        }
    }

    &--vertical {
        display: flex;
        flex-direction: column;

        border-left: 0.1rem solid @apprentice;

        li {
            position: relative;

            position: relative;

            padding: 0 1rem 1rem 1rem;

            cursor: pointer;
            text-decoration: none;

            .font(@condensed_regular, 1.4rem, @smart, 1.8rem);

            a {
                padding: 1rem 1rem 1rem 2rem;

                transition: all 1s;

.font(@condensed_regular, 1.4rem, @smart, 1.8rem);
            }
        }
    }
}

.navbar-status {
    position: absolute;

    display: block;

    border-radius: 100rem;
    background-color: #8FA9BA;

    &--showActive {
        position: absolute;
        top: 0;
        left: -0.2rem;

        display: block;

        width: 0.5rem;

        border-radius: 100rem;
        background-color: @smart;
    }

    &--horizontal {
        bottom: -0.3rem;

        height: 0.5rem;
    }

    &--vertical {
        top: 0;
        left: -0.2rem;

        overflow: hidden;

        width: 0.5rem;
    }
}