@talentsoft-opensource/hylia/atoms/search-bar.less

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

.Hylia-a-searchBar {
    position: relative;

    &__icon {
        font-size: 1.4rem;

        position: absolute;
        top: 1rem;
        right: 1rem;

        color: @smart;
    }

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

        display: block;

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

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

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

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

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

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

            & + .Hylia-a-searchBar__icon {
                color: @knight;
            }
        }

        // 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;
        }
    }
}