magiccube-vue3/package/style/tab.less

vue3-js版组件库

@import './theme';
.mc-tab{
    position: relative;
    padding-bottom: 7px;
    font-size: var(--mc-normal-size);
    color: var(--mc-title-color);

    .mc-tab__inner{
        position: relative;
        margin-right: 50px;
        cursor: pointer;
        transition: color 200ms;
        user-select: none;

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

        &.mc-tab-disabled{
            color: var(--mc-placeholder-color);
        }

        &--badge{
            position: absolute;
            top: -8px;
            z-index: 3;
            padding: 0 6px;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            color: #fff;
            white-space: nowrap;
            background: #f56c6c;
            border-radius: 10px;
            transform: translateX(-18%);
            pointer-events: none;
        }

        &--count{
            margin-left: 8px;
            pointer-events: none;
        }
    }

    .mc-tab__subscript{
        position: absolute;
        bottom: -1px;
        width: 24px;
        height: 2px;
        background: var(--mc-main-color);
        transition: all 200ms;
    }

    &.mc-tab-card{
        padding: 0;
        border: 1px solid #ddd;
        border-bottom: 2px solid @color-default;

        .mc-tab__inner{
            display: inline-block;
            position: relative;
            padding: 12px 32px;
            cursor: pointer;
            transition: color 200ms;

            &::after{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                height: 100%;
                border-right: 1px solid #f0f0f0;
            }

            &.mc-tab-active{
                color: #fff;
                font-weight: bold;
                background: @color-default;
            }

            &.mc-tab-disabled{
                color: @color-disabled
            }

            &--badge{
                right: 0;
                transform: translateX(0);
                pointer-events: none;
            }
        }

        .mc-tab__subscript.mc-tab-card{
            display: none;
        }
    }

    &.mc-tab-box{
        padding: 0;
        font-size: var(--mc-normal-size);
        color: var(--mc-normal-font-color);
        line-height: 22px;
        border: none;
        overflow-x: overlay;
        overflow-y: hidden;
        white-space: nowrap;

        &:hover::-webkit-scrollbar{
            display: inline-block;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        &::-webkit-scrollbar-thumb{
            background: rgba(198,198,198,.4) !important;
        }

        .mc-tab__inner{
            display: inline-block;
            margin-right: 8px;
            padding: 5px 24px;
            background-color: var(--mc-tab-color);
            border-radius: 8px 8px 0px 0px;
            transition: background-color 200ms;

            &:last-child{
                margin-right: 0;
            }

            &.mc-tab-active{
                color: var(--mc-normal-font-color);
                background-color: #fff;
            }

            &--icon{
                display: inline-block;
                margin-left: 4px;
                vertical-align: sub;
                height: 18px;
                pointer-events: none;
            }
        }

        .mc-tab__subscript.mc-tab-box{
            display: none;
        }
    }
}