@finos/perspective-viewer/dist/less/status-bar.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.
 *
 */

:host {
    #status_bar {
        overflow: hidden;
        display: flex;
        align-items: center;

        .section {
            box-shadow: 8px 0px 0px -7px var(--pv-divider--color, #ccc);
            display: flex;
            align-items: center;

            &:nth-child(2) {
                flex: 1;
            }

            &:nth-child(3) {
                span:first-child:not(:last-child) {
                    margin-right: 5px;
                }

                span:last-child:not(:first-child) {
                    margin-left: 5px;
                }
            }
        }

        span {
            font-family: "Open Sans";
            font-size: 12px;
            margin: 0px 10px;
            user-select: none;
            height: 100%;
            line-height: 36px;

            &:before {
                text-transform: none;
                margin-right: 4px;
                font-family: "Material Icons";
                vertical-align: bottom;
            }

            &:hover {
                color: inherit;
            }
        }

        span.icon {
            font-family: "Material Icons";
            height: 100%;
            line-height: 36px;
            margin: 0;
        }

        span#status {
            opacity: 0.5;
            animation: twinkle 0.5s 1;

            &:before {
                color: #ccc;
                content: "circle";
            }

            &.connected,
            &.error,
            &.initializing {
                opacity: 1;
            }

            &.connected:before {
                color: rgb(51, 159, 77);
            }

            &.initializing:before {
                color: rgb(223, 198, 57);
            }

            &.error:before {
                color: rgb(252, 64, 52);
            }
        }

        span#export {
            &:before {
                content: "download";
            }
        }

        span#lock {
            &:before {
                content: "lock_open";
            }
        }

        span#reset {
            &:before {
                content: "refresh";
            }
        }

        span#copy {
            &:before {
                content: "content_copy";
            }
        }

        span.button {
            margin: 0px;
            padding: 0 5px 0px 10px;
            transition: background-color 0.2s;
            span {
                pointer-events: none;
                overflow: hidden;
                display: none;
                font-weight: 300;
            }

            &:before {
                font-size: 14px;
            }

            &:hover {
                span {
                    display: contents;
                }

                min-width: 75px;
                cursor: pointer;
                background-color: rgba(0, 0, 0, 0.05);
                transition: none;
            }
        }
    }
}

#status_bar.updating span#status {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes twinkle {
    0% {
        filter: saturate(4);
    }

    100% {
        filter: saturate(1);
    }
}