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

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

.input-text {
    width: 100%;
    height: 3.5rem;
    padding: 0.8rem;

    transition: border 0.3s 1s;

    border: 0.1rem solid @apprentice;
    border-top-left-radius: @radius;
    border-top-right-radius: @radius;
    border-bottom-right-radius: @radius;
    border-bottom-left-radius: @radius;

    .font(@condensed_regular, 1.4rem, @vader, 1.4rem);

    &--warning {
        border-color: @apprentice;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

        & + .input-text__status-bar {
            transform: translateX(0);

            background-color: @zerg;
        }
    }

    &--icon {
        padding-left: 3.2rem;
    }

    &__icon {
        font-size: 1.4rem;

        position: absolute;
        top: 50%;
        left: 0.8rem;

        transform: translateY(-50%);

        &--right {
            line-height: 3.5rem;

            top: 0;
            right: 0;
            left: auto;

            width: 3.5rem;
            height: 3.5rem;

            transform: translateY(0);
            text-align: center;

            color: @smart;
            border-top-right-radius: @radius;
            border-bottom-right-radius: @radius;
            background-color: @apprentice;

            & + input {
                padding: 0.8rem;
                padding-right: 4rem;
            }
        }
    }

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

    &:focus {
        transition: border 0.3s;

        border-color: @apprentice;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

        & + .input-text__status-bar {
            transform: translateX(0);
        }
    }

    &__box {
        position: relative;
    }

    &__status-bar {
        position: absolute;
        bottom: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 0.1rem;

        transition: transform 0.2s 0.2s;
        transform: translateX(-100%);

        background-color: @terran;
    }

    &__wrapper {
        position: relative;

        display: block;
        overflow: hidden;
    }
}