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

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

// Reset behavior Number Input
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* Remove controls from Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Re-applies the controls on :hover and :focus */
input[type="number"]:hover, input[type="number"]:focus {
    -moz-appearance: textfield;
}

input::-ms-clear {
    display: none;
}

input {
    // Placeholder
    &::-webkit-input-placeholder {
        font-family: @regular_regular;
        font-size: 1.4rem;

        color: @knight;
    }
    &:-ms-input-placeholder {
        font-family: @regular_regular;
        font-size: 1.4rem;

        color: @knight;
    }
    &::-moz-placeholder {
        font-family: @regular_regular;
        font-size: 1.4rem;

        color: @knight;
    }
    &:-moz-placeholder {
        font-family: @regular_regular;
        font-size: 1.4rem;

        color: @knight;
    }
}

.Hylia-a-input {
    display: flex;

    & > * {
        margin: 0;
    }

    & > *:not(:last-child) > *, & > *:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    & > *:not(:first-child) > *, & > *:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &__icon {
        font-size: 1.4rem;
        line-height: 3.5rem;

        position: absolute;
        top: 0;
        right: 0;

        width: 3.5rem;
        height: 3.5rem;

        text-align: center;

        color: @smart;

        &--action {
            cursor: pointer;
            transition: color 0.3s;

            color: @apprentice;

            &:hover {
                color: @smart;
            }
        }
    }

    &__wrapper {
        position: relative;
        width: 100%;

        &--search {
            input {
                padding: 1rem 1rem 1rem 3.5rem;
            }
        }

        &--error {
            input {
                border-color: @ruban;
            }
        }

        &--warning {
            input {
                border-color: @saien;
            }
        }

        &--numeric {
            input {
                padding-right: 3.5rem;
            }
        }

        &--icon-left {
            input {
                padding-left: 3.5rem;
            }
        }

        &--icon-right {
            input {
                padding-right: 3.5rem;
            }
        }

        &--disabled {
            .Hylia-a-input__control {
                i {
                    color: @knight;
                }
            }
        }

        & > i {
            font-size: 1.6rem;
            line-height: 3.5rem;

            position: absolute;
            top: 0;

            display: inline-block;

            width: 3.5rem;
            height: 3.5rem;

            text-align: center;

            color: @smart;

            &:first-child {
                left: 0;
            }

            &:last-child {
                right: 0;
            }
        }
    }

    &__input {
        font-family: @regular_regular;
        font-size: 1.4rem;

        display: block;

        width: 100%;
        height: 3.5rem;
        padding: 1rem;

        cursor: text;
        transition: background-color 0.3s, border 0.3s;

        color: @vader;
        border: 0.1rem solid @minion;
        border-radius: @radius;

        &:hover:not(:disabled) {
            border-color: darken(@minion, 10%);
        }

        &:focus:not(:disabled) {
            border-color: lighten(@terran, 20%);
        }

        &:disabled {
            border-color: @apprentice;
            background-color: @apprentice;
        }
    }

    &__search {
        font-size: 1.4rem;

        position: absolute;
        top: 1rem;
        left: 1rem;

        color: @apprentice;
    }

    &__control {
        position: absolute;
        top: 0;
        right: 0;

        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        width: 3rem;
        height: 3.5rem;

        i {
            font-size: 1.6rem;
            line-height: 0.8rem;

            cursor: pointer;

            color: @smart;
        }
    }
}