rabbit-simple-ui/src/styles/components/input-number.less

A simple UI component library based on JavaScript

@import '../custom.less';
@import '../mixins/common.less';
@import '../mixins/input.less';

@input-number-tag: r-input-number;
@input-number-prefix-cls: ~"@{css-prefix}input-number";

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

.@{input-number-prefix-cls} {
    @radius-wrap: 0 @btn-border-radius @btn-border-radius 0;

    .input();
    margin: 0;
    padding: 0;
    width: 80px;
    height: @input-height-base;
    line-height: @input-height-base;
    vertical-align: middle;
    border: 1px solid @border-color-base;
    border-radius: @btn-border-radius;
    overflow: hidden;
    cursor: default;

    &-handler-wrap {
        width: 22px;
        height: 100%;
        border-left: 1px solid @border-color-base;
        border-radius: @radius-wrap;
        background: @white;
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        transition: opacity @transition-time @ease-in-out;
    }

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

    &-handler-up {
        cursor: pointer;
        &-inner {
            top: -1px;
        }
    }

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

    &-handler {
        display: block;
        width: 100%;
        height: (@input-height-base / 2);
        line-height: 0;
        text-align: center;
        overflow: hidden;
        color: #999;
        position: relative;

        &:hover &-up-inner,
        &:hover &-down-inner {
            color: tint(@primary-color, 20%);
        }
    }

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

    &:hover {
        .hover();
    }

    &-focused {
        .active();
    }

    &-disabled {
        .disabled();
    }

    &-input-wrap {
        overflow: hidden;
        height: @input-height-base;
    }

    &-input {
        width: 100%;
        height: @input-height-base;
        line-height: @input-height-base;
        padding: 0 7px;
        text-align: left;
        outline: 0;
        -moz-appearance: textfield;
        color: #666;
        border: 0;
        border-radius: @btn-border-radius;
        transition: all @transition-time linear;

        &::-webkit-outer-spin-button,&::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }

        &[disabled] {
            .disabled();
        }

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

    &-large {
        padding: 0;
        .@{input-number-prefix-cls}-input-wrap {
            height: @input-height-large;
        }
        .@{input-number-prefix-cls}-handler {
            height: (@input-height-large / 2);
        }

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

        .@{input-number-prefix-cls}-handler-up-inner {
            top: 1px;
        }
        .@{input-number-prefix-cls}-handler-down-inner {
            bottom: 5px;
        }
    }

    &-small {
        padding: 0;
        .@{input-number-prefix-cls}-input-wrap {
            height: @input-height-small;
        }
        .@{input-number-prefix-cls}-handler {
            height: (@input-height-small / 2);
        }

        input {
            height: @input-height-small;
            line-height: @input-height-small;
            margin-top: -1px;
            vertical-align: top;
        }
        .@{input-number-prefix-cls}-handler-up-inner {
            top: -4px;
        }
        .@{input-number-prefix-cls}-handler-down-inner {
            bottom: 2px;
        }
    }



    &-handler-down-disabled,
    &-handler-up-disabled,
    &-disabled {
        .@{input-number-prefix-cls}-handler-down-inner,
        .@{input-number-prefix-cls}-handler-up-inner {
            .handler-disabled();
        }
    }

    &-disabled {
        .@{input-number-prefix-cls}-input {
            opacity: 0.72;
            cursor: @cursor-disabled;
            background-color: #f3f3f3;
        }
        .@{input-number-prefix-cls}-handler-wrap {
            display: none;
        }
        .@{input-number-prefix-cls}-handler {
            .handler-disabled();
        }
    }

    &-controls-outside{
        width: 80px + 32px * 2;
        padding: 0 32px;
        .@{input-number-prefix-cls}-input{
            border-radius: 0;
            text-align: center;
        }
        &-btn{
            display: inline-block;
            width: 32px;
            height: 32px;
            line-height: 30px;
            position: absolute;
            top: 0;
            text-align: center;
            background-color: @input-group-bg;
            color: @input-color;
            cursor: pointer;
            i{
                font-size: 16px;
            }
            &:hover i{
                color: @primary-color;
            }
            &-disabled, &-disabled:hover{
                cursor: @cursor-disabled;
                i{
                    color: #ccc;
                }
            }
        }
        &-up{
            right: 0;
            border-left: 1px solid @input-border-color;
        }
        &-down{
            left: 0;
            border-right: 1px solid @input-border-color;
        }
    }
    &-disabled&-controls-outside{
        .@{input-number-prefix-cls}-controls-outside-btn{
            cursor: @cursor-disabled;
            i{
                color: #ccc;
            }
        }
    }
    &-large&-controls-outside{
        width: 80px + 40px *2;
        padding: 0 40px;
        .@{input-number-prefix-cls}-controls-outside-btn{
            width: 40px;
            height: 40px;
            line-height: 38px;
            i{
                font-size: 20px;
            }
        }
    }
    &-small&-controls-outside{
        width: 80px + 24px *2;
        padding: 0 24px;
        .@{input-number-prefix-cls}-controls-outside-btn{
            width: 24px;
            height: 24px;
            line-height: 22px;
            i{
                font-size: 14px;
            }
        }
    }
}