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

UI Component for chief editor

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

.@{prefixCls}-input-number {
    display: inline-block;
    width: 100%;
    position: relative;
    font-size: 12px;
    box-sizing: border-box;
    border: 1px solid @color-neutral6;
    border-radius: @border-radius-base;
    transition: all .25s;
    padding: 0 8px;

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

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

    .@{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;
    }

    &-input {
        width: 100%;
        border: unset;
        display: inline-block;
        color: @color-text-grey1;
        font-weight: 400;
        line-height: 22px;
        outline: none;
        padding: 0;
        -webkit-appearance: none;
        box-sizing: border-box;
        white-space: nowrap;
        background: none;
    }

    &:focus,
    &:hover:not(.@{prefixCls}-input-number-disabled),
    &-focus {
        border-color: @color-primary6;
    }

    &-disabled {
        &:hover,
        .@{prefixCls}-input-number-input {
            // background: @color-neutral2;
            border-color: @color-neutral4;
            color: @color-text-grey4;
            cursor: not-allowed;
        }
    }

    &:focus,
    &:hover:not(.@{prefixCls}-input-number-disabled),
    &-focus {
        .@{prefixCls}-input-number-controls {
            opacity: 1;
        }
    }

    &-controls {
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        width: 20px;
        border-left: 1px solid @color-neutral4;
        z-index: 10;
        font-size: 0;
        opacity: 0;
        background-color: @color-neutral1;
        border-top-right-radius: @border-radius-base;
        border-bottom-right-radius: @border-radius-base;

        &-hide {
            display: none;
        }

        &-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 50%;
            font-size: 12px;
            text-align: center;
            cursor: pointer;

            &:hover {
                color: @color-primary6;
            }

            &-up {
                border-bottom: 1px solid @color-neutral4;
            }

            &-disabled {
                color: @color-text-grey4;
                cursor: not-allowed;

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