kityminder/ui/theme/default/css/_tab.less

Kity Minder

#tab-select {
    height: @panel-height;
    line-height: @panel-height;
    min-width: 200px;
    margin-left: 10px;
    float: left;

    .fui-button {
        width: 60px;
        height: @panel-height;
        line-height: @panel-height;
        text-align: 50px;
        display: inline-block;

        &:hover {
            background: @tab-hover !important;
        }
        &:active {
            background: @tab-active !important;
        }

        .fui-icon {
            display: none;
        }

        .fui-label {
            height: @panel-height;
            line-height: @panel-height;
            text-align: center;
            display: block;
            color: hsl(224, 6%, 80%);
            font-size: 14px;

            &:hover {
                background: @tab-hover;
            }
            &:active {
                background: darken(@tab-active, 10%);
            }
        }

        &.fui-selected {
            .fui-label {
                color: white;
            }
            &:after {
                content: ' ';
                height: 0;
                line-height: 0;
                font-size: 0;
                display: block;
                position: absolute;
                border: 6px solid;
                border-color: transparent transparent white transparent;
                bottom: 0;
                left: 50%;
                margin-left: -3px;
                z-index: 11;
            }
        }
    }

    &.collapsed .fui-button.fui-selected {
        .fui-label {
            color: hsl(224, 6%, 80%);
        }
        &:after {
            display: none;
        }
    }
}

.fullscreen #tab-container {
    transform: translate(0, -101px) !important;
}

#tab-container {
    position: absolute;
    top: @panel-height;
    height: 60px;
    left: 0;
    right: 0;
    background: white;
    z-index: 10;
    border-bottom: 1px solid #dbdbdb;
    box-shadow: 0 -3px 3px rgba(0, 0, 0, .05);
    overflow: visible;
    
    /* 每一个 Tab 面板 */
    & > .fui-panel {
        display: block;
        height: 100%;

        /* 每一个小节 */
        & > .fui-panel-content > .fui-panel {
            height: 100%;
            padding: 0 5px;
            border-right: 1px dashed #eee;
            & > .fui-panel-content > .fui-label {
                text-align: center;
                display: block;
                width: 100%;
                padding: 1px 0;
                position: absolute;
                bottom: 0;
                top: auto;
                display: none;
            }
            & > .fui-panel-content > .fui-label-panel-content {
                padding: 5px;
            }
        }
    }

    &.collapsed {
        opacity: 0;
        height: 0;
    }
}