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

fes-design for PC

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

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

.@{input-inner-prefix-cls} {
    position: relative;
    display: inline-flex;
    flex-direction: row;
    box-sizing: border-box;
    width: 100%;
    height: @data-input-height-base;
    padding: 0 8px; // FEATURE 变量抽离
    font-size: var(--f-font-size-base);
    background-color: var(--f-white);
    border: var(--f-border-base);
    border-radius: var(--f-border-radius-base);
    outline: none;
    transition: all @animation-duration-slow @ease-base-out;
    &:hover {
        border-color: var(--f-primary-color);
    }
    &-focus {
        border-color: var(--f-primary-color);
        box-shadow: 0 0 0 2px var(--f-focus-shadow-color);
    }
    &-disabled {
        .disabled();
    }

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

    &-el {
        .text();
        position: relative;
        box-sizing: border-box;
        width: 100%;
        color: var(--f-text-color);
        font-size: inherit;
        text-align: inherit;
        background-color: transparent;
        border: 0;
        outline: 0;
        caret-color: var(--f-primary-color);
        &::placeholder {
            color: var(--f-text-color-caption);
        }
        &[disabled] {
            .disabled();
        }
        &::-ms-reveal {
            display: none;
        }
        &::-ms-clear {
            display: none;
        }
        &::-o-clear {
            display: none;
        }
    }

    &-prefix,
    &-suffix {
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        color: inherit;
        white-space: nowrap;
        transition: all @animation-duration-slow;
        user-select: none;
        > .@{fes-icon-cls} {
            color: var(--f-text-color-caption);
            vertical-align: middle;
        }
    }
    &-prefix {
        margin-right: 8px;
    }

    &-suffix {
        margin-left: 8px;
        vertical-align: bottom;
    }

    &-icon {
        padding-left: 8px;
        &:first-child {
            padding-left: 0;
        }
    }
}