@finos/perspective-viewer/dist/less/viewer.less

/******************************************************************************
 *
 * Copyright (c) 2017, the Perspective Authors.
 *
 * This file is part of the Perspective library, distributed under the terms of
 * the Apache License 2.0.  The full license can be found in the LICENSE file.
 *
 */

@import "./column_labels.less";
@import "./variables.less";

:host:hover #config_button {
    opacity: 1;
}

#config_button {
    background: none;
    opacity: 1 !important;
}

.button {
    padding: var(--button--padding, 12px 14px 24px 8px);
}

[settings="true"] #config_button {
    opacity: 1 !important;
}

@keyframes expand {
    from {
        opacity: 0;
    }
}

:host {
    position: relative;
    display: inline-block;
    overflow: hidden;
    word-wrap: "normal";

    --highcharts-full--gradient: linear-gradient(
        #4d342f 0%,
        #e4521b 22.5%,
        #feeb65 42.5%,
        #f0f0f0 50%,
        #dcedc8 57.5%,
        #42b3d5 67.5%,
        #1a237e 100%
    );

    --highcharts-positive--gradient: linear-gradient(
        #dcedc8 0%,
        #42b3d5 35%,
        #1a237e 100%
    );
    --highcharts-negative--gradient: linear-gradient(
        #feeb65 100%,
        #e4521b 70%,
        #4d342f 0%
    );
    --hypergrid-tree-header--background: #fff;
    --hypergrid-tree-header--color: #666;
    --hypergrid-header--background: #fff;
    --hypergrid-separator--color: #666;
    --hypergrid-header--color: #666;
    --hypergrid-positive--color: #1078d1;
    --hypergrid-negative--color: rgb(255, 136, 136);
    --hypergrid--font-size: 12px;
    --hypergrid-header--font-size: 12px;
    --hypergrid--font-family: Helvetica, @sans-serif-fonts;
    --hypergrid-header--font-family: Helvetica, @sans-serif-fonts;
    --hypergrid-row-hover--background: #f6f6f6;
    --hypergrid-row-hover--color: #666;
    --hypergrid-cell-hover--background: #eeeeee;
    --hypergrid-cell-hover--color: #666;

    --integer--hypergrid--text-align: right;
    --float--hypergrid--text-align: right;

    --d3fc-series: rgba(31, 119, 180, 0.5);
    --d3fc-series-1: #0366d6;
    --d3fc-series-2: #ff7f0e;
    --d3fc-series-3: #2ca02c;
    --d3fc-series-4: #d62728;
    --d3fc-series-5: #9467bd;
    --d3fc-series-6: #8c564b;
    --d3fc-series-7: #e377c2;
    --d3fc-series-8: #7f7f7f;
    --d3fc-series-9: #bcbd22;
    --d3fc-series-10: #17becf;
    --d3fc-full--gradient: linear-gradient(
        #4d342f 0%,
        #e4521b 22.5%,
        #feeb65 42.5%,
        #f0f0f0 50%,
        #dcedc8 57.5%,
        #42b3d5 67.5%,
        #1a237e 100%
    );
    --d3fc-positive--gradient: linear-gradient(
        #dcedc8 0%,
        #42b3d5 35%,
        #1a237e 100%
    );
    --d3fc-negative--gradient: linear-gradient(
        #feeb65 100%,
        #e4521b 70%,
        #4d342f 0%
    );

    #pivot_chart {
        position: absolute;
        width: 100%;
        height: 100%;
        display: grid;
        justify-content: stretch;
    }
    .hidden {
        display: none;
    }
    .psp-icon {
        color: #999;
        &:hover {
            cursor: pointer;
        }
    }
    .psp-icon__add {
        display: flex;
        width: 20px;
        min-width: 20px;
        margin-top: -2px;
        height: 0px;
        font-family: var(--column-add--font-family, inherit);
        &:before {
            font-feature-settings: "liga";
            content: var(--column-add--before, "+");
        }
    }
    .psp-title__columnName {
        display: flex;
        margin-left: 34px;
        margin-top: 3px;
        font-size: 12px;
        color: #666;
    }
    .side_panel-action:hover {
        cursor: pointer;
    }
    * {
        box-sizing: border-box;
        line-height: 1.42857143;
    }
    #app {
        display: flex;
        position: relative;
        width: 100%;
        height: 100%;
    }
    #app.hide_message {
        #drop_target {
            display: none;
        }
    }
    .chart {
        padding: 15px;
    }
    #pivot_chart_container {
        flex-grow: 1;
        position: relative;
        border: var(--plugin--border, none);
        overflow: hidden;
    }
    .config {
        display: flex;
    }
    #row_pivots #psp_row,
    #column_pivots #psp_row,
    #sort #psp_row,
    #filters #psp_row {
        display: inline;
    }
    ul {
        min-height: 20px;
    }
    #active_columns perspective-row {
        animation: expand 0.3s ease-out;
        --column-selector--color: var(--active--color, #999);
        --is_visible--before: var(--active-column-selector--content, "\25CF");
    }
    #inactive_columns perspective-row {
        animation: expand 0.3s ease-out;
        --column-selector--color: var(--inactive-column-selector--color, #999);
        --is_visible--before: var(--inactive-column-selector--content, "\25CB");
        --row_draggable--animation: none;
        &:hover {
            transition: none;
            opacity: 1;
        }
    }
    #top_panel perspective-row {
        animation: expand 0.3s ease-out;
        --column-name--flex: 1;
    }
    #active_columns,
    #inactive_columns {
        list-style: none;
        padding: 0px;
        width: 100%;
        margin: var(--column-container--margin, 8px 0px 0px 0px);
        overflow-y: overlay;
        overflow-x: hidden;
        position: relative;
    }
    #inactive_columns {
        perspective-row {
            opacity: var(--inactive-column--opacity, 1);
            transition: opacity 0.3s; // --row_draggable--transition: margin-left 0.5s;
            &.active {
                --row_draggable--margin: 0px 0px 0px 10px;
                opacity: 0;
                height: 0 !important;
                overflow: hidden;
            }
        }
    }
    .columns_horizontal #sub_columns.collapse #side_panel__actions {
        margin-top: 0px;
    }
    #sub_columns {
        min-height: 33.3%;
        flex-shrink: 100000;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        width: 100%;
        &.collapse {
            #inactive_columns {
                display: none;
            }
            flex-shrink: 0;
            min-height: 64px;
        }
    }
    .column {
        display: flex;
        list-style: none;
        flex-direction: column;
        flex: 1;
    }
    .rrow {
        display: flex;
        flex-grow: 1;
        min-height: 24px;
        align-items: center;
        max-width: 400px;
        list-style: none;
        min-width: 140px;
        margin: var(--column-drop-container--margin, 5px 10px 0px 0px);
    }
    .rrow > div {
        display: flex;
        min-height: 24px;
        flex-direction: column;
        justify-content: flex-end;
    }
    #top_panel > .rrow > * {
        width: 100%;
        padding: 12px 0px 12px 0px;
        margin: -12px 0px -12px 0px;
    }
    .rrow #psp_row {
        white-space: nowrap;
    }
    #sort perspective-row {
        --sort_order-display: inline;
        --sort_order-padding: 0 0 0 4px;
        &[sort-order="asc"] {
            --row-sort-order--before: var(--sort-order-asc--before, "\2191");
        }
        &[sort-order="desc"] {
            --row-sort-order--before: var(--sort-order-desc--before, "\2193");
        }
        &[sort-order="none"] {
            --row-sort-order--before: var(--sort-order-none--before, "-");
        }
        &[sort-order="asc abs"] {
            --row-sort-order--before: var(
                --sort-order-asc-abs--before,
                "\21E7"
            );
        }
        &[sort-order="desc abs"] {
            --row-sort-order--before: var(
                --sort-order-desc-abs--before,
                "\21E9"
            );
        }
        &[sort-order="col asc"] {
            --row-sort-order--before: var(
                --sort-order-col-asc--before,
                "\2192"
            );
        }
        &[sort-order="col desc"] {
            --row-sort-order--before: var(
                --sort-order-col-desc--before,
                "\2190"
            );
        }
        &[sort-order="col asc abs"] {
            --row-sort-order--before: var(
                --sort-order-col-asc-abs--before,
                "\21E8"
            );
        }
        &[sort-order="col desc abs"] {
            --row-sort-order--before: var(
                --sort-order-col-desc-abs--before,
                "\21E6"
            );
        }
    }
    #top_panel perspective-row {
        padding: 0px 10px 0px 0px;
    }
    #top_panel perspective-row::after {
        content: ",";
    }
    #top_panel perspective-row:last-child::after {
        display: none;
        content: "" !important;
    }

    label {
        white-space: nowrap;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0px;
    }
    #drop_target {
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        padding: 30px;
    }
    #drop_target_inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #drop_target_inner h3 {
        font-weight: 300;
    }
    #config_button {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s ease-out;
        &:hover {
            color: var(--active--color, inherit);
        }
    }
    .button {
        cursor: pointer;
        font-size: 16px;
        font-weight: normal;
    }
    ul {
        padding: 0px;
        margin: 0;
        font-size: 12px;
    }
    select::-ms-expand {
        display: none;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
        background: var(
            --select--background,
            url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNC45IDEwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0LjkgMTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojQUFBQUFBO30KPC9zdHlsZT4KPHRpdGxlPmFycm93czwvdGl0bGU+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMS40LDQuNyAyLjUsMy4yIDMuNSw0LjcgIi8+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMy41LDUuMyAyLjUsNi44IDEuNCw1LjMgIi8+Cjwvc3ZnPg==)
                no-repeat 95% 50%
        );
        background-color: #fff;
        color: inherit;
        border-radius: 5px;
        height: 24px;
        padding: var(--select--padding, 0px 0px 0px 6px);
        font-size: 12px;
        font-family: inherit;
    }
    input {
        padding: 0 10px 0 10px;
    }
    .centered {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #top_panel {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: var(--top_panel--padding, 5px 0px 10px 0px);
        max-width: 1000px;
        z-index: 1;
        perspective-row {
            margin-bottom: -1px;
            display: var(--top-panel-row--display, inline-block);
            --psp_row-display: inline-block;
        }
    }
    #side_panel {
        position: relative;
        flex: 0 0 auto;
        padding: var(--side_panel--padding, 10px 10px 0px 11px);
    }
    #side_panel > div {
        display: flex;
    }
    #vis_selector_container {
        min-height: 29px;
        margin-left: var(--column_selector--width, 20px);
        overflow: hidden;
    }
    #vis_selector {
        flex-grow: 1;
    }
    #transpose_button {
        cursor: pointer;
        min-width: 5px;
        max-width: 5px;
        flex-grow: 0;
        color: #999;
        font-family: Arial;
        font-size: 12px;
        &:hover {
            color: var(--active--color, inherit);
        }
    }

    #resize_bar {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 8px;
        cursor: col-resize;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    :hover::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0);
    }

    ::-webkit-scrollbar-corner {
        background-color: rgba(0, 0, 0, 0);
    }
}