metro4/source/components/textarea/textarea.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.textarea, textarea {
    height: auto;
}

textarea {
    line-height: 1.2;
}

.textarea {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: auto;
    padding: 0;

    .fake-textarea {
        opacity: 0;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    textarea {
        appearance: none;
        display: block;
        outline: none;
        padding: .75rem;
        width: 100%;
        min-height: 100px;
        resize: none;
        border: none!important;
        transition: height .1s linear;
        //box-sizing: border-box;

        &:focus {
            box-shadow: none;
        }
    }

    &.no-scroll-vertical textarea{
        overflow-y: hidden!important;
    }

    .input-clear-button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        background-color: transparent;
        &:hover {
            background-color: @light;
            text-shadow: rgba(0,0,0,.25) 0.1em 0.1em 0.2em;
        }
    }

    &:not(.no-scroll-vertical) {
        .input-clear-button {
            right: 18px;
        }
    }

    &.disabled {
        .clear-button {
            display: none;
        }
    }

    .prepend {order: 1}
    .append {order: 3}
    textarea {order: 2;}

    .input-clear-button ~ textarea {
        padding-right: 48px;
    }
}

.textarea {
    &[dir=rtl], &.rtl {

        flex-direction: row-reverse;

        .prepend {order: 3;}
        .append {order: 1;}
        textarea {order: 2;}

        .input-clear-button {
            right: auto;
            left: .25rem;
        }

        .input-clear-button ~ textarea {
            padding-left: 48px;
            padding-right: .75rem;
        }
    }
}