openmct/platform/commonUI/general/res/sass/_widgets.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.
 *****************************************************************************/

/************************************************************* WIDGET OBJECT */
.l-summary-widget {
    // Widget layout classes here
    @include ellipsize();
    display: inline-block;
    text-align: center;
    .widget-label:before {
        // Widget icon
        font-size: 0.9em;
        margin-right: $interiorMarginSm;
    }
}

.s-summary-widget {
    // Widget style classes here
    @include boxShdw($shdwBtns);
    border-radius: $basicCr;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    cursor: default;
    font-size: 0.8rem;
    padding: $interiorMarginLg $interiorMarginLg * 2;
    &[href] {
        cursor: pointer;
    }
}

.widget-edit-holder {
    // Hide edit area when in browse mode
    display: none;
}

.widget-rule-header {
    @extend .l-flex-row;
    @include align-items(center);
    margin-bottom: $interiorMargin;
    > .flex-elem {
        &:not(:first-child) {
            margin-left: $interiorMargin;
        }
    }
}

.widget-rules-wrapper,
.widget-rule-content,
.w-widget-test-data-content {
    @include trans-prop-nice($props: (height, min-height, opacity), $dur: 250ms);
    min-height: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.widget-rules-wrapper {
    flex: 1 1 auto !important;
}

.widget-rule-content.expanded {
    overflow: visible !important;
    min-height: 50px;
    height: auto;
    opacity: 1;
    pointer-events: inherit;
}

.w-widget-test-data-content {
    .l-enable {
        padding: $interiorMargin 0;
    }

    .w-widget-test-data-items {
        max-height: 20vh;
        overflow-y: scroll !important;
        padding-right: $interiorMargin;
    }
}

.l-widget-thumb-wrapper,
.l-compact-form label {
    $ruleLabelW: 40%;
    $ruleLabelMaxW: 150px;
    @include display(flex);
    max-width: $ruleLabelMaxW;
    width: $ruleLabelW;
}

.t-message-widget-no-data {
    display: none;
}

/********************************************************** EDITING A WIDGET */
.s-status-editing > mct-view > .w-summary-widget {
    // Classes for editor layout while editing a widget
    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
    // being edited.
    @include absPosDefault();
    @extend .l-flex-col;

    > .l-summary-widget {
        // Main view of the summary widget
        // Give some airspace and center the widget in the area
        margin: 30px auto;
    }

    .widget-edit-holder {
        display: flex; // Overrides `display: none` during Browse mode
        .flex-accordion-holder {
            // Needed because otherwise accordion elements "creep" when contents expand and contract
            display: block !important;
        }
        &.expanded-widget-test-data {
            .w-widget-test-data-content {
                min-height: 50px;
                height: auto;
                opacity: 1;
                pointer-events: inherit;
            }
            &:not(.expanded-widget-rules) {
                // Test data is expanded and rules are collapsed
                // Make text data take up all the vertical space
                .flex-accordion-holder { display: flex; }
                .widget-test-data {
                    flex-grow: 999999;
                }
                .w-widget-test-data-items {
                    max-height: inherit;
                }
            }
        }
        &.expanded-widget-rules {
            .widget-rules-wrapper {
                min-height: 50px;
                height: auto;
                opacity: 1;
                pointer-events: inherit;
            }
        }
    }

    &.s-status-no-data {
        .widget-edit-holder {
            opacity: 0.3;
            pointer-events: none;
        }
        .t-message-widget-no-data {
            display: flex;
        }
    }


    .l-compact-form {
        // Overrides on .l-compact-form
        ul {
            &:last-child { margin: 0; }
            li {
                @include align-items(flex-start);
                @include flex-wrap(nowrap);
                line-height: 230%; // Provide enough space when controls wrap
                padding: 2px 0;
                &:not(.widget-rule-header) {
                    &:not(.connects-to-previous) {
                        border-top: 1px solid $colorFormLines;
                    }
                }
                &.connects-to-previous {
                    padding: $interiorMargin 0;
                }

                > label {
                    display: block; // Needed to align text to right
                    text-align: right;
                }
            }
        }

        &.s-widget-test-data-item {
            // Single line of ul li label span, etc.
            ul {
                li {
                    border: none !important;
                    > label {
                        display: inline-block;
                        width: auto;
                        text-align: left;
                    }
                }
            }
        }
    }
}

.widget-edit-holder {
    font-size: 0.8rem;
}

.widget-rules-wrapper {
    // Wrapper area that holds n rules
    box-sizing: border-box;
    overflow-y: scroll;
    padding-right: $interiorMargin;
}

.l-widget-rule,
.l-widget-test-data-item {
    box-sizing: border-box;
    margin-bottom: $interiorMarginSm;
    padding: $interiorMargin $interiorMarginLg;
}

.l-widget-thumb-wrapper {
    @extend .l-flex-row;
    @include align-items(center);
    > span { display: block; }
    .grippy-holder,
    .view-control {
        margin-right: $interiorMargin;
        width: 1em;
        height: 1em;
    }

    .widget-thumb {
        @include flex(1 1 auto);
        width: 100%;
    }
}

.rule-title {
    @include flex(0 1 auto);
    color: pullForward($colorBodyFg, 50%);
}

.rule-description {
    @include flex(1 1 auto);
    @include ellipsize();
    color: pushBack($colorBodyFg, 20%);
}

.s-widget-rule,
.s-widget-test-data-item {
    background-color: rgba($colorBodyFg, 0.1);
    border-radius: $basicCr;
}

.widget-thumb {
    @include ellipsize();
    @extend .s-summary-widget;
    @extend .l-summary-widget;
    padding: $interiorMarginSm $interiorMargin;
}

// Hide and show elements in the rule-header on hover
.l-widget-rule,
.l-widget-test-data-item {
    .grippy,
    .l-rule-action-buttons-wrapper,
    .l-condition-action-buttons-wrapper,
    .l-widget-test-data-item-action-buttons-wrapper {
        @include trans-prop-nice($props: opacity, $dur: 500ms);
        opacity: 0;
    }
    &:hover {
        .grippy,
        .l-rule-action-buttons-wrapper,
        .l-widget-test-data-item-action-buttons-wrapper {
            @include trans-prop-nice($props: opacity, $dur: 0);
            opacity: 1;
        }
    }
    .l-rule-action-buttons-wrapper {
          .t-delete {
            margin-left: 10px;
          }
    }
    .t-condition {
        &:hover {
            .l-condition-action-buttons-wrapper {
                @include trans-prop-nice($props: opacity, $dur: 0);
                opacity: 1;
            }
        }
    }
}