@fesjs/fes-design/es/input/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';
@import './inputInner.less';


@input-prefix-cls: ~'@{cls-prefix}-input';
@textarea-prefix-cls: ~'@{cls-prefix}-textarea';

@input-height-base: @data-input-height-base;

@scrollbar-width: 6px;
@scrollbar-bg: var(--f-scrollbar-bg-color);
@scrollbar-active-bg: var(--f-scrollbar-active-color);

.@{input-prefix-cls} {
    .default();
    .text();
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    vertical-align: middle;

    &-prepend {
        .group();
        .group-prepend();
        border-right: 1px solid transparent;
        .border-right-pure();
     
    }
    &-append {
        .group();
        .group-append();
        border-left: 1px solid transparent;
        .border-left-pure();
    }

    &-group {
        display: inline-table;
        width: 100%;
        line-height: normal;
        border-collapse: separate;
        border-spacing: 0;

        > .@{input-prefix-cls}-inner {
            // 提高中间输入框层级，避免边框和阴影被遮挡
            position: relative;
            z-index: 1;
            vertical-align: middle;
        }

        &&-prepend {
            .@{input-prefix-cls}-inner {
                .border-left-pure();
            }
        }
        &&-append {
            .@{input-prefix-cls}-inner {
                .border-right-pure();
            }
        }
    }

    &-count {
        color: var(--f-text-color-secondary);
        font-size: @font-size-caption;
    }
}

.@{textarea-prefix-cls} {
    .default();
    .text();
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: var(--f-font-size-base);
    vertical-align: bottom;
    background-color: var(--f-white);

    &-inner {
        .text();
        .textarea-scrollbar(@scrollbar-width; @scrollbar-bg; @scrollbar-active-bg);

        display: block;
        box-sizing: border-box;
        width: 100%;
        min-height: @input-height-base;
        padding: 5px 8px;
        color: var(--f-text-color);
        font-size: inherit;
        line-height: 1.5;
        background-color: transparent;
        border: var(--f-border-base);
        border-radius: var(--f-border-radius-base);
        outline: none;
        resize: vertical;
        caret-color: var(--f-primary-color);
    
        &:hover,
        &:focus {
            border-color: var(--f-primary-color);
        }
        &:focus {
            box-shadow: 0 0 0 2px var(--f-focus-shadow-color);
        }

        &::placeholder {
            color: var(--f-text-color-caption);
        }

        &[disabled] {
            resize: none;
            .disabled();
        }
    }

    &.is-error {
        .@{textarea-prefix-cls}-inner:not([disabled]) {
            border-color: var(--f-danger-color);
            &:focus {
                box-shadow: 0 0 0 2px var(--f-focus-danger-shadow-color);
            }
        }
    }

    &-count {
        position: absolute;
        right: 8px;
        color: var(--f-text-color);
        font-size: @font-size-caption;
        text-align: right;
        background-color: #fff;
        // 不使用 top 或 bottom，而是让 word-count 根据 <template> 中的声明顺序，自动跟随在 textarea 下方，再使用 transform 调整位置至 textarea 内部
        transform: translateY(calc(0px - 100% - 2px)); 
        opacity: 0.4;
        pointer-events: none;
    }
}