acud/lib/form/style/rtl.less

acg react 组件库

/**
 * @file style for rtl layout
 * @author chenqiang(chenqiang03)
 */

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
@import '../../grid/style/mixin';

@form-prefix-cls: ~'@{acud-prefix}-form';
@form-item-prefix-cls: ~'@{form-prefix-cls}-item';

.@{form-prefix-cls} {
    &-rtl {
        direction: rtl;
    }
}

.@{form-item-prefix-cls} {
    &-label {
        .@{form-prefix-cls}-rtl & {
            text-align: left;
        }

        > label {
            &.@{form-item-prefix-cls}-required::before {
                .@{form-prefix-cls}-rtl & {
                    margin-right: 0;
                    margin-left: 4px;
                }
            }
            &::after {
                .@{form-prefix-cls}-rtl & {
                    margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
                }
            }

            .@{form-item-prefix-cls}-optional {
                .@{form-prefix-cls}-rtl & {
                    margin-right: @space-1;
                    margin-left: 0;
                }
            }
        }
    }

    &-control {
        .@{acud-prefix}-col-rtl &:first-child {
            width: 100%;
        }
    }

    &-has-feedback {
        .@{acud-prefix}-input {
            .@{form-prefix-cls}-rtl & {
                padding-right: @form-item-input-padding-horizontal-base;
                padding-left: 24px;
            }
        }

        .@{acud-prefix}-input-affix-wrapper {
            .@{acud-prefix}-input-suffix {
                .@{form-prefix-cls}-rtl & {
                    padding-right: @form-item-input-padding-horizontal-base;
                    padding-left: 18px;
                }
            }

            .@{acud-prefix}-input {
                .@{form-prefix-cls}-rtl & {
                    padding: 0;
                }
            }
        }

        .@{acud-prefix}-input-search:not(.@{acud-prefix}-input-search-enter-button) {
            .@{acud-prefix}-input-suffix {
                .@{form-prefix-cls}-rtl & {
                    right: auto;
                    left: 28px;
                }
            }
        }

        .@{acud-prefix}-input-number {
            .@{form-prefix-cls}-rtl & {
                padding-left: 18px;
            }
        }

        > .@{acud-prefix}-select .@{acud-prefix}-select-arrow,
        > .@{acud-prefix}-select .@{acud-prefix}-select-clear,
        :not(.@{acud-prefix}-input-group-addon) > .@{acud-prefix}-select .@{acud-prefix}-select-arrow,
        :not(.@{acud-prefix}-input-group-addon) > .@{acud-prefix}-select .@{acud-prefix}-select-clear {
            .@{form-prefix-cls}-rtl & {
                right: auto;
                left: 32px;
            }
        }

        > .@{acud-prefix}-select .@{acud-prefix}-select-selection-selected-value,
        :not(.@{acud-prefix}-input-group-addon) > .@{acud-prefix}-select .@{acud-prefix}-select-selection-selected-value {
            .@{form-prefix-cls}-rtl & {
                padding-right: 0;
                padding-left: 42px;
            }
        }

        .@{acud-prefix}-cascader-picker {
            &-arrow {
                .@{form-prefix-cls}-rtl & {
                    margin-right: 0;
                    margin-left: 19px;
                }
            }
            &-clear {
                .@{form-prefix-cls}-rtl & {
                    right: auto;
                    left: 32px;
                }
            }
        }

        .@{acud-prefix}-picker {
            .@{form-prefix-cls}-rtl & {
                padding-right: @form-item-input-padding-horizontal-base;
                padding-left: @form-item-input-padding-horizontal-base + @form-font-size-base * 1.3;
            }

            &-large {
                .@{form-prefix-cls}-rtl & {
                    padding-right: @form-item-input-padding-horizontal-lg;
                    padding-left: @form-item-input-padding-horizontal-lg + @form-font-size-base * 1.3;
                }
            }

            &-small {
                .@{form-prefix-cls}-rtl & {
                    padding-right: @form-item-input-padding-horizontal-sm;
                    padding-left: @form-item-input-padding-horizontal-sm + @form-font-size-base * 1.3;
                }
            }
        }

        &.@{form-item-prefix-cls} {
            &-has-success,
            &-has-warning,
            &-has-error,
            &-is-validating {
                // ====================== Icon ======================
                .@{form-item-prefix-cls}-children-icon {
                    .@{form-prefix-cls}-rtl & {
                        right: auto;
                        left: 0;
                    }
                }
            }
        }
    }
}

// inline
.@{form-prefix-cls}-inline {
    .@{form-prefix-cls}-item {
        .@{form-prefix-cls}-rtl& {
            margin-right: 0;
            margin-left: 16px;
        }
    }
}

// vertical
.make-vertical-layout-label() {
    .@{form-prefix-cls}-rtl& {
        text-align: right;
    }
}