yyzone/src/assets/styles/components/input-number.less

yyzone vue components and utils

@prefixInputNumberCls: ~"@{yy-css-prefix}input-number";

.handler-disabled() {
    opacity: 0.72;
    color: #ccc !important;
    .cursor(not-allowed);
}

.@{prefixInputNumberCls} {
    @radius-wrap: 0 @yy-btn-border-radius @yy-btn-border-radius 0;
    position: relative;
    display: inline-block;
    width: 80px;

    &-handler-wrap {
        width: 22px;
        border-left: 1px solid @yy-border-color-base;
        border-radius: @radius-wrap;
        background: #fff;
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        opacity: 0;
        z-index: 10;
        transition: opacity @yy-transition-time @yy-ease-in-out;
    }

    &:hover &-handler-wrap {
        opacity: 1;
    }

    &-handler-up {
        cursor: pointer;

        &-inner {
            top: 1px;
        }
    }

    &-handler-down {
        border-top: 1px solid @yy-border-color-base;
        top: -1px;
        cursor: pointer;
    }

    &-handler {
        display: block;
        width: 100%;
        height: 50%;
        line-height: 0;
        text-align: center;
        overflow: hidden;
        color: @yy-text-primary-color;
        position: relative;

        &:hover &-up-inner,
        &:hover &-down-inner {
            color: @yy-text-primary-color;
        }
    }

    &-handler-up-inner,
    &-handler-down-inner {
        width: 12px;
        height: 12px;
        line-height: 12px;
        font-size: 10px;
        color: @yy-text-primary-color;
        user-select: none;
        position: absolute;
        right: 5px;
        transition: all @yy-transition-time linear;
    }

    &:hover {
        .hover();
    }

    &-disabled {
        .disabled();
    }

    &-input {
        &-wrap {
            position: relative;
            height: @yy-input-height-base;
            // line-height: @yy-input-height-base;
        }

        .input;
        
        padding: 0 10px;
        width: 100%;
        box-sizing: border-box;
        height: @yy-input-height-base;
        line-height: @yy-input-height-base;
        font-size: @yy-font-size-small;
        text-align: left;
        outline: 0;
        -moz-appearance: textfield;
        color: @yy-text-primary-color;
        border-radius: @yy-btn-border-radius;
        transition: all @yy-transition-time linear;

        &[disabled] {
            .disabled();
        }

        &::placeholder {
            color: @yy-input-placeholder-color;
        }
    }


    &-handler-down-disabled,
    &-handler-up-disabled,
    &-disabled {

        .@{prefixInputNumberCls}-handler-down-inner,
        .@{prefixInputNumberCls}-handler-up-inner {
            .handler-disabled();
        }
    }

    &-disabled {
        .@{prefixInputNumberCls}-input {
            opacity: 0.72;
            .cursor(not-allowed);
            background-color: @yy-background-color-base;
        }

        .@{prefixInputNumberCls}-handler-wrap {
            display: none;
        }

        .@{prefixInputNumberCls}-handler {
            .handler-disabled();
        }
    }

    &-small &-input {
        height: @yy-input-height-small;
        line-height: @yy-input-height-small;
    }

    &-small &-input-wrap {
        height: @yy-input-height-small;
    }

    &-large &-input {
        height: @yy-input-height-large;
        line-height: @yy-input-height-large;
    }

    &-large &-input-wrap {
        height: @yy-input-height-large;
    }
}