@chief-editor/ui/css/components/Input/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-input-wrapper {
    display: flex;
    flex: auto;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    color: @color-text-grey1;
    width: 100%;
    line-height: 22px;

    .@{prefixCls}-input-prepend,
    .@{prefixCls}-input-append {
        position: relative;
        display: flex;
        align-items: center;
        background-color: @color-neutral2;
        border: 1px solid @color-neutral6;
        box-sizing: border-box;
        border-radius: @border-radius-base;
        white-space: nowrap;
        vertical-align: middle;
        text-align: center;
        height: 100%;
        .transition();

        &:first-child {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:last-child {
            border-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

    }
}


.@{prefixCls}-input-inner__wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    font-size: 12px;
    line-height: 22px;
    border: 1px solid @color-neutral6;
    background: @color-neutral9;
    border-radius: @border-radius-base;
    padding: 0 8px;
    z-index: 1;
    .transition();

    &-hover {
        z-index: 2;
        border-color: @color-neutral2;
    }

    &-focus:not(&-readonly) {
        z-index: 2;
        outline: none;
        .motion-active-border();
    }

    &::placeholder {
        color: @color-text-grey4;
    }

    &-disabled {
        border: 1px solid @color-neutral3;
        cursor: not-allowed;

        &:focus {
            border-color: @color-neutral3;
            box-shadow: none;
            outline: none;
        }

        .@{prefixCls}-input {
            color: @color-text-grey4;
            cursor: not-allowed;

            &::placeholder {
                color: @color-text-grey4;
            }
        }
    }

    &-warning {
        border-color: @color-danger6;
        box-shadow: none;
        z-index: 2;

        &.@{prefixCls}-input-inner__wrapper-focus {
            .motion-stroked-hint(@color-danger6);
        }
    }

    &-add-prefix {
        padding-left: 30px;
    }

    &-add-suffix {
        padding-right: 30px;
    }

    &-add-prepend,
    &-add-append {
        margin-bottom: 0;
        text-align: inherit;

        &:focus {
            z-index: 1;
        }

        &:hover {
            z-index: 1;
        }

        &:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
    }

    &-add-prepend {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &-add-append {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .@{prefixCls}-input-suffix,
    .@{prefixCls}-input-prefix {
        position: absolute;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
        color: @color-text-grey3;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .@{prefixCls}-input-prefix {
        left: 8px;
    }

    .@{prefixCls}-input-suffix {
        right: 8px;
    }

    &-disabled {
        .@{prefixCls}-input-suffix,
        .@{prefixCls}-input-prefix {
            color: @color-text-grey4;
        }
    }
}

.@{prefixCls}-input {
    position: relative;
    white-space: nowrap;
    outline: none;
    -webkit-appearance: none;
    color: @color-text-grey1;
    border: none;
    width: 100%;
    background-color: transparent;

    input {
        background: none;
    }

    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-decoration,
    input[type=search]::-webkit-search-results-button,
    input[type=search]::-webkit-search-results-decoration {
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    input[type=search] {
        -webkit-appearance: none;
        -moz-appearance: none;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    &::-webkit-input-placeholder {
        color: @color-text-grey4;
    }

    &-close-icon {
        color: @color-text-grey3;

        &:hover {
            color: @color-text-grey2;
        }
    }
}

.@{prefixCls}-input-group {
    display: flex;

    .@{prefixCls}-can-input-grouped {
        border-radius: 0;
        margin-left: -1px;
        position: relative;
        z-index: 1;

        &-focus,
        &:hover,
        &:focus {
            z-index: 2;
        }

        .@{prefixCls}-input-inner__wrapper,
        .@{prefixCls}-btn {
            border-radius: 0;
            font-size: 12px;
            line-height: 22px;
        }

        &:first-child {
            margin-left: 0;
            border-top-left-radius: @border-radius-base;
            border-bottom-left-radius: @border-radius-base;

            .@{prefixCls}-input-inner__wrapper,
            .@{prefixCls}-btn {
                border-top-left-radius: @border-radius-base;
                border-bottom-left-radius: @border-radius-base;
            }
        }

        &:last-child {
            border-top-right-radius: @border-radius-base;
            border-bottom-right-radius: @border-radius-base;

            .@{prefixCls}-input-inner__wrapper,
            .@{prefixCls}-btn {
                border-top-right-radius: @border-radius-base;
                border-bottom-right-radius: @border-radius-base;
            }
        }
    }
}