magiccube-vue3/package/style/picker-common.less

vue3-js版组件库

@import './theme';

.mc-picker-common-picker(){
    position: relative;
}

.mc-picker-common-picker-disabled(){
    color: var(--mc-placeholder-color);
    background: var(--mc-disabled-input-background);
    pointer-events: none;
    cursor: not-allowed;
}

.mc-picker-common-result-panel(){
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    padding: 0 12px;
    width: 100%;
    height: @input-height;
    border-radius: @input-radius;
    border: @input-border;
    background: @input-background;
    cursor: pointer;
    transition: all 200ms;

    &.focus:not(.error),
    &:hover:not(.error) {
        border: @input-hover-border;
        box-shadow: @input-hover-shadow;
    }

    &.error {
        border: 1px solid var(--mc-error-color);
    }
}

.mc-pciker-common-result-single{
    margin-right: 6px;
    color: var(--mc-title-color);
    font-size: var(--mc-small-size);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

.mc-picker-common-result-tag-wrap{
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
}

.mc-picker-common-result-tag-name{
    display: inline-block;
    padding-left: 8px;
    max-width: 72px;
    height: 24px;
    line-height: 20px;
    font-size: @font-small;
    color: @select-result-text-color;
    border: @select-result-border;
    border-right: none;
    border-radius: @select-result-radius 0 0 @select-result-radius;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: @select-result-background;
    vertical-align: middle;
    pointer-events: none;
}

.mc-picker-common-result-tag-close{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 2px 8px;
    height: 24px;
    font-size: @font-small;
    color: @select-result-text-color;
    border: @select-result-border;
    border-left: none;
    border-radius: 0 @select-result-radius @select-result-radius 0;
    cursor: pointer;
    background: @select-result-background;
    pointer-events: all;
}

.mc-picker-common-result-tag-amount{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px 8px;
    height: 24px;
    font-size: @font-small;
    color: @select-result-text-color;
    background: @select-result-background;
    border: @select-result-border;
    border-radius: @select-result-radius;
    pointer-events: none;
    word-break: keep-all;
}

.mc-picker-common-result-tag-placeholder{
    flex: 1;
    color: @input-placeholder;
    font-size: @font-small;
    pointer-events: none;
}

.mc-picker-common-result-tag-keyword{
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 32px;

    &__input{
        width: 100%;
        height: 100%;
        font-size: var(--mc-small-size);
        text-indent: 0;
        border: none;
        border-radius: 0;
        background: none;

        &:hover, &:focus{
            border: none;
        }
    }

    &__close{
        cursor: pointer;
    }
}

.mc-picker-common-result-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 12px;
    margin-left: 4px;
    pointer-events: none;

    & > img{
        width: 100%;
        height: 100%;
        transition: transform 300ms;
    }

    &.mc-rotate{
        & > img{
            transform: rotate(180deg);
        }
    }
}

.mc-picker-common-dropdown-wrap(){
    padding: 8px 0;
}

.mc-picker-common-dropdown-list(){
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
    }

    &>li {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 6px 16px;
        min-height: 32px;
        color: var(--mc-title-color);
        white-space: nowrap;
        cursor: pointer;

        &:hover:not(.disabled) {
            background: #E7FAFF;
        }

        &.checked {
            color: @color-default;
        }

        &.disabled {
            color: @color-font-disabled;
            cursor: not-allowed;
        }

        &>span{
            white-space: normal;
        }

        &>span.active {
            color: @color-default;
        }
    }
}