tab-page-exp.less

.ibiz-page-tag {
    position: relative;
    box-sizing: border-box;
    height: 34px;
    padding: 0 60px 0 30px;
    background: var(--app-left-sidebar-background-color);

    .tags-body {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;

        .tags-container {
            position: absolute;
            overflow: visible;
            white-space: nowrap;
            transition: left .3s ease;

            .ivu-tag {
                margin: 0;
                height: 34px;
                line-height: 34px;
                border: 0;
                border-radius: 0;
                border-right: 1px solid var(--view-background-color);
                background: var(--view-dividing-line-color-tint);
                font-size: 14px;

                .ivu-tag-text {
                    color: var(--view-font-color);

                    >i::before {
                        vertical-align: initial;
                    }
                }

                .text-icon {
                    height: 16px;
                    margin-bottom: -3px;
                }

                .ivu-icon-ios-close {
                    visibility: hidden;
                }

                .tag-text {
                    cursor: pointer;
                    display: table-cell;

                    .ivu-tooltip {
                        display: block;

                        .ivu-tooltip-rel {
                            display: block;
                            max-width: 200px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }

            .ivu-tag.tag-is-active {
                background: var(--view-background-color);

                .ivu-tag-text {
                    color: var(--view-font-color-bright);
                }

                .ivu-icon {
                    color: var(--view-font-color-bright);
                }
            }

            .ivu-tag:hover,
            .ivu-tag.tag-is-active {
                .ivu-icon-ios-close {
                    visibility: initial;
                }

                .ivu-icon {
                    color: var(--view-font-color-bright);
                }
            }

            span {
                .ivu-tag:last-child {
                    border-right: none;
                }
            }
        }
    }

    .move-btn {
        font-size: 18px;
        width: 30px;
        height: 34px;
        line-height: 34px;
        border-left: var(1px solid --view-dividing-line-color-bright);
        border-right: var(1px solid --view-dividing-line-color-bright);
        text-align: center;
        cursor: pointer;
    }

    // .move-btn:hover {
    //     background: #efefef;
    // }
    .move-left,
    .move-right,
    .ivu-dropdown {
        position: absolute;
        top: 0;
        color: var(--view-font-color);
    }

    .move-left {
        left: 0;
    }

    .move-right {
        right: 30px;
    }

    .ivu-dropdown {
        right: 0;
    }
}

.app-page-more {
    background: var(--app-suspension-windows-background-color);

    .ivu-dropdown-item {
        color: var(--app-suspension-windows-color);
    }

    .ivu-dropdown-item:hover {
        background: var(--app-suspension-windows-background-color-active);
        color: var(--app-suspension-windows-font-color-active);
    }
}

.tags-transition-move {
    transition: transform .3s;
}

.tags-transition-enter,
.tags-transition-leave-to {
    opacity: 0;
}