magiccube-vue3/package/style/amount-range.less

vue3-js版组件库

@import './theme';
@import './root.css';


.mc-amount-range-picker{
    .mc-picker-common-result-panel();

    &.disabled{
        .mc-picker-common-picker-disabled();
    }

    &--input{
        text-indent: 0;
        background: none;
        border: none;

        &:focus,
        &:hover:not(:focus):not(.error):not(:disabled)
        {
            border: none
        }

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

    &__inner{
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        padding-right: 16px;

        &:not(:last-child){
            margin-right: 16px;
        }
    }

    &__arrow{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px;
        right: 0;
        width: 16px;
        height: 16px;

        & > i{
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50%;
            cursor: pointer;
            user-select: none;
            border-radius: 2px;

            &:hover{
                background-color: #eaeaea;
            }
            &:active{
                background-color: #fff;
            }

            & > img{
                pointer-events: none;
                user-select: none;
            }
        }

        &--down{
            transform: rotate(180deg);
        }
    }
}