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

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

.Hylia-a-textarea {
    &__wrapper {
        position: relative;

        transition: background 0.3s, border 0.3s;

        border: 0.1rem solid @minion;
        border-radius: @radius;
        background: @stormtrooper;

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

        &--focus:not(.Hylia-a-textarea--disabled) {
            border-color: lighten(@terran, 20%) !important;
        }

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

            textarea {
                background-color: @apprentice;
            }
        }

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

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

    &__area {
        font-family: @regular_regular;
        font-size: 1.4rem;
        line-height: 1.6rem;

        display: block;
        padding: 0.5rem 1rem 0 1rem;
        width: 100%;
        margin: 0.3rem 0 1.7rem 0;
        border: none;
        border-right: 0.3rem solid transparent;

        resize: none;
        cursor: text;

        color: @vader;

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

        // Scrollbar pur css for Chrome
        &::-webkit-scrollbar {
            width: 0.5rem;
            height: 0.5rem;
        }

        &::-webkit-scrollbar-track {
            border-radius: 100rem;
            background-color: rgba(51, 51, 51, 0.1);
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 100rem;
            background-color: rgba(51, 51, 51, 0.6);
        }
    }

    &__counter {
        font-family: @regular_regular;
        font-size: 1.2rem;

        position: absolute;
        right: 1.2rem;
        bottom: 0.2rem;

        text-align: right;

        color: @knight;
    }
}

// Resizer Element
.Hylia-a-textarea-resizer {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;

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

    width: 1rem;
    height: 1rem;

    transform: rotate(-45deg);

    &__bar {
        display: inline-block;

        background-color: @knight;

        &--xl {
            width: 0.8rem;
            height: 0.1rem;
        }

        &--sm {
            width: 0.4rem;
            height: 0.1rem;
            margin-top: 0.2rem;
        }
    }
}