acud/lib/input-number/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@input-number-prefix-cls: ~'@{acud-prefix}-input-number';

.@{input-number-prefix-cls} {
    .reset-component();
    .input();

    display: inline-block;
    width: 21 * @P;
    border: @border-width-base @border-style-base @input-number-border-color-base;
    border-radius: @input-number-border-radius-base;

    input {
        color: @input-number-text-color;
    }

    &-handler {
        position: relative;
        display: block;
        width: 100%;
        height: 50%;
        overflow: hidden;
        color: @input-number-icon-color;
        font-weight: bold;
        line-height: 0;
        text-align: center;
        transition: all .1s linear;
        &:hover &-up-inner,
        &:hover &-down-inner {
            color: @input-number-icon-hover-color;
        }
    }
    .@{iconfont-css-prefix} {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-handler-up-inner,
    &-handler-down-inner {
        .iconfont-mixin();
        position: absolute;
        right: @P;
        width: 4 * @P;
        height: 100%;
        color: @input-number-icon-color;
        line-height: 100%;
        transition: all .1s linear;
        user-select: none;
    }

    &:hover,
    &-focused {
        .hover(@input-number-hover-border-color);
    }

    &-disabled {
        .disabled();
        .@{input-number-prefix-cls}-input {
            cursor: not-allowed;
        }
        .@{input-number-prefix-cls}-handler-wrap {
            display: none;
        }
        .@{input-number-prefix-cls}-input {
            color: @input-number-disabled-color;
        }
        .@{input-number-prefix-cls}-handler:hover {
            .@{input-number-prefix-cls}-handler-up-inner,
            .@{input-number-prefix-cls}-handler-down-inner {
                color: @input-number-icon-disabled-color;
            }
        }
    }

    &-readonly {
        .@{input-number-prefix-cls}-handler-wrap {
            display: none;
        }
    }

    &-input {
        width: calc(100% - 6 * @P);
        height: @input-number-height-base - 2px;
        padding: 0 @control-padding-horizontal - 1px;
        text-align: left;
        color: @input-number-text-color;
        background-color: transparent;
        border: 0;
        border-radius: @input-number-border-radius-base;
        outline: 0;
        transition: all .3s linear;
        -moz-appearance: textfield !important;
        .placeholder();

        &[type='number']::-webkit-inner-spin-button,
        &[type='number']::-webkit-outer-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }
    }
    .input-size(@input-height-md, @input-font-size-md);

    &-lg {
        .input-size(@input-height-lg, @input-font-size-lg);
    }

    &-sm {
        .input-size(@input-height-sm, @input-font-size-sm);
    }

    &-md {
        .input-size(@input-height-md, @input-font-size-md);
    }

    &-handler-wrap {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 6 * @P;
        height: 100%;
        background: @input-number-handler-bg;
        opacity: 0;
        border-left: @border-width-base @border-style-base @input-number-border-color-base;
        border-radius: 0 @input-number-border-radius-base @input-number-border-radius-base 0;

        .@{input-number-prefix-cls}-handler {
            .@{input-number-prefix-cls}-handler-up-inner,
            .@{input-number-prefix-cls}-handler-down-inner {
                min-width: auto;
                margin-right: 0;
                font-size: @T4;
                text-align: center;
            }
        }

        .@{input-number-prefix-cls}-borderless & {
            border-left-width: 0;
        }
    }

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

    &-handler-up {
        cursor: pointer;
    }

    &-handler-down {
        top: 0;
        cursor: pointer;
        .@{input-number-prefix-cls}-borderless & {
            border-top-width: 0;
        }
    }

    &-handler-up-disabled,
    &-handler-down-disabled {
        cursor: not-allowed;
    }

    &-borderless {
        box-shadow: none;
    }

    &-wrapper {
        display: inline-block;
        line-height: 1;
    }

    // ===================== Out Of Range =====================

    &-warning {
        .basic-p-config(@input-enhance-p);
    }

    &-warning-text {
        line-height: 1;
        font-size: @T2;
        margin-bottom: 0;
        margin-top: @padding-xsm;
        color:@input-enhance-color;
    }

    &-warning-popover-text {
        color:@input-popover-color;
    }

    // ===================== Symmetry Mode =====================
    &-symmetry {
        width: 32 * @P;
        .@{input-number-prefix-cls}-handler {
            position: absolute;
            width: 8 * @P;
            height: 100%;
            font-size: @T4;
        }
        .@{input-number-prefix-cls}-handler-up-inner,
        .@{input-number-prefix-cls}-handler-down-inner {
            right: 0;
            width: 8 * @P;
        }
        .@{input-number-prefix-cls}-handler-up {
            right: 0;
            border-left: @border-width-base @border-style-base @input-number-border-color-base;
        }
        .@{input-number-prefix-cls}-handler-down {
            left: 0;
            border-right: @border-width-base @border-style-base @input-number-border-color-base;
        }
        .@{input-number-prefix-cls}-input {
            position: relative;
            left: 6 * @P;
            width: calc(100% - 12 * @P);
            text-align: center;
        }
    }
}

@import './rtl';