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

:host {
    width: 100%;

    div.psp-autocomplete-widget {
        color: var(--color, #666666);
        font-family: var(--interface-monospace--font-family, monospace);
        box-sizing: border-box;
        display: none;
        z-index: 100000;
        max-height: 75px;
        font-size: 12px;
        margin-top: 5px;
        overflow-x: hidden;
        overflow-y: hidden;
        word-break: break-word;

        // Single-line expressions where the autocomplete follows the caret,
        // and is positioned by the `reposition` method
        &.undocked {
            max-height: 100px;
            min-width: 150px;
            position: absolute;
            top: 24px;

            // When details panel is shown, make sure the autocomplete has
            // enough width to render everything.
            &.show-details {
                min-width: 300px;

                div.psp-autocomplete-widget__list {
                    border-right: none;
                }
            }
        }

        // Multi-line expressions where the autocomplete is static
        &.docked {
            background: var(--plugin--background, none);
            position: static;
            min-width: auto;
            width: 100%;

            div.psp-autocomplete-widget__list {
                background: var(--plugin--background, none);
                border: none;
            }

            div.psp-autocomplete-widget__details {
                position: absolute;
                left: 100%;
                z-index: 100000;
                min-width: 150px;
                max-width: 200px;
            }

            div.psp-autocomplete__item {
                border-bottom: 1px solid @border-color;
            }
        }

        div.psp-autocomplete-widget__list {
            border: 1px solid @border-color;
            background: var(--plugin--background, #fff);
            flex: auto;
            min-width: 40%;
            overflow-y: scroll;

            &.small {
                align-self: flex-start;
            }
        }

        div.psp-autocomplete-widget__details {
            background: var(--plugin--background, #fff);
            border: 1px solid @border-color;
            display: none;
            flex: auto;
            padding: 5px 5px 5px 10px;
            overflow-y: scroll;
            word-wrap: break-word;

            span {
                display: block;
            }

            .psp-autocomplete-item-detail__item--label {
                margin-bottom: 5px;
            }

            .psp-autocomplete-item-detail__item--signature {
                font-size: 11px;
                margin-bottom: 5px;
            }

            .psp-autocomplete-item-detail__item--help {
                font-size: 10px;
            }
        }

        div.psp-autocomplete__item {
            display: block;
            overflow-x: auto;
            padding: 5px;
            word-break: keep-all;

            &:hover {
                // Default colors are the same as Awesomeplete defaults to
                // achieve consistent look.
                background: var(
                    --autocomplete-hover-background,
                    hsl(200, 40%, 80%)
                );
                cursor: pointer;
            }

            &:focus,
            &[aria-selected="true"] {
                background: var(
                    --autocomplete-select-background,
                    hsl(205, 40%, 40%)
                );
                color: var(--color, #fff);
                cursor: pointer;

                span.psp-autocomplete-item__label.psp-autocomplete-item__label--column-name::before {
                    color: var(--color, #fff) !important;
                }
            }

            span.psp-autocomplete-item__label {
                &.psp-autocomplete-item__label--column-name {
                    font-family: var(
                        --interface--font-family,
                        @sans-serif-fonts
                    );

                    &:before {
                        font-family: var(
                            --interface-monospace--font-family,
                            monospace
                        );
                        position: relative;
                        display: inline-block;
                        // display: var(--name-before-display, none);
                        padding: var(--column_type--padding, 0px 5px);
                        min-width: 18px;
                        width: var(--column_type--width, auto);
                    }

                    &.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)
                        );
                    }
                }
            }
        }
    }
}