colletch/styles/colletch.less

A collection of etch components

@import "variables";

.etch-progress-bar {
    position: relative;
    background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
    overflow: hidden;
    height: 100%;
    border-radius: 4px;

    &.empty {
        background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
    }

    > .complete {
        position: absolute;
        background-image: -webkit-linear-gradient(#98ea98, #307b11);
        height: 100%;
    }

    > .label {
        position: absolute;
        width: 100%;
        height: 100%;
        color: #000;
        font-weight: normal;
        justify-content: center;
        align-items: center;
        display: flex;
    }
}

.etch-flex-layout {
    /**
     * etch-flex-container
     */
    &.etch-flex-container {
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
        display: flex;
        position: relative;
        height: 100%;
        width: 100%;

        &.horizontal {
            flex-direction: row;
        }

        &.vertical {
            flex-direction: column;
        }
    }

    /**
     * etch-flex-element
     */
    > .etch-flex-element {
        position: relative;
        overflow: hidden;
        flex: 1;
    }

    &.vertical > .etch-flex-element {
        width: 100%;
    }

    &.horizontal > .etch-flex-element {
        height: 100%;
    }

    /**
     * etch-flex-splitter
     */
    > .etch-flex-splitter {
        z-index: 100;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

    &.vertical > .etch-flex-splitter {
        border-bottom: 1px solid @base-border-color;
        border-top: 1px solid @base-border-color;
        cursor: row-resize;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAICAQAAADdTl4aAAAAIElEQVQoz2MwrTD9TxFsZ7jPcV+IIsjFQAUw6hFqegQA+xzRHT2p7pEAAAAASUVORK5CYII=");
        height: 10px;

        &:active,
        &:hover {
            border-bottom: 1px solid @background-color-highlight;
            border-top: 1px solid @background-color-highlight;
        }
    }

    &.horizontal > .etch-flex-splitter {
        border-right: 1px solid @base-border-color;
        border-left: 1px solid @base-border-color;
        cursor: col-resize;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAQAAABOpSL+AAAAIklEQVR4AWMwbb/PdR+JZDD9f1/oPhI5sgVGBSruc9xHIgGdSQqqQJGkRgAAAABJRU5ErkJggg==");
        width: 10px;

        &:active,
        &:hover {
            border-right: 1px solid @background-color-highlight;
            border-left: 1px solid @background-color-highlight;
        }
    }
}

.etch-term {
    height: 100%;
    margin: 0;
    background-color: #000;
    list-style-type: none;
    padding: 10px;
    overflow: auto;
    font-family: "Courier New", Courier, monospace;

    > .etch-term-line {
        white-space: pre-wrap;
        word-break: break-all;
        // display: flex;

        &:empty:before {
            content: ' ';
            display: inline-block;
        }
    }

    .etch-term-cursor {
        position: relative;

        > cursor {
            background-color: #fff;
            color: #000;
            position: absolute;
            left: 0;
        }

        &.blinking-cursor > cursor {
            -webkit-animation: blinking 1s step-end infinite;

            @keyframes blinking {
                from, to { opacity: 0; }
                50% { opacity: 100; }
            }
        }

        > input {
            height: 100%;
            box-sizing: border-box;
            border: 0;
            margin: 0;
            width: 0;
        }
    }

    // .bold { font-weight: bold; }
    // .italic { font-style: italic; }
    // .strikethrough { text-decoration: line-through; }
    // .underline { text-decoration: underline; }
    // .strikethrough.underline {
    //     text-decoration: line-through underline;
    // }

    .ansi-black-fg   { color: #3A3A3A; }
    .ansi-red-fg     { color: #DD948E; }
    .ansi-green-fg   { color: #B6D1AA; }
    .ansi-yellow-fg  { color: #F3D57C; }
    .ansi-blue-fg    { color: #8AA9D5; }
    .ansi-magenta-fg { color: #CBAFD5; }
    .ansi-cyan-fg    { color: #9AD1D4; }
    .ansi-white-fg   { color: #EFEFEF; }

    .ansi-bright-black-fg   { color: #5E5D5E; }
    .ansi-bright-red-fg     { color: #E69B94; }
    .ansi-bright-green-fg   { color: #D1F0C3; }
    .ansi-bright-yellow-fg  { color: #F4D799; }
    .ansi-bright-blue-fg    { color: #A6CBFE; }
    .ansi-bright-magenta-fg { color: #E7C7F2; }
    .ansi-bright-cyan-fg    { color: #B0F0F5; }
    .ansi-bright-white-fg   { color: #FFF; }

    .ansi-black-bg   { background-color: #3A3A3A; }
    .ansi-red-bg     { background-color: #DD948E; }
    .ansi-green-bg   { background-color: #B6D1AA; }
    .ansi-yellow-bg  { background-color: #F3D57C; }
    .ansi-blue-bg    { background-color: #8AA9D5; }
    .ansi-magenta-bg { background-color: #CBAFD5; }
    .ansi-cyan-bg    { background-color: #9AD1D4; }
    .ansi-white-bg   { background-color: #EFEFEF; }

    .ansi-bright-black-bg   { background-color: #5E5D5E; }
    .ansi-bright-red-bg     { background-color: #E69B94; }
    .ansi-bright-green-bg   { background-color: #D1F0C3; }
    .ansi-bright-yellow-bg  { background-color: #F4D799; }
    .ansi-bright-blue-bg    { background-color: #A6CBFE; }
    .ansi-bright-magenta-bg { background-color: #E7C7F2; }
    .ansi-bright-cyan-bg    { background-color: #B0F0F5; }
    .ansi-bright-white-bg   { background-color: #FFF; }
}

.etch-table {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .etch-table-header {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid @base-border-color;
        text-align: center;
        flex: 1 0 auto;
        padding-right: 10px; // Accounts for the scrollbar on the body
    }

    .etch-table-body {
        flex: 1 1 auto;
        overflow-y: scroll;
        height: 100%;
    }

    .etch-table-row {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .etch-table-cell {
        flex: 1 auto;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: @input-font-size;
        margin: 1px;
        padding: 0 @component-padding;

        &:not(:last-child) {
            border-right: 1px solid @base-border-color;
        }
    }

    .etch-table-sort {
        padding-right: 10px;
        position: relative;

        &:hover {
            cursor: pointer;
        }
    }

    .etch-table-sort:after, .etch-table-sort:before {
        content: "";
        border: 4px solid transparent;
        display: block;
        height: 0;
        right: 5px;
        top: 50%;
        position: absolute;
        width: 0;
    }

    .etch-table-sort:before {
        border-bottom-color: @text-color;
        margin-top: -9px;
    }

    .etch-table-sort:after {
        border-top-color: @text-color;
        margin-top: 1px;
    }
}

.etch-multi-select, .etch-select {
    position: relative;
    display: inline-block;

    > select {
        padding-right: 19px !important;
    }

    > .select-list {
        display: none;
        position: absolute;
        max-height: 200px;
        overflow-y: auto;
        z-index: 200;
        width: 100%;
        min-width: initial;

        .list-group {
            margin: 0;
            overflow-y: initial !important;
            max-height: initial !important;
        }

        .divider {
            height: 0.4em;
            width: 80%;
            margin: 0 auto;
            border-bottom: 1px dashed;
        }
    }

    &:hover:not([disabled]) > .select-list {
        display: block;
    }
}

.etch-tree {
    &.is-selecting {
        .list-item {
            cursor: pointer;
        }
    }

    .list-nested-item.alt {
        cursor: s-resize;

        &.expanded {
            cursor: n-resize;
        }
    }

    &.list-tree li[disabled] {
        display: none;
    }

    .active > * {
        position: relative;
    }

    .list-item::before {
        cursor: pointer;
    }

    .list-item.active::before, .list-nested-item.active::before {
        // background-color: @background-color-highlight;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 2em;
        border: 1px solid @button-background-color-selected;
    }

    .list-item.selected::before, .list-nested-item.selected::before {
        background-color: @background-color-selected;
    }
}