jdvue/src/components/tabs/index.less

A Vue.js 2.0 Mobile UI components at JinDanLiCai

@v-tabs-height: 44px;
@v-tabs-short: 37px;

.v-tabs {
    position: relative;
    padding-top: @v-tabs-height;
    &-wrap {
        position: absolute !important;
        height: @v-tabs-height;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        overflow: hidden;
    }
    &-wrap-page-top {
        position: fixed;
    }
    &-wrap-content-bottom {
        top: auto;
        bottom: 0;
    }
    &-nav {
        display: flex;
        justify-content: center;
        user-select: none;
        position: relative;
        background-color: #fff;
        height: 100%;
        padding-bottom: 15px;
        /* 15px padding to hide scrollbar in mobile safari */
        box-sizing: content-box;
        &-bar {
            z-index: 1;
            left: 0;
            bottom: 22px;
            height: 2px;
            border-radius: 2px;
            position: absolute;
            background-color: @red;
        }
    }
    &-scrollable {
        .v-tab {
            flex: 0 0 22%;
        }
        .v-tabs-nav {
            overflow: hidden;
            overflow-x: auto;
            justify-content: start;
            -webkit-overflow-scrolling: touch;
            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
}

.v-tab {
    margin: 0 15px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    color: @master;
    line-height: @v-tabs-height;
    text-align: center;
    box-sizing: border-box;
    background-color: #fff;
    min-width: 0;
    &-small{
        font-size: 14px;
    }
    /* hack for flex ellipsis */
    .span {
        display: inline-block;
    }
    /* &:active {
        background-color: #eee;
    }*/
    &-active {
        color: @red;
    }
    &-disabled {
        color: @gray;
        &:active {
            background-color: #fff;
        }
    }
    &-item {
        display: none;
        &-select {
            display: block;
        }
    }
}

.v-tab-type3{
    color: @gray;
}
.v-tab-active.v-tab-type3{
    color: @master;
    font-weight: bold;
}
.v-tabs-type3-line{
    position: absolute;
    left: 0;
    top: 37px;
    width: 100%;
    z-index: 100;
}


.v-tabs-flex {
    .v-tab {
        flex: 1;
        margin: 0;
    }
}

.v-tabs-short {
    padding-top: @v-tabs-short;
    .v-tabs-wrap {
        height: @v-tabs-short;
    }
    .v-tab {
        line-height: @v-tabs-short;
    }
    .v-tabs-nav-bar {
        bottom: 15px;
    }
}