metro4/less/forms-rtl.less

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

input.rtl, input[dir=rtl] {
    direction: rtl;
}

.input {

    &[dir=rtl], &.rtl {
        input {
            order: 3;
            direction: rtl;
        }

        .button-group {
            order: 2;
        }

        .prepend {
            order: 4;
        }

        .append {
            order: 1;
        }

        flex-flow: row-reverse nowrap;
    }
}

.file {
    &[dir=rtl], &.rtl {
        .append {order: 1}
        .prepend {order: 4}
        .caption {
            order: 3;
            text-align: right;
        }

        button {
            order: 2;
            margin-left: 0;
            margin-right: auto;
        }
    }
}

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

.select {
    &[dir=rtl], &.rtl {
        flex-direction: row-reverse;
        .select-input {order: 3;}
        .prepend {order: 4;}
        .append {order: 1;}
        .button-group {order: 2}

        &.dropdown-toggle {
            padding-right: 0!important;
            padding-left: .9rem;
            &::before {
                margin-left: .9rem;
                left: 0;
            }
        }
    }
}