@talentsoft-opensource/hylia/atoms/input-dropdown.less

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

.input-select {
    font-family: @regular_regular;
    font-size: 1.4rem;
    line-height: 1.4rem;
    width: 100%;
    position: relative;

    display: block;
    cursor: pointer;

    height: 3.5rem;

    color: @vader;
    border: 0.1rem solid @minion;
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    border-bottom-left-radius: 0.4rem;
    background: @stormtrooper;

    &-dropdown {
        &__up,
        &__down {
            position: absolute;
            top: 50%;
            left: 50%;
        }

        &__up {
            transition: transform 0.3s 0.1s, opacity 0.3s 0.1s;
            transform: translate(-50%, -80%);

            opacity: 0;
        }

        &__down {
            transition: transform 0.3s 0.1s, opacity 0.3s 0.1s;
            transform: translate(-50%, -50%);

            opacity: 1;
        }
    }

    
    &__placeholder {
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 1rem;
        color: @knight;
    }

    //Display Menu
    &--open {
        & + .input-select__list {
            display: block;
            visibility: visible;
            opacity: 1;
        }

        .input-select__status-bar {
            transform: translateX(0);
        }

        .input-select-dropdown__down {
            transform: translate(-50%, -80%);

            opacity: 0;
        }

        .input-select-dropdown__up {
            transform: translate(-50%, -55%);

            opacity: 1;
        }
    }

    &__wrapper {
        position: relative;

        overflow: hidden;

        height: 100%;
    }

    &__selection {
        font-size: 1.4rem;
        line-height: 1.8rem;

        position: absolute;

        overflow: hidden;

        max-width: 100%;
        padding: 0.8rem 3.6rem 0.8rem 1.1rem;

        white-space: nowrap;
        text-overflow: ellipsis;

        color: @vader;
    }

    &__button {
        font-size: 1.4rem;

        position: absolute;
        top: 0;
        right: 0;
        background-color: transparent;
        display: inline-block;

        width: 3.3rem;
        height: 3.3rem;

        text-align: center;

        color: @smart;
        border-style: none;
        border-radius: 0 0.3rem 0.3rem 0;
    }

    &__list {
        position: absolute;
        z-index: 10;
        max-height: 11rem;
        overflow-y: auto;
        display: block;
        visibility: hidden;

        width: calc(100% + .2rem);
        margin: 0 -0.1rem;
        padding: 0.5rem;

        opacity: 0;
        border-right: 1px solid @apprentice;
        border-bottom: 1px solid @apprentice;
        border-left: 1px solid @apprentice;
        border-radius: 0;
        border-bottom-right-radius: 0.4rem;
        border-bottom-left-radius: 0.4rem;
        background-color: @stormtrooper;
    }

    &__label {
        .font(@regular_regular, 1.4rem, @vader, 1.8rem);
    }

    &__icon {
        padding-right: 0.5rem;
    }

    &__item {
        overflow: hidden;

        max-width: 100%;
        padding: 0.8rem;

        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:hover {
            border-radius: @radius;
            background-color: fade(@terran, 25%);
        }

        &--delete {
            color: @ruban;

            &:hover {
                color: @stormtrooper;
                background-color: @ruban;
            }
        }
    }
}