@finos/perspective-viewer/src/less/config-selector.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 "./variables.less";

:host {
    #top_panel.dragdrop-highlight {
        .psp-text-field {
            border-bottom-color: var(--active--color) !important;
        }
    }

    #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;

        .row_close {
            display: inline;
            font-family: var(
                --column-close--font-family,
                var(--button--font-family, "inherit")
            );
            font-display: block;
            cursor: pointer;
            min-width: 12px;
            margin-right: 3px;
            flex-grow: 0;
            font-size: 12px;
            margin-top: 2px;
            margin-left: 3px;
            margin-right: 0px;
            
            &:before {
                content: var(--column-close--content, "X");
            }
            &:hover {
                opacity: 1;
                color: var(--active--color, inherit);
            }
        }

        .pivot-column {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            &:not(.config-drop) {
                padding: 0px 9px 0 0;
            }

            span {
                white-space: nowrap;
            }

            span:first-child {
                text-overflow: ellipsis;
                max-width: 250px;
                overflow: hidden;
            }

            // Column is being dragged-over, e.g. this is the drop indicator.
            &.config-drop {
                display: inline;
                width: 0px;
                height: 14px;
                min-height: 14px;
                margin-top: 5px;
                overflow: visible;
                border-left: 2px solid var(--active--color, rgba(0, 0, 0, 0.5));
                margin-right: 2px;
                margin-left: -4px;

                &:first-child {
                    margin-right: -2px;
                    margin-left: 0px;
                }

                & > * {
                    color: transparent;
                }
            }
        }

        label.pivot-selector-label {
            pointer-events: none;
        }

        #group_by label.pivot-selector-label:before {
            content: var(--group_by--content, "Group By");
        }

        #split_by label.pivot-selector-label:before {
            content: var(--split_by--content, "Split By");
        }

        #sort label.pivot-selector-label:before {
            content: "Order By";
        }

        #filter label.pivot-selector-label:before {
            content: "Where";
        }

        .highlight-drop {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .rrow {
            display: flex;
            min-height: 24px;
            align-items: center;
            max-width: 400px;
            list-style: none;
            min-width: 140px;
            padding: 12px 12px 12px 0px;
            // flex: 1 1 auto;

            span[draggable] {
                cursor: move;
            }
        }

        .rrow > div {
            display: flex;
            min-height: 24px;
            flex-direction: column;
            justify-content: flex-end;
        }

        .rrow > * {
            width: 100%;
            padding: 12px 0px 0px 0px;
            margin: -12px 0px -12px 0px;
        }

        .psp-text-field ul {
            min-height: 20px;
        }

        .psp-text-field {
            position: relative;
            background-color: var(--column-drop-container--background, white);
            border-width: 0;
            border-bottom-width: 1px;
            border-style: solid;
            border-color: var(--inactive--color, #ccc);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            min-height: 24px;
            background-size: 100% 200%;
        }

        .psp-text-field > .psp-text-field__input {
            flex-wrap: wrap;
            border: 0px;
            line-height: 20px;
            vertical-align: bottom;
            padding-bottom: 0px;
            display: none;
            margin: 0;
            padding: 0 48px 0 0;
            font-size: 12px;
            min-height: 24px;
            margin-bottom: -1px;

            // Comma separators
            & > :not(.config-drop)::after {
                width: 0px;
                content: ",";
            }

            & > :last-child::after {
                display: none;
                content: "" !important;
            }
        }

        .psp-text-field__input + label {
            width: 0px;
            height: 20px;
            line-height: 17px;
            box-sizing: border-box;
            font-weight: 300;
            color: var(--inactive--color, #b4b7be);
            white-space: nowrap;
            padding: var(--column-drop-container--padding, 0px);
            font-size: 12px;
            display: inline-block;
        }

        .psp-text-field__input:not(:empty) {
            display: flex !important;
        }

        .psp-text-field__input:not(:empty) + label {
            position: absolute;
            top: 0px;
            margin: var(--column-drop-label--margin, -10px 0px 0px 0px);
            font-size: var(--column-drop-label--font-size, 10px);
            display: var(--column-drop-label--display, none);
        }

        #transpose_button {
            cursor: pointer;
            min-width: 5px;
            max-width: 5px;
            flex-grow: 0;
            font-family: Arial;
            font-size: 12px;
            user-select: none;
            padding: 12px 24px 0 0;

            &:hover:before {
                color: var(--active--color, inherit);
            }

            &:before {
                font-family: var(--button--font-family, inherit);
                color: var(--inactive--color, #666);
                content: var(--transpose-button--content, "\21C4");
            }
        }
    }

    .sort-icon {
        margin-left: 4px;
        cursor: pointer;
        font-family: var(--button--font-family, inherit);
        font-display: block;
        &:hover {
            opacity: 1;
            color: var(--active--color, inherit);
        }

        &.desc:before {
            content: var(--sort-order-desc--content, "\2193");
        }

        &.asc:before {
            content: var(--sort-order-asc--content, "\2191");
        }

        &.none:before {
            content: var(--sort-order-none--content, "-");
        }

        &.asc.abs:before {
            content: var(--sort-order-asc-abs--content, "\21E7");
        }

        &.desc.abs:before {
            content: var(--sort-order-desc-abs--content, "\21E9");
        }

        &.col.asc:before {
            content: var(--sort-order-col-asc--content, "\2192");
        }

        &.col.desc:before {
            content: var(--sort-order-col-desc--content, "\2190");
        }

        &.col.asc.abs:before {
            content: var(--sort-order-col-asc-abs--content, "\21E8");
        }

        &.col.desc.abs:before {
            content: var(--sort-order-col-desc-abs--content, "\21E6");
        }
    }
}