@finos/perspective-viewer/src/themes/material.less

The `<perspective-viewer>` Custom Element, frontend for Perspective.js

/******************************************************************************
 *
 * 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 "../less/fonts";
@import "../less/variables";

perspective-viewer,
.perspective-viewer-material {
    .perspective-viewer-material-base();
    --active--color: @blue500;
}

perspective-column-style.light,
perspective-expression-editor.light {
    background-color: #ffffff;
    color: #161616;
    border: 1px solid #ccc;
    --input--border-color: #ccc;
    --active-color: @blue500;
}

.perspective-viewer-material-base() {
    background-color: #f2f4f6;
    font-family: "Open Sans";

    --rt-pos-cell--color: @blue300;
    --rt-neg-cell--color: @red300;
    --modal--class: light;

    --interface-monospace--font-family: "Roboto Mono";
    --inactive-column-selector--content: "\E835";
    --active-column-selector--content: "\E834";
    --plugin--background: #ffffff;

    --float--column-type--color: @blue500;
    --string--column-type--color: @red500;
    --date--column-type--color: @green500;
    --boolean--column-type--color: @orange500;

    --settings-button--content: "more_vert";
    --button--font-family: "Material Icons";
    --overflow_hint--before: "error_outline";
    --overflow_hint--font-family: "Material Icons";
    --overflow_hint--color: rgba(0, 0, 0, 0.2);
    --overflow_hint--padding: 0 12px 0 6px;

    --row_pivots--before: "Group By";
    --column_pivots--before: "Split By";

    --sort-order-asc--before: "arrow_upward";
    --sort-order-desc--before: "arrow_downward";
    --sort-order-none--before: "remove";
    --close_button--before: "close";
    --sort-order-col-asc--before: "arrow_forward";
    --sort-order-col-desc--before: "arrow_back";

    --select--background-color: none;
    --select--padding: 0px;

    --column-drop-container--background: none;
    --column-drop-container--padding: 0px;
    --column-drop-container--margin: 24px 24px 0px 0px;
    --column-drop-label--margin: -12px 0px 0px 0px;
    --column-drop-label--font-size: 10px;
    --column-drop-label--display: inline-block;

    --column-container--margin: 18px 0px 0px 0px;

    // "New Column" icon
    --column-add--font-family: "Material Icons";
    --column-add--before: "add";

    // close "New Column" icon
    --column-close--font-family: "Material Icons";
    --column-close--before: "close";

    --column-hide--before: "expand_more";

    --column_type--padding: 0px 0px 0px 0px;
    --column_type--width: 25px;

    --column-selector--font-family: "Material Icons";
    --active-column-selector--height: 45px;
    --column_selector--width: 31px;
    --column_selector--font-size: 16px;

    --side_panel--padding: 24px 16px 24px 17px;
    --settings-button--padding: 24px 17px 0px 17px;
    --button--font-size: 16px;

    --top_panel--padding: 12px 0px 24px 0px;
    --top-panel-row--display: inline-flex;

    --d3fc-treedata-axis--lines: none;

    --d3fc-y1-label--font-family: "Material Icons";
    --d3fc-y1-label--content: "arrow_upward";

    --d3fc-y2-label--font-family: "Material Icons";
    --d3fc-y2-label--content: "arrow_downward";
    --d3fc-tooltip--background--color: rgba(155, 155, 155, 0.8);
    --d3fc-tooltip--color: @grey900;
    --d3fc-tooltip--border-color: #fff;
    --d3fc-tooltip--box-shadow: @elevation1;
    --d3fc-gridline--color: #eaedef;
    --d3fc-axis--ticks: #161616; //@grey500; //rgb(187, 187, 187);
    --d3fc-axis--lines: @grey60; //@grey500; //rgb(85, 85, 85);
    --d3fc-legend--background: rgba(255, 255, 255, 0.8);

    --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%
    );

    regular-table::-webkit-scrollbar-thumb {
        background-color: #e0e4e9;
    }

    regular-table {
        -webkit-mask-image: ~"linear-gradient(black, black)",
            ~"linear-gradient(to top, transparent 10%, black 90%)",
            ~"linear-gradient(to left, transparent 10%, black 90%)";
        -webkit-mask-position: ~"-12px -12px", ~"bottom right", ~"bottom right";
        -webkit-mask-size: ~"100% 100%", ~"12px 1000%", ~"1000% 12px";
        -webkit-mask-repeat: no-repeat;
        transition: -webkit-mask-position 0.3s;
        &:hover {
            -webkit-mask-position: ~"-12px -12px", ~"top right", ~"bottom left";
        }
    }
}