@chief-editor/ui/css/components/Util/RimlessInput.less

UI Component for chief editor

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

@rimlessInputAlignMap: {
    @alignList: left, right, center, justify;
    .rimless-input-align() when (@align = left) {
        margin-right: auto
    };
    .rimless-input-align() when (@align = right) {
        margin-left: auto
    };
    .rimless-input-align() when (@align = center) {
        margin-left: auto;
        margin-right: auto
    };
    .rimless-input-align() when (@align = justify) {
        width: 100%
    }

    .for-rimless-input-align-style(@alignList, @i: 1) when (@i <= @len) {
        @align: extract(@alignList, @i);

        &.@{prefixCls}-rimless-input-align-@{align} {
            .@{prefixCls}-rimless-input-inner {
                .rimless-input-align();
            }
        }

        .for-rimless-input-align-style(@alignList, (@i + 1));
    }
}

.@{prefixCls}-rimless-input {
    display: inline-flex;
    width: 100%;

    &-inner {
        position: relative;
        display: inline;
        max-width: 100%;
        padding-right: 22px;
        cursor: default;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: @color-text-grey1;

        &:hover {
            color: @color-primary6;

            .@{prefixCls}-rimless-input-num,
            .@{prefixCls}-rimless-input-icon {
                color: @color-primary6;
            }
        }

        &:active {
            color: @color-primary7;

            .@{prefixCls}-rimless-input-num,
            .@{prefixCls}-rimless-input-icon {
                color: @color-primary7;
            }
        }
    }

    @rimlessInputAlignMap();
    .for-rimless-input-align-style(@rimlessInputAlignMap[@alignList]);

    &-active {
        .@{prefixCls}-rimless-input-inner,
        .@{prefixCls}-rimless-input-num,
        .@{prefixCls}-rimless-input-icon {
            color: @color-primary6;

            &:active {
                color: @color-primary7;
            }
        }
    }

    &-show-num {
        .@{prefixCls}-rimless-input-inner {
            padding-right: 40px;
        }
    }


    &-icon {
        color: @color-text-grey3;
        font-size: 14px;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    &-num {
        position: absolute;
        right: 14px;
        padding: 0 4px;
        color: @color-text-grey3;
    }

    &-disabled,
    &-readonly {
        .@{prefixCls}-rimless-input-inner {
            color: @color-text-grey4;
            cursor: not-allowed;

            &:hover,
            &:active {
                color: @color-text-grey4;

                .@{prefixCls}-rimless-input-num,
                .@{prefixCls}-rimless-input-icon {
                    color: @color-text-grey4;
                }
            }
        }

        .@{prefixCls}-rimless-input-num,
        .@{prefixCls}-rimless-input-icon {
            color: @color-text-grey4;
        }
    }
}

.for-input-font-size-style(rimless-input, @sizeList);