akurath/client/resources/stylesheets/tabs/base.less

IDE Frontend for codepsaces.io

.component-tab-content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;

    &.active {
        display: block;
    }
}

.component-tab-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    .tab-panel-lateralopener {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        width: @tabPanelPadding;
        z-index: 0;
    }
    
    .tab-panel-body {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 1;
        margin: @tabPanelPadding;

        &.with-lateralpanel {
            .tab-panel-inner, .tab-panel-toolbar {
                right: @tabPanelLateralWidth+@tabPanelPadding;
            }
            .tab-panel-lateralbar {
                right: 0px;
            }
        }

        .tab-panel-toolbar {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            height: 30px;
            margin: 0px;
            padding: 0px;
            z-index: 3;
        }

        .tab-panel-inner {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            z-index: 2;
            overflow: hidden;
            width: auto;
            height: auto;
            overflow-y: auto;
            .transition(.3s ease-in-out right);

            &.with-toolbar {
                top: 36px;
            }
        }

        /* Lateral panel */
        .tab-panel-lateralbar {
            position: absolute;
            top: 0px;
            bottom: 0px;
            right: -(@tabPanelLateralWidth+@tabPanelPadding);
            z-index: 1;
            width: @tabPanelLateralWidth;
            overflow-y: auto;
            .transition(.3s ease-in-out right);
        }
    }
}