magiccube-vue3/package/style/address.less

vue3-js版组件库

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

.mc-address{
    .mc-picker-common-picker();

    &__result{
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        width: 100%;
        height: 32px;


        &--wrap{
            .mc-picker-common-result-tag-wrap();
        }

        &--name{
            .mc-picker-common-result-tag-name();
        }

        &--close{
            .mc-picker-common-result-tag-close();
        }

        &--amount{
            .mc-picker-common-result-tag-amount();
        }

        &--keyword{
            .mc-picker-common-result-tag-keyword()
        }

        &--placeholder{
            .mc-picker-common-result-tag-placeholder();
        }

        &--arrow{
            padding: 0 8px;
            .mc-picker-common-result-arrow()
        }
    }

    &__city{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 110px;
    }

    &__input{
        border: none;
        background: none;

        &::placeholder{
            .mc-picker-common-result-tag-placeholder();
        }

        &:focus, &:active, &:hover{
            border: none;
            background: none;
            box-shadow: none
        }
    }

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

.mc-city-cascade{
    display: flex;
    flex-direction: row;
    padding: 24px 20px;
    width: 668px;

    &__badge{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15px;
        right: 8px;
        width: 16px;
        height: 16px;
        color: #fff;
        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{
            position: relative;
            padding: 13px 24px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            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{
        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{
            &__item{
                margin-bottom: 8px;

                &--tag{
                    display: inline-block;
                    padding: 2px 8px;
                    font-size: var(--mc-small-size);
                    color: var(--mc-title-color);
                    background: var(--mc-label-default-bg-color);
                }
            }
        }
    }
}