openmct/platform/commonUI/general/res/sass/plots/_legend.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2017, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
.gl-plot {
    .gl-plot-legend {
        min-height: $plotLegendH;

        .view-control {
            font-size: 1em;
            margin-right: $interiorMarginSm;
        }

        table {
            table-layout: fixed;
            tr {
                display: table-row;
            }
            th,
            td {
                @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
                display: table-cell;
                padding: 1px 3px; // Tighter than standard tabular padding
            }
        }

        &.hover-on-plot {
            // User is hovering over the plot to get a value at a point
            .hover-value-enabled {
                background-color: $legendHoverValueBg;
                border-radius: $smallCr;
                padding: 0 $interiorMarginSm;
                &:before {
                    opacity: 0.5;
                }
                &.cursor-hover,
                .value-to-display-nearestTimestamp,
                .value-to-display-nearestValue
                {
                    @extend .icon-crosshair-12px;
                    &:before {
                        font-size: 9px;
                    }
                }

                &.value-to-display-min:before {
                    content: 'MIN ';
                }
                &.value-to-display-max:before {
                    content: 'MAX ';
                }
            }
        }
    }

    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }

    /***************** GENERAL STYLES, ALL STATES */
    .plot-legend-item {
        // General styles for legend items, both expanded and collapsed legend states
        .plot-series-color-swatch {
            border-radius: $smallCr;
            border: 1px solid $colorBodyBg;
            display: inline-block;
            height: $plotSwatchD;
            width: $plotSwatchD;
        }
        .plot-series-name {
            display: inline;
        }

        .plot-series-value {
            @include ellipsize();
        }
    }

    /***************** GENERAL STYLES, COLLAPSED */
    &.plot-legend-collapsed {
        // .plot-legend-item is a span of spans.
        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }

        .plot-legend-item {
            display: flex;
            align-items: center;
            &:not(:first-child) {
                margin-left: $interiorMarginLg;
            }
            .plot-series-swatch-and-name,
            .plot-series-value {
                @include ellipsize();
                flex: 1 1 auto;
            }

            .plot-series-swatch-and-name {
                margin-right: $interiorMarginSm;
            }

            .plot-series-value {
                text-align: left;
                width: 170px;
            }
        }
    }

    /***************** GENERAL STYLES, EXPANDED */
    &.plot-legend-expanded {
        .gl-plot-legend {
            max-height: 70%;
        }

        .plot-wrapper-expanded-legend {
            overflow-y: auto;
        }

        &.plot-legend-top .gl-plot-legend {
            margin-bottom: $interiorMargin;
        }
        &.plot-legend-bottom .gl-plot-legend {
            margin-top: $interiorMargin;
        }
    }

    /***************** TOP OR BOTTOM */
    &.plot-legend-top,
    &.plot-legend-bottom {
        // General styles when legend is on the top or bottom
        @extend .l-flex-col;
        &.plot-legend-collapsed {
            // COLLAPSED ON TOP OR BOTTOM
            .plot-wrapper-collapsed-legend {
                display: flex;
                flex: 1 1 auto;
                overflow: hidden;
            }
        }
    }

    /***************** EITHER SIDE */
    &.plot-legend-left,
    &.plot-legend-right {
        @extend .l-flex-row;
        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
        &.plot-legend-expanded {
            // EXPANDED, ON EITHER SIDE
            @extend .l-flex-col;
        }

        &.plot-legend-collapsed {
            // COLLAPSED, ON EITHER SIDE
            .gl-plot-legend {
                max-height: inherit;
                width: 25%;
            }
            .plot-wrapper-collapsed-legend {
                display: flex;
                flex-flow: column nowrap;
                min-width: 0;
                flex: 1 1 auto;
                overflow-y: auto;
            }
            .plot-legend-item {
                margin-bottom: 1px;
                margin-left: 0;
                flex-wrap: wrap;
                .plot-series-swatch-and-name {
                    flex: 0 1 auto;
                    min-width: 20%;
                }
                .plot-series-value {
                    flex: 0 1 auto;
                    width: auto;
                }
            }
        }
    }

    /***************** ON BOTTOM OR RIGHT */
    &.plot-legend-right:not(.plot-legend-expanded),
    &.plot-legend-bottom {
        .gl-plot-legend {
            order: 2;
        }
        .plot-wrapper-axis-and-display-area {
            order: 1;
        }
    }
}