@finos/perspective-viewer/dist/less/row.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 "variables";

.bordered() {
    border-color: @border-color;
    border-width: 0 0 1px 0;
}

.selected_indicator() {
    font-size: 12px;
}

:host {
    display: block;

    .row_computed {
        display: none;
        flex-direction: row;
    }
}

.dropping * {
    pointer-events: none;
}

:host #psp_row {
    display: var(--psp_row-display, flex);
    margin: var(--psp_row-margin, 0);
    overflow: visible;
    align-items: var(--column_selector--align-items, center);
    width: auto !important;
    height: auto !important;
    float: none !important;
}

:host .is_visible {
    width: var(--column_selector--width, 20px);
    min-width: var(--column_selector--width, 20px);
    height: var(--is_visible--height, auto);
    cursor: var(--is_visible--cursor, pointer);
    font-size: var(--column_selector--font-size, 14px);
    margin-top: -2px;
    display: var(--is_visible-display, none);
}

:host #sort_order {
    display: none;
    font-family: var(--button--font-family, inherit);
    margin-right: 4px;
    &:before {
        content: var(--row-sort-order--before, "-");
    }
    &:hover {
        color: var(--active--color, inherit);
    }
}

:host {
    #filter_operand {
        display: var(--filter_operand-display, none);
        margin: 0;
        padding: 0px;
        height: 19px;
        color: inherit;
        outline: none;
        border-color: var(--inactive--color, #ccc);
    }

    #filter_operator {
        margin: 0 0 0 15px;
        display: var(--filter_operator-display, none);
        height: 17px;
        &:hover {
            color: var(--active--color, inherit);
        }
    }

    #sort_order {
        cursor: pointer;
        width: 10px;
    }
}

:host {
    // &:before {
    //     content: none !important;
    // }

    select {
        margin-left: 15px;
        padding-right: 15px;
        cursor: pointer;
    }
}

@keyframes expand2 {
    from {
        transform: translateX(10px);
    }
}

@keyframes expand3 {
    from {
        transform: scale(0.9);
    }
}

:host(:hover) .is_visible {
    color: var(--active--color, --column-selector--color);
}

:host {
    border: 0px solid rgba(0, 0, 0, 0);

    #row_close {
        display: var(--row_close-display, inline);
        cursor: pointer;
        min-width: 5px;
        max-width: 5px;
        margin-right: 3px;
        flex-grow: 0;
        font-size: 10px;
        margin-left: 3px;
    }

    .is_visible:before {
        content: var(--is_visible--before, none);
    }

    .is_visible {
        color: var(--column-selector--color, #999);
        font-family: var(--column-selector--font-family, Arial) !important;
    }

    #sort_order {
        display: var(--sort_order-display, none);
        padding: var(--sort_order-padding, 0);
    }

    #row_exclamation {
        color: red;
    }

    #row_close {
        color: #999;
        font-family: Arial;
        font-size: 10px;
        &:hover {
            color: var(--active--color, inherit);
        }
    }
    #column_aggregate {
        font-family: Arial;
    }

    .row_draggable select {
        border: none;
    }

    .row_draggable select:focus {
        outline: none;
    }

    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: var(--select--background-color, white);
        color: inherit;
        border-radius: 5px;
        height: 24px;
        padding: var(--column_type--padding, 0px 0px 0px 5px);
        font-size: 12px;
    }

    .awesomplete > ul {
        border-radius: 0px;
        margin: 0px;
        border: none;
        transition: none !important;
        background: var(--plugin--background, #fff) !important;
    }

    .awesomplete > ul:before {
        content: none;
    }

    .awesomplete > input,
    input {
        .bordered();
        box-sizing: border-box;
        background-color: transparent;
    }

    .row_draggable {
        animation: var(--row_draggable--animation, expand2 0.5s ease-out);
        cursor: move;
        border-style: solid;
        background-color: var(--row_draggable-background-color, none);
        overflow: var(--row_draggable-overflow, visible);
        border-color: var(--row_draggable-border-color, none);
        border-width: var(--row_draggable-border-width, 0);
        padding: var(--row_draggable-padding, 0);
        font-size: 12px;
        flex-grow: 1;
        color: inherit;
        transition: height 0.2s;
        box-sizing: border-box;
        height: var(--row_draggable-height, 21px);
        min-height: var(--row_draggable-height, 21px);
        display: var(--row_draggable-display, flex);
        align-items: var(--row-draggable--align-items);
        flex-direction: var(--row-draggable--flex-direction, column);
        justify-content: var(--row_draggable--justify-content, center);
        margin: var(--row_draggable--margin, 0);
        transition: var(--row_draggable--transition, none);

        * {
            opacity: var(--row_draggable_children-opacity, 1);
        }

        select {
            margin: 0px 0px 0px 27px;
        }
    }

    ul {
        transition: background-color 0.2s, border-color 0.2s;
    }
}

:host(.null-column) {
    .is_visible {
        opacity: 0 !important;
    }
    .row_draggable {
        background-color: var(--null--background, transparent) !important;
        border-color: @border-color !important;
        border-width: 0 0 1px 0 !important;
    }
}

:host([drop-target]) {
    .row_draggable {
        background-color: var(
            --active--background,
            rgb(240, 240, 255)
        ) !important;
        animation: var(
            --drop-target--animation,
            var(--row_draggable--animation, expand3 0.5s ease-out)
        );
        border: var(--active--border, solid #1078d1) !important;
    }
}

:host {
    .integer:before,
    .float:before {
        content: var(
            --float--column-type--content,
            var(--column-type--content, "123")
        );
        color: var(
            --float--column-type--color,
            var(--column-type--color, #016bc6)
        );
    }

    .string:before {
        content: var(
            --string--column-type--content,
            var(--column-type--content, "abc")
        );
        color: var(
            --string--column-type--color,
            var(--column-type--color, #fe9292)
        );
    }

    .boolean:before {
        content: var(
            --boolean--column-type--content,
            var(--column-type--content, "t/f")
        );
        color: var(
            --boolean--column-type--color,
            var(--column-type--color, #999999)
        );
    }

    .date:before {
        content: var(
            --date--column-type--content,
            var(--column-type--content, "mdy")
        );
        color: var(
            --date--column-type--color,
            var(--column-type--color, #999999)
        );
    }

    .datetime:before {
        content: var(
            --datetime--column-type--content,
            var(--column-type--content, "mdy")
        );
        color: var(
            --datetime--column-type--color,
            var(--column-type--color, #999999)
        );
    }
}

.column_row() {
    font-family: var(--interface-monospace--font-family, monospace);
    position: relative;
    display: inline-block;
    padding: var(--column_type--padding, 0px 5px);
    min-width: 18px;
}

:host .column_name {
    overflow: hidden;
    max-width: var(--column_name-max-width, none);
    white-space: nowrap;
    text-overflow: ellipsis;
}

:host span#name:before {
    .column_row();
    display: var(--name-before-display, none);
    width: var(--column_type--width, auto);
}

:host #column_aggregate {
    display: var(--column_aggregate-display, none);
    font-size: 10px;
    font-family: @sans-serif-fonts;
    width: 88%;
    height: 20px;
}

:host span#name {
    flex: var(--column-name--flex, 0 1 auto);
    width: 100%;
    white-space: nowrap;
    margin: var(--column_name-margin, 0);
}