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

IDE Frontend for codepsaces.io

.component-tab {
    position: relative;
    height: @tabHeight;
    float: left;
    z-index: 0;
    cursor: default;
    margin: 0px;
    padding: 0px;
    background: @tabColor;
     .transition(padding-left ease 0.25s);

    &.move,
    &.active.move {
        position: fixed;
        z-index: 100000;
        pointer-events:none;

        * {
            pointer-events:none;
        }
    }

    &.dragover {
        &:before {
            position: absolute;
            left: 0px;
            width: 2px;
            top: 0px;
            bottom: 0px;
            background: @codeboxActiveColor;
            content: " ";
        }
    }


    .inner {
        .box-sizing(border-box);
        height: @tabHeight;
        padding: @tabInnerVPadding 8px;
        .user-select(none);
        position: relative;
        font-size: @tabFontSize;
        line-height: (@tabHeight - (2*@tabInnerVPadding));
        min-width: 100px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        padding-right: 28px;
        max-width: 330px;

        .state {
            margin-right: 5px;
            font-size: 11px;

            &.state-modified {
                color: #e74c3c;
            }
            &.state-sync {
                color: #27ae60;
            }
        }

        .close {
            margin-left: 8px;
            font-weight: 200;
            cursor: default;
            padding: 0px;
            line-height: 16px;
            border-radius: 30px;
            background: transparent;
            opacity: 1;
            font-size: 16px;
            text-shadow: none;
            width: 14px;
            height: 14px;
            text-align: center;
            margin-top: 3px;
            color: transparent;
            position: absolute;
            right: 8px;
        }
    }

    &:hover {
        .inner {
            .close {
                color: #e74c3c !important;
                opacity: 1;
            }
        }
    }

    &.active {
        z-index: 10;
        border-color: @tabActiveBorder;
        background: @tabActiveColor;

        .inner {
            .close {
                color: rgba(0,0,0,0.5);
            }
        }
    }
}