@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";

// Register theme for auto-detection
perspective-viewer,
perspective-viewer[theme="Material Light"] {
    --theme-name: "Material Light";
}

perspective-viewer[theme="Material Light"],
.perspective-viewer-material {
    .perspective-viewer-material--dimensions();
    .perspective-viewer-material--colors();
    .perspective-viewer-material--fonts();
    .perspective-viewer-material--intl();
    .perspective-viewer-material--d3fc();
    .perspective-viewer-material--datagrid();
}

perspective-copy-dropdown[theme="Material Light"],
perspective-export-dropdown[theme="Material Light"],
perspective-filter-dropdown[theme="Material Light"],
perspective-number-column-style[theme="Material Light"],
perspective-string-column-style[theme="Material Light"],
perspective-expression-editor[theme="Material Light"],
.perspective-modal-material {
    .perspective-viewer-material--fonts();
    .perspective-viewer-material--colors();

    background-color: white;
    --column-style-pos-color--content: "add";
    --column-style-neg-color--content: "remove";
    --save-button-icon--content: "save";
    --reset-button-icon--content: "refresh";
    --column-style-radio--appearance: none;
    --column-style-radio-checked--content: "radio_button_checked";
    --column-style-radio-unchecked--content: "radio_button_unchecked";
    --column-style-checkbox--appearance: none;
    --column-style-checkbox-checked--content: "check_box";
    --column-style-checkbox-unchecked--content: "check_box_outline_blank";
}

.perspective-viewer-material--dimensions {
    --button--font-size: 16px;
    --config-button--padding: 15px 8px 6px 8px;
    --column-drop-label--font-size: 8px;
    --column-drop-container--padding: 0px;
    --column-drop-label--display: inline-block;
    --column-selector--width: 24px;
    --column-selector--font-size: 16px;

    // 3 char width in 'Roboto Mono'
    --column_type--width: 25px;

    --select--padding: 0px;
    --side-panel--padding: 12px 0px 6px 8px;
    --top-panel--padding: 0px 0px 12px 0px;
    --top-panel-row--display: inline-flex;
}

.perspective-viewer-material--colors {
    color: #161616;
    background-color: #f2f4f6;

    --active--color: @blue500;
    --error--color: @red300;
    --plugin--background: #ffffff;
    --overflow-hint-icon--color: rgba(0, 0, 0, 0.2);
    --select--background-color: none;
    --column-drop-container--background: none;

    // Column type indicators
    --float--column-type--color: @blue500;
    --string--column-type--color: @red500;
    --date--column-type--color: @green500;
    --boolean--column-type--color: @orange500;
}

.perspective-viewer-material--fonts {
    font-family: "Open Sans";

    --preload-fonts: "Roboto Mono:200;Open Sans:300,400;Material Icons:400";
    --interface-monospace--font-family: "Roboto Mono";
    --button--font-family: "Material Icons";
}

.perspective-viewer-material--intl {
    // Query overlay labels
    --group_by--content: "Group By";
    --split_by--content: "Split By";

    // Icons
    --inactive-column-selector--content: "\E835";
    --active-column-selector--content: "\E834";
    --config-button-icon--content: "more_vert";
    --overflow-hint-icon--content: "error_outline";
    --status-icon--content: "circle";
    --status-bar-counter--content: "arrow_back";
    --reset-button-icon--content: "refresh";
    --export-button-icon--content: "download";
    --copy-button-icon--content: "content_copy";
    --save-button-icon--content: "save";
    --theme-button-icon--content: "palette";
    --transpose-button--content: "swap_horiz";

    // Sort indicators
    --sort-order-asc--content: "arrow_upward";
    --sort-order-desc--content: "arrow_downward";
    --sort-order-none--content: "remove";
    --sort-order-col-asc--content: "arrow_forward";
    --sort-order-col-desc--content: "arrow_back";

    // "New Column" icon
    --column-add--content: "add";
    --column-menu--content: "menu";

    // close "New Column" icon
    --column-close--content: "close";
}

.perspective-viewer-material--d3fc {
    --d3fc-y1-label--content: "arrow_upward";
    --d3fc-y2-label--content: "arrow_downward";

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

    --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--color: #161616;
    --d3fc-axis--lines: @grey60;
    --d3fc-legend--background: rgba(255, 255, 255, 0.8);

    --d3fc-series: rgba(31, 119, 180, 0.8);
    --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(
        #4d342f 0%,
        #e4521b 50%,
        #feeb65 100%
    );
}

.perspective-viewer-material--datagrid {
    --rt-pos-cell--color: @blue300;
    --rt-neg-cell--color: @red300;

    // `regular-table` icons
    --column-style-open-button--content: "menu";
    --column-style-close-button--content: "expand_less";
    --tree-label-collapse--content: "remove";
    --tree-label-expand--content: "add";

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

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