magiccube-vue3/package/style/select-cascader.less

vue3-js版组件库

@import './theme';
@import './picker-common';

.mc-cascader{
    display: flex;
    flex-direction: row;
    position: relative;
    padding: 24px 20px;
    width: 668px;

    &__tip{
        position: absolute;
        top: 2px;
        color: var(--mc-subtitle-color);
        font-size: var(--mc-small-size);
        line-height: 20px;
    }

    &__badge{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15px;
        right: 8px;
        min-width: 16px;
        height: 16px;
        color: #fff;
        font-size: 10px;
        background: var(--mc-main-color);
        border-radius: 50%;
    }

    &__column{
        overflow-y: auto;

        &--first{
            margin-right: 4px;
            width: 128px;
            background: var(--mc-label-default-bg-color);
        }

        &--second{
            margin-right: 4px;
            width: 128px;
            background: var(--mc-label-default-bg-color);
        }

        &--third{
            flex: 1;
            padding: 16px;
        }

        &--item:not(.view-full){
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &--item{
            position: relative;
            padding: 13px 24px;
            cursor: pointer;
            user-select: none;

            &.active{
                background: var(--mc-label-blue-bg-color);
            }

            & > span{
                pointer-events: none;
            }
        }

        &--tag{
            display: inline-block;
            margin-right: 16px;
            margin-bottom: 16px;
            cursor: pointer;
            user-select: none;

            &.active{
                color: var(--mc-main-color);
            }
        }
    }

    &__selected{
        display: flex;
        flex-direction: column;
        padding-left: 15px;
        width: 140px;
        border-left: 1px solid var(--mc-split-color);

        &--title{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 16px;
        }
        &--list{
            flex: 1;
            overflow-y: auto;

            &__item{
                margin-bottom: 8px;

                &--tag{
                    display: inline-block;
                    padding: 2px 8px;
                    max-width: 100%;
                    font-size: var(--mc-small-size);
                    color: var(--mc-title-color);
                    background: var(--mc-label-default-bg-color);
                    border-radius: 16px;

                    &__inner{
                        display: flex;
                        align-items: center;
                    }

                    &--name{
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    &--close{
                        display: flex;
                        align-items: center;
                        margin-left: 8px;
                        cursor:pointer;
                    }
                }
            }
        }
    }
}