UI enhancements (#3217)

* UI enhancements for #3176

- Large overlay now displays fullscreen;

* UI enhancements for #3176

- Adding new ".is-in-small-container" CSS - VERY WIP!
- TODO: fix table implementation;

* UI fixes for NIRVSS client #170

- Hide table header filter inputs when table is in small container;

* UI fixes for NIRVSS client #170

- Fixing legends and plot layout when small, and within a stacked plot;
- Add new `hideLegendWhenSmall` property;
- Remove 'hidden' from plot legend position options;
- Reduced opacity of tabular headers in Espresso theme;
- VERY, VERY WIP right now!

* UI fixes for NIRVSS client #170

- Fixing legends and plot layout when small, and within a stacked plot;
- Cleanups, indention, removed commented CSS;
- Tightened up spacing in plot Y axis;

* UI enhancements for #3176

- Move local controls for plots and imagery, prevent overlapping with
 view large button when in a hidden frame in a layout;
 - Finesse local control styling for increased legibility;
 - Move l-state-indicators to avoid overlap with repositioned local
 controls, finesse styling;

* UI enhancements for #3176

- Tweak large overlay close button for better visual alignment;

* UI enhancements for #3176

- Significant improvements to lines in Display Layouts;
- Increased border-width for lines and boxes;
- Code enhanced for proper handling of horizontal and
vertical lines - but still isn't working properly;
- Renamed box-view.scss to box-and-line-views.scss;
- VERY WIP!

* Fixed incorrect grid array reference

* UI enhancements for #3176

- Fixed final issue with Display Layout line drawing object, thank you
@deeptailor!;

* UI enhancements for #3176

- Contrast enhancements and markup normalization for `c-object-label`
elements in main view, Layout frames, Inspector and overlay;
- Enhanced `l-overlay-large` layout;
- Tightened up margins and spacing in plots;
- Refined `is-paused` styling in Telemetry Tables;
- Now hide Telemetry Tables 'Export Data' button if rows are selected,
which use a separate export button;
- Layout frames now hide button's text labels when small;
- Layout frames spacing tightened up and improved;

* UI enhancements for #3176

- Tweak Snow theme constants;

* UI enhancements for #3176

- Fixed ObjectFrame getOverlayElement method, added a wrapper div
around the viewed object to properly control resulting layout in the
overlay;
- Simplified preview CSS to remove background, border and padding;
- Layout tweaks to add space between scrollbar and thumbs in Imagery
view;
- Removed dev "-info" element in LineView.vue;

* UI enhancements for #3176

- Improved styling for 'edit lock' button;

* UI enhancements for #3176

- Show Display Layout frame "-move" bar on hover, rather than select, to
 make it easier to select items with hidden frames, and only show -move
  bar's drag grippy when that frame is selected;
- `pointer-events: none` applied to table's body and plot's plot areas
when placed in a Layout and being edited, prevents distracting
interactions (plot zoom/pan, table row selection) when selecting and
moving elements in a Layout;
- Refined hover styles for c-button to use $filterHov, simplified and
normalized hover styling;
- Converted a number of old `<a>` tags to `<buttons>` to normalize
styling and use the appropriate control;
- Edit lock button is now colored when locked;

* Fix linting issue

* Minor tweaks

- Tweaked control positioning;

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

platform/commonUI/dialog/res/templates/dialog.html

@@ -31,13 +31,13 @@
     </mct-form>
 </div>
 <div class="c-overlay__button-bar">
-    <a class='c-button c-button--major'
+    <button class='c-button c-button--major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
-    </a>
+    </button>
-    <a class='c-button  '
+    <button class='c-button  '
        ng-click="ngModel.cancel()">
         Cancel
-    </a>
+    </button>
 </div>

platform/commonUI/dialog/res/templates/overlay-options.html

@@ -31,13 +31,13 @@
         </mct-include>
     </div>
     <div class="c-overlay__button-bar">
-        <a ng-repeat="option in ngModel.dialog.options"
+        <button ng-repeat="option in ngModel.dialog.options"
            href=''
            class="s-button lg"
            title="{{option.description}}"
            ng-click="ngModel.confirm(option.key)"
            ng-class="{ major: $first, subtle: !$first }">
             {{option.name}}
-        </a>
+        </button>
     </div>
 </mct-container>

platform/search/res/templates/search.html

@@ -29,9 +29,9 @@
                        type="text" tabindex="10000"
                        ng-model="ngModel.input"
                        ng-keyup="controller.search()"/>
-                <a class="c-search__clear-input clear-icon icon-x-in-circle"
+                <button class="c-search__clear-input clear-icon icon-x-in-circle"
                    ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
-                   ng-click="ngModel.input = ''; controller.search()"></a>
+                   ng-click="ngModel.input = ''; controller.search()"></button>
                 <!-- To prevent double triggering of clicks on click away, render
                    non-clickable version of the button when menu active-->
                 <a ng-if="!toggle.isActive()" class="menu-icon context-available"
@@ -45,16 +45,16 @@
                 </mct-include>
             </div>
 
-            <a class="c-button c-search__btn-cancel"
+            <button class="c-button c-search__btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
-                Cancel</a>
+                Cancel</button>
         </div>
 
         <div class="active-filter-display flex-elem holder"
              ng-class="{invisible: ngModel.filtersString === '' || ngModel.filtersString === undefined || !ngModel.search}">
-            <a class="clear-filters icon-x-in-circle s-icon-button"
+            <button class="clear-filters icon-x-in-circle s-icon-button"
-               ng-click="ngModel.checkAll = true; menuController.checkAll()"></a>Filtered by: {{ ngModel.filtersString }}
+               ng-click="ngModel.checkAll = true; menuController.checkAll()"></button>Filtered by: {{ ngModel.filtersString }}
         </div>
 
         <div class="flex-elem holder results-msg" ng-model="ngModel" ng-show="!loading && ngModel.search">
@@ -72,7 +72,7 @@
                                 ng-model="ngModel"
                                 class="l-flex-row flex-elem grows">
             </mct-representation>
-            <a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
+            <button class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</button>
         </div>
     </div>
 </div>

src/api/overlays/components/overlay-component.scss

@@ -36,6 +36,7 @@
         font-size: 1.25em;
         position: absolute;
         top: $p; right: $p;
+        z-index: 99;
     }
 
     &__contents {
@@ -43,7 +44,7 @@
         display: flex;
         flex-direction: column;
         outline: none;
-        overflow: hidden;
+        overflow: auto;
     }
 
     &__top-bar {
@@ -87,6 +88,10 @@
     .c-click-icon {
         filter: $overlayBrightnessAdjust;
     }
+
+    .c-object-label__name {
+        filter: $objectLabelNameFilter;
+    }
 }
 
 body.desktop {
@@ -100,7 +105,6 @@ body.desktop {
     }
 
     // Overlay types, styling for desktop. Appended to .l-overlay-wrapper element.
-    .l-overlay-large,
     .l-overlay-small,
     .l-overlay-fit {
         .c-overlay__outer {
@@ -118,8 +122,28 @@ body.desktop {
 
     .l-overlay-large {
         // Default
-        .c-overlay__outer {
+        $pad: $interiorMarginLg;
-            @include overlaySizing($overlayOuterMarginLg);
+        $tbPad: floor($pad * 0.8);
+        $lrPad: $pad;
+        .c-overlay {
+            &__blocker {
+                display: none;
+            }
+
+            &__outer {
+                @include overlaySizing($overlayOuterMarginFullscreen);
+                padding: $tbPad $lrPad;
+            }
+
+            &__close-button {
+                top: $pad;
+                right: $interiorMarginSm;
+            }
+        }
+
+        .l-browse-bar {
+            margin-right: $lrPad + $pad; // Don't cover close button
+            margin-bottom: $interiorMargin;
         }
     }
 

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -25,7 +25,8 @@
     class="l-layout__frame c-frame"
     :class="{
         'no-frame': !item.hasFrame,
-        'u-inspectable': inspectable
+        'u-inspectable': inspectable,
+        'is-in-small-container': size.width < 600 || size.height < 600
     }"
     :style="style"
 >
@@ -61,6 +62,13 @@ export default {
         }
     },
     computed: {
+        size() {
+            let {width, height} = this.item;
+            return {
+                width: (this.gridSize[0] * width),
+                height: (this.gridSize[1] * height)
+            };
+        },
         style() {
             let {x, y, width, height} = this.item;
             return {

src/plugins/displayLayout/components/LineView.vue

@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="l-layout__frame c-frame no-frame"
+    class="l-layout__frame c-frame no-frame c-line-view"
     :class="[styleClass]"
     :style="style"
 >
@@ -31,9 +31,15 @@
         height="100%"
     >
         <line
+            class="c-line-view__hover-indicator"
+            v-bind="linePosition"
+            vector-effect="non-scaling-stroke"
+        />
+        <line
+            class="c-line-view__line"
             v-bind="linePosition"
             :stroke="stroke"
-            stroke-width="2"
+            vector-effect="non-scaling-stroke"
         />
     </svg>
 
@@ -49,7 +55,8 @@
             class="c-frame-edit__handle"
             :class="startHandleClass"
             @mousedown="startDrag($event, 'start')"
-        ></div>
+        >
+        </div>
         <div
             class="c-frame-edit__handle"
             :class="endHandleClass"
@@ -68,14 +75,18 @@ const START_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--sw',
     2: 'c-frame-edit__handle--se',
     3: 'c-frame-edit__handle--ne',
-    4: 'c-frame-edit__handle--nw'
+    4: 'c-frame-edit__handle--nw',
+    5: 'c-frame-edit__handle--ne',
+    6: 'c-frame-edit__handle--se'
 };
 
 const END_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--ne',
     2: 'c-frame-edit__handle--nw',
     3: 'c-frame-edit__handle--sw',
-    4: 'c-frame-edit__handle--se'
+    4: 'c-frame-edit__handle--se',
+    5: 'c-frame-edit__handle--sw',
+    6: 'c-frame-edit__handle--nw'
 };
 
 export default {
@@ -158,6 +169,12 @@ export default {
         },
         vectorQuadrant() {
             let {x, y, x2, y2} = this.position;
+            if (x2 === x) {
+                return 5; // Vertical line
+            }
+            if (y2 === y) {
+                return 6; // Horizontal line
+            }
             if (x2 > x) {
                 if (y2 < y) {
                     return 1;
@@ -170,21 +187,27 @@ export default {
             return 3;
         },
         linePosition() {
-            return this.vectorQuadrant % 2 !== 0
+            let pos = {};
-                // odd vectorQuadrant slopes up
+            switch(this.vectorQuadrant) {
-                ? {
+            case 1:
-                    x1: '0%',
+            case 3:
-                    y1: '100%',
+                // slopes up
-                    x2: '100%',
+                pos = {x1: '0%', y1: '100%', x2: '100%', y2: '0%'};
-                    y2: '0%'
+                break;
+            case 5:
+                // vertical
+                pos = {x1: '0%', y1: '0%', x2: '0%', y2: '100%'};
+                break;
+            case 6:
+                // horizontal
+                pos = {x1: '0%', y1: '0%', x2: '100%', y2: '0%'};
+                break;
+            default:
+                // slopes down
+                pos = {x1: '0%', y1: '0%', x2: '100%', y2: '100%'};
+                break;
             }
-                // even vectorQuadrant slopes down
+            return pos;
-                : {
-                    x1: '0%',
-                    y1: '0%',
-                    x2: '100%',
-                    y2: '100%'
-                };
         }
     },
     watch: {
@@ -209,8 +232,7 @@ export default {
             layoutItem: this.item,
             index: this.index
         };
-        this.removeSelectable = this.openmct.selection.selectable(
+        this.removeSelectable = this.openmct.selection.selectable(this.$el, this.context, this.initSelect);
-            this.$el, this.context, this.initSelect);
     },
     destroyed() {
         if (this.removeSelectable) {
@@ -224,12 +246,17 @@ export default {
             document.body.addEventListener('mousemove', this.continueDrag);
             document.body.addEventListener('mouseup', this.endDrag);
             this.startPosition = [event.pageX, event.pageY];
-            this.dragPosition = {
+            let {x, y, x2, y2} = this.item;
-                x: this.item.x,
+            this.dragPosition = {x, y, x2, y2};
-                y: this.item.y,
+            if (x === x2 || y === y2) {
-                x2: this.item.x2,
+                if (y > y2 || x < x2) {
-                y2: this.item.y2
+                    if (this.dragging === 'start') {
-            };
+                        this.dragging = 'end';
+                    } else if (this.dragging === 'end') {
+                        this.dragging = 'start';
+                    }
+                }
+            }
             event.preventDefault();
         },
         continueDrag(event) {
@@ -263,7 +290,7 @@ export default {
         },
         calculateDragPosition(pxDeltaX, pxDeltaY) {
             let gridDeltaX = Math.round(pxDeltaX / this.gridSize[0]);
-            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[0]); // TODO: should this be gridSize[1]?
+            let gridDeltaY = Math.round(pxDeltaY / this.gridSize[1]);
             let {x, y, x2, y2} = this.item;
             let dragPosition = {x, y, x2, y2};
 

src/plugins/displayLayout/components/box-and-line-views.scss

@@ -0,0 +1,55 @@
+.c-box-view {
+    border-width: $drawingObjBorderW !important;
+    display: flex;
+    align-items: stretch;
+
+    .c-frame & {
+        @include abs();
+    }
+}
+
+.c-line-view {
+    &.c-frame {
+        box-shadow: none !important;
+    }
+
+    .c-frame-edit {
+        border: none;
+    }
+
+    .c-handle-info {
+        background: rgba(#999, 0.2);
+        padding: 2px;
+        position: absolute;
+        top: 5px; left: 5px;
+        white-space: nowrap;
+    }
+
+    svg {
+        // Prevent clipping when line is horizontal and vertical
+        min-height: 1px;
+        min-width: 1px;
+        // Must use !important to counteract setting in normalize.min.css
+        overflow: visible;
+    }
+
+    &__line {
+        stroke-linecap: round;
+        stroke-width: $drawingObjBorderW;
+    }
+
+    &__hover-indicator {
+        display: none;
+        opacity: 0.5;
+        stroke: $editFrameColorHov;
+        stroke-width: $drawingObjBorderW + 4;
+    }
+
+    .is-editing & {
+        &:hover {
+            [class*='__hover-indicator'] {
+                display: inline;
+            }
+        }
+    }
+}

src/plugins/displayLayout/components/box-view.scss

@@ -1,8 +0,0 @@
-.c-box-view {
-    display: flex;
-    align-items: stretch;
-
-    .c-frame & {
-        @include abs();
-    }
-}

src/plugins/displayLayout/components/layout-frame.scss

@@ -7,6 +7,10 @@
     > *:first-child {
         flex: 1 1 auto;
     }
+
+    &.is-in-small-container {
+        //background: rgba(blue, 0.1);
+    }
 }
 
 .c-frame-edit__move {
@@ -61,7 +65,7 @@
     .l-layout {
         /******************* 0 - 1 ITEM SELECTED */
         &:not(.is-multi-selected) {
-            > .l-layout__frame[s-selected] {
+            > .l-layout__frame {
                 > .c-so-view.has-complex-content {
                     > .c-so-view__local-controls {
                         transition: transform $transOutTime ease-in-out;
@@ -89,7 +93,7 @@
                             $lrOffset: 25%;
                             @include grippy($editFrameMovebarColorFg);
                             content: '';
-                            display: block;
+                            display: none;
                             position: absolute;
                             top: $tbOffset;
                             right: $lrOffset;
@@ -119,6 +123,13 @@
                     }
                 }
             }
+            > .l-layout__frame[s-selected] {
+                > .c-so-view.has-complex-content {
+                    + .c-frame-edit__move:before {
+                        display: block;
+                    }
+                }
+            }
         }
 
         /******************* > 1 ITEMS SELECTED */

src/plugins/imagery/components/ImageryViewLayout.vue

@@ -31,11 +31,11 @@
         <div class="c-imagery__control-bar">
             <div class="c-imagery__timestamp">{{ getTime() }}</div>
             <div class="h-local-controls flex-elem">
-                <a
+                <button
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': paused()}"
                     @click="paused(!paused())"
-                ></a>
+                ></button>
             </div>
         </div>
     </div>

src/plugins/imagery/components/imagery-view-layout.scss

@@ -42,6 +42,7 @@
         height: 135px;
         overflow-x: auto;
         overflow-y: hidden;
+        padding-bottom: $interiorMarginSm;
 
         &.is-paused {
             background: rgba($colorPausedBg, 0.4);
@@ -99,7 +100,7 @@
 .c-imagery {
     .h-local-controls--overlay-content {
         position: absolute;
-        right: $interiorMargin; top: $interiorMargin;
+        left: $interiorMargin; top: $interiorMargin;
         z-index: 2;
         background: $colorLocalControlOvrBg;
         border-radius: $basicCr;

src/plugins/plot/res/templates/mct-plot.html

@@ -21,8 +21,11 @@
 -->
 <div class="gl-plot plot-legend-{{legend.get('position')}} {{legend.get('expanded')? 'plot-legend-expanded' : 'plot-legend-collapsed'}}">
     <div class="c-plot-legend gl-plot-legend"
-         ng-class="{ 'hover-on-plot': !!highlights.length }"
+         ng-class="{
-         ng-show="legend.get('position') !== 'hidden'">
+            'hover-on-plot': !!highlights.length,
+            'is-legend-hidden': legend.get('hideLegendWhenSmall')
+        }"
+    >
         <div class="c-plot-legend__view-control gl-plot-legend__view-control c-disclosure-triangle is-enabled"
             ng-class="{ 'c-disclosure-triangle--expanded': legend.get('expanded') }"
             ng-click="legend.set('expanded', !legend.get('expanded'));">
@@ -36,7 +39,9 @@
                  ng-class="{'is-cursor-locked': !!lockHighlightPoint }">
                 <div class="c-state-indicator__alert-cursor-lock icon-cursor-lock" title="Cursor is point locked. Click anywhere in the plot to unlock."></div>
                 <div class="plot-legend-item"
-                     ng-class="{'is-missing': series.domainObject.status === 'missing'}"
+                     ng-class="{
+                        'is-missing': series.domainObject.status === 'missing'
+                    }"
                      ng-repeat="series in series track by $index"
                 >
                     <div class="plot-series-swatch-and-name">
@@ -86,7 +91,9 @@
                     </thead>
                     <tr ng-repeat="series in series"
                         class="plot-legend-item"
-                        ng-class="{'is-missing': series.domainObject.status === 'missing'}"
+                        ng-class="{
+                            'is-missing': series.domainObject.status === 'missing'
+                        }"
                     >
                         <td class="plot-series-swatch-and-name">
                             <span class="plot-series-color-swatch"
@@ -128,7 +135,7 @@
     <div class="plot-wrapper-axis-and-display-area flex-elem grows">
         <div class="gl-plot-axis-area gl-plot-y has-local-controls"
              ng-style="{
-                 width: (tickWidth + 30) + 'px'
+                 width: (tickWidth + 20) + 'px'
              }">
 
             <div class="gl-plot-label gl-plot-y-label"
@@ -146,7 +153,6 @@
                 </option>
             </select>
 
-
             <mct-ticks axis="yAxis">
                 <div ng-repeat="tick in ticks track by tick.value"
                      class="gl-plot-tick gl-plot-y-tick-label"
@@ -159,17 +165,15 @@
         </div>
         <div class="gl-plot-wrapper-display-area-and-x-axis"
              ng-style="{
-                     left: (tickWidth + 30) + 'px'
+                 left: (tickWidth + 20) + 'px'
              }">
+
+            <div class="gl-plot-display-area has-local-controls has-cursor-guides">
                 <div class="l-state-indicators">
                     <span class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
                           title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."></span>
-                <span class="l-state-indicators__alert-cursor-lock icon-cursor-lock"
-                      title="Telemetry point selection is locked. Click anywhere in the plot to unlock."
-                      ng-if="lockHighlightPoint"></span>
                 </div>
 
-            <div class="gl-plot-display-area has-local-controls has-cursor-guides">
                 <mct-ticks axis="xAxis">
                     <div class="gl-plot-hash hash-v"
                          ng-repeat="tick in ticks track by tick.value"

src/plugins/plot/res/templates/plot-options-browse.html

@@ -114,6 +114,11 @@
                      title="The position of the legend relative to the plot display area.">Position</div>
                 <div class="grid-cell value capitalize">{{ config.legend.get('position') }}</div>
             </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="Hide the legend when the plot is small">Hide when plot small</div>
+                <div class="grid-cell value">{{ config.legend.get('hideLegendWhenSmall') ? "Yes" : "No" }}</div>
+            </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Show the legend expanded by default">Expand by Default</div>

src/plugins/plot/res/templates/plot-options-edit.html

@@ -174,7 +174,6 @@
                      title="The position of the legend relative to the plot display area.">Position</div>
                 <div class="grid-cell value">
                     <select ng-model="form.position">
-                        <option value="hidden">Hidden</option>
                         <option value="top">Top</option>
                         <option value="right">Right</option>
                         <option value="bottom">Bottom</option>
@@ -182,6 +181,11 @@
                     </select>
                 </div>
             </li>
+            <li class="grid-row">
+                <div class="grid-cell label"
+                     title="Hide the legend when the plot is small">Hide when plot small</div>
+                <div class="grid-cell value"><input type="checkbox" ng-model="form.hideLegendWhenSmall"/></div>
+            </li>
             <li class="grid-row">
                 <div class="grid-cell label"
                      title="Show the legend expanded by default">Expand by default</div>

src/plugins/plot/src/configuration/LegendModel.js

@@ -48,6 +48,7 @@ define([
             return {
                 position: 'top',
                 expandByDefault: false,
+                hideLegendWhenSmall: false,
                 valueToShowWhenCollapsed: 'nearestValue',
                 showTimestampWhenExpanded: true,
                 showValueWhenExpanded: true,

src/plugins/plot/src/inspector/PlotLegendFormController.js

@@ -32,6 +32,11 @@ define([
                 modelProp: 'position',
                 objectPath: 'configuration.legend.position'
             },
+            {
+                modelProp: 'hideLegendWhenSmall',
+                coerce: Boolean,
+                objectPath: 'configuration.legend.hideLegendWhenSmall'
+            },
             {
                 modelProp: 'expandByDefault',
                 coerce: Boolean,

src/plugins/telemetryTable/components/table.scss

@@ -54,6 +54,16 @@
                 width: 100%;
             }
         }
+
+        &__filter {
+            .c-table__search {
+                padding-top: 0;
+                padding-bottom: 0;
+            }
+            .is-in-small-container & {
+                display: none;
+            }
+        }
     }
 
     &__headers__label {
@@ -86,6 +96,10 @@
         height: 0; // Fixes Chrome 73 overflow bug
         overflow-x: auto;
         overflow-y: scroll;
+
+        .is-editing & {
+            pointer-events: none;
+        }
     }
 
     /******************************* TABLES */
@@ -138,7 +152,7 @@
     }
 }
 
-/******************************* EDITING */
+/******************************* SPECIFIC CASE WRAPPERS */
 .is-editing {
     .c-telemetry-table__headers__labels {
         th[draggable],
@@ -158,8 +172,10 @@
     }
 }
 
-.paused {
+.is-paused {
-    border: 1px solid #ff9900;
+    .c-table__body-w {
+        border: 1px solid rgba($colorPausedBg, 0.8);
+    }
 }
 
 /******************************* LEGACY */

src/plugins/telemetryTable/components/table.vue

@@ -20,13 +20,16 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div class="c-table-wrapper">
+<div class="c-table-wrapper"
+     :class="{ 'is-paused': paused }"
+>
     <!-- main contolbar  start-->
     <div v-if="!marking.useAlternateControlBar"
          class="c-table-control-bar c-control-bar"
     >
         <button
             v-if="allowExport"
+            v-show="!markedRows.length"
             class="c-button icon-download labeled"
             title="Export this view's data"
             @click="exportAllDataAsCSV()"
@@ -125,7 +128,7 @@
         class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
         :class="{
             'loading': loading,
-            'paused' : paused
+            'is-paused' : paused
         }"
     >
         <div :style="{ 'max-width': widthWithScroll, 'min-width': '150px'}">

src/styles/_constants-espresso.scss

@@ -84,6 +84,10 @@ $filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 10%);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
+// Object labels
+$objectLabelTypeIconOpacity: 0.7;
+$objectLabelNameFilter: brightness(1.3);
+
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -94,7 +98,7 @@ $sideBarHeaderBg: rgba($colorBodyFg, 0.2);
 $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 
 // Status colors, mainly used for messaging and item ancillary symbols
-$colorStatusFg: #999;
+$colorStatusFg: #888;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
 $colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
@@ -205,9 +209,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
-$colorBtnCautionBg: #f16f6f;
+$colorBtnCautionBg: $colorStatusAlert;
 $colorBtnCautionBgHov: #f1504e;
-$colorBtnCautionFg: $colorBtnFg;
+$colorBtnCautionFg: $colorBtnBg;
 $colorBtnActiveBg: $colorOk;
 $colorBtnActiveFg: $colorOkFg;
 $colorBtnSelectedBg: $colorSelectedBg;
@@ -335,7 +339,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
+$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);
@@ -353,7 +357,7 @@ $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
 $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 $legendHoverValueBg: rgba($colorBodyFg, 0.2);
-$legendTableHeadBg: rgba($colorBodyFg, 0.15);
+$legendTableHeadBg: $colorTabHeaderBg;
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-maelstrom.scss

@@ -88,6 +88,10 @@ $filterHov: brightness(1.3); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 10%);
 $colorSelectedFg: pullForward($colorBodyFg, 20%);
 
+// Object labels
+$objectLabelTypeIconOpacity: 0.7;
+$objectLabelNameFilter: brightness(1.3);
+
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -209,9 +213,9 @@ $colorBtnMajorBg: $colorKey;
 $colorBtnMajorBgHov: $colorKeyHov;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
-$colorBtnCautionBg: #f16f6f;
+$colorBtnCautionBg: $colorStatusAlert;
 $colorBtnCautionBgHov: #f1504e;
-$colorBtnCautionFg: $colorBtnFg;
+$colorBtnCautionFg: $colorBtnBg;
 $colorBtnActiveBg: $colorOk;
 $colorBtnActiveFg: $colorOkFg;
 $colorBtnSelectedBg: $colorSelectedBg;
@@ -339,7 +343,7 @@ $shdwItemText: none;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: $colorBodyBg;
 $colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: rgba($colorBodyFg, 0.2);
+$colorTabHeaderBg: rgba($colorBodyFg, 0.15);
 $colorTabHeaderFg: $colorBodyFg;
 $colorTabHeaderBorder: $colorBodyBg;
 $colorTabGroupHeaderBg: pullForward($colorBodyBg, 5%);

src/styles/_constants-snow.scss

@@ -80,10 +80,14 @@ $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $colorA: #999;
 $colorAHov: $colorKey;
-$filterHov: brightness(1.3); // Tree, location items
+$filterHov: brightness(0.8) contrast(2); // Tree, location items
 $colorSelectedBg: pushBack($colorKey, 40%);
 $colorSelectedFg: pullForward($colorBodyFg, 10%);
 
+// Object labels
+$objectLabelTypeIconOpacity: 0.5;
+$objectLabelNameFilter: brightness(0.5);
+
 // Layout
 $shellMainPad: 4px 0;
 $shellPanePad: $interiorMargin, 7px;
@@ -224,7 +228,7 @@ $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
 $btnStdH: 24px;
 $colorCursorGuide: rgba(black, 0.6);
 $shdwCursorGuide: rgba(white, 0.4) 0 0 2px;
-$colorLocalControlOvrBg: rgba($colorBodyFg, 0.8);
+$colorLocalControlOvrBg: rgba($colorBodyBg, 0.8);
 $colorSelectBg: $colorBtnBg; // This must be a solid color, not a gradient, due to usage of SVG bg in selects
 $colorSelectFg: $colorBtnFg;
 $colorSelectArw: lighten($colorBtnBg, 20%);

src/styles/_constants.scss

@@ -40,11 +40,10 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
 $menuLineH: 1.5rem;
 $treeItemIndent: 16px;
 $treeTypeIconW: 18px;
-$overlayOuterMarginLg: 5%;
 $overlayOuterMarginFullscreen: 0%;
 $overlayOuterMarginDialog: 20%;
 $overlayInnerMargin: 25px;
-$mainViewPad: 2px;
+$mainViewPad: 0px;
 /*************** Items */
 $itemPadLR: 5px;
 $gridItemDesk: 175px;
@@ -57,7 +56,7 @@ $tabularTdPadTB: 2px;
 $plotYBarW: 60px;
 $plotYLabelMinH: 20px;
 $plotYLabelW: 10px;
-$plotXBarH: 35px;
+$plotXBarH: 32px;
 $plotLegendH: 20px;
 $plotLegendWidthCollapsed: 20%;
 $plotLegendWidthExpanded: 50%;
@@ -90,6 +89,8 @@ $messageIconD: 80px;
 $messageListIconD: 32px;
 /*************** Tables */
 $tableResizeColHitareaD: 6px;
+/*************** Misc */
+$drawingObjBorderW: 3px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used

src/styles/_controls.scss

@@ -57,11 +57,6 @@ button {
         line-height: 90%;
         padding: 3px 10px;
 
-        @include hover() {
-            background: $colorBtnBgHov;
-            color: $colorBtnFgHov;
-        }
-
         @include desktop() {
             font-size: 6px;
         }

src/styles/_global.scss

@@ -206,10 +206,6 @@ body.desktop .has-local-controls {
     &:hover {
         box-shadow: $browseSelectableShdwHov;
     }
-
-    &[s-selected] {
-        border: $browseSelectedBorder;
-    }
 }
 
 /**************************** EDITING */

src/styles/_legacy-plots.scss

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
+ * Open MCT, Copyright (c) 2014-2020, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -29,16 +29,19 @@ mct-plot {
     .gl-plot.child-frame {
         &:hover {
             background: rgba($editUIColorBg, 0.1);
-            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+            box-shadow: inset rgba($editUIColorBg, 0.3) 0 0 0 1px;
         }
 
         &[s-selected] {
-            border: 1px solid $editUIColorFg !important;
+            background: rgba($editUIColorBg, 0.2);
-            color: $editUIColorFg !important;
+            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
-            box-shadow: $editFrameSelectedShdw;
             z-index: 2;
         }
     }
+
+    .plot-wrapper-axis-and-display-area {
+        pointer-events: none;
+    }
 }
 
 .c-plot,
@@ -67,20 +70,14 @@ mct-plot {
 }
 
 .c-plot {
-    //$p: $mainViewPad;
     @include abs($mainViewPad);
-    //position: absolute;
-    //top: $p; right: $p; bottom: $p; left: $p;
 
     display: flex;
     flex-direction: column;
 
-    > * + * {
+    .c-control-bar {
-        margin-top: $interiorMargin;
-    }
-
-    .l-control-bar {
         flex: 0 0 auto;
+        margin-bottom: $interiorMargin;
     }
 
     .l-view-section {
@@ -114,6 +111,12 @@ mct-plot {
             }
         }
     }
+
+    .is-in-small-container & {
+        .c-control-bar {
+            display: none;
+        }
+    }
 }
 
 .gl-plot {
@@ -205,7 +208,6 @@ mct-plot {
         &.gl-plot-y-label {
             display: block;
             left: 0; top: 0; right: auto; bottom: 0;
-            padding-left: 5px;
             text-orientation: mixed;
             writing-mode: vertical-lr;
             &:before {
@@ -271,7 +273,7 @@ mct-plot {
         align-items: center;
         position: absolute;
         top: $m;
-        right: $m;
+        left: $m;
         z-index: 9;
 
         &__reset {
@@ -284,15 +286,18 @@ mct-plot {
             top: $m;
             right: $m;
         }
+
+        .c-button {
+            box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
+        }
     }
 
     .l-state-indicators {
         color: $colorPausedBg;
         position: absolute;
-        display: block;
+        cursor: help;
-        font-size: 1.5em;
+        font-size: 1.2em;
-        pointer-events: none;
+        bottom: $interiorMarginSm;
-        top: $interiorMarginSm;
         left: $interiorMarginSm;
         z-index: 2;
 
@@ -351,11 +356,11 @@ mct-plot {
 
 .gl-plot-tick {
     &.gl-plot-x-tick-label {
-        top: $interiorMargin;
+        top: $interiorMarginSm;
     }
     &.gl-plot-y-tick-label {
-        right: $interiorMargin;
+        right: $interiorMarginSm;
-        left: $interiorMargin;
+        left: auto;
     }
 }
 
@@ -452,7 +457,21 @@ mct-plot {
         @include propertiesHeader();
         margin-bottom: $interiorMarginSm;
     }
+
+    .is-in-small-container & {
+        &.is-legend-hidden {
+            display: none;
         }
+    }
+}
+
+.c-plot--stacked {
+    .is-legend-hidden {
+        // Always show the legend in a stacked plot
+        display: flex !important;
+    }
+}
+
 
 .gl-plot-legend {
     display: flex;
@@ -525,10 +544,19 @@ mct-plot {
     flex: 1 1 auto;
 }
 
-.gl-plot {
+.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
+.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
+.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
+.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
+
+.gl-plot,
+.c-plot {
     &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
     &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
 
+    &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; }
+    &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; }
+
     &.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; }
@@ -540,7 +568,6 @@ mct-plot {
 
         .plot-legend-item {
             display: flex;
-            align-items: center;
             justify-content: stretch;
 
             .plot-series-swatch-and-name,
@@ -569,8 +596,10 @@ mct-plot {
 
     /***************** TOP OR BOTTOM */
     &.plot-legend-top,
-    &.plot-legend-bottom {
+    &.plot-legend-bottom,
+    &.plot-legend-hidden {
         // General styles when legend is on the top or bottom
+        // -hidden included for legacy plots
         flex-direction: column;
 
         &.plot-legend-collapsed {
@@ -592,6 +621,7 @@ mct-plot {
     &.plot-legend-left,
     &.plot-legend-right {
         // General styles when legend is on left or right
+
         .gl-plot-legend {
             max-height: inherit;
         }
@@ -622,6 +652,7 @@ mct-plot {
                 }
             }
             .plot-legend-item {
+                margin-bottom: $interiorMarginSm;
                 margin-left: 0;
                 flex-wrap: nowrap;
                 .plot-series-swatch-and-name {
@@ -649,6 +680,31 @@ mct-plot {
     }
 }
 
+/***************** STACKED PLOT LEGEND OVERRIDES */
+.c-plot--stacked {
+    // Always show the legend on top, ignore any position setting
+    .c-plot,
+    .gl-plot {
+        flex-direction: column !important;
+
+        .c-plot-legend,
+        .gl-plot-legend {
+            margin: 0;
+            margin-bottom: $interiorMargin;
+            order: 1 !important;
+            width: 100% !important;
+
+            .plot-wrapper-collapsed-legend {
+                flex-direction: row !important;
+            }
+        }
+        .plot-wrapper-axis-and-display-area {
+            order: 2 !important;
+        }
+    }
+
+}
+
 /***************** CURSOR GUIDES */
 [class*='c-cursor-guide'] {
     box-shadow: $shdwCursorGuide;

src/styles/_mixins.scss

@@ -443,28 +443,18 @@
     }
 
     @include hover() {
-        background: $colorBtnBgHov;
+        filter: $filterHov;
-        color: $colorBtnFgHov;
     }
 
     &[class*="--major"],
     &[class*='is-active']{
         background: $colorBtnMajorBg;
         color: $colorBtnMajorFg;
-
-        @include hover() {
-            background: $colorBtnMajorBgHov;
-            color: $colorBtnMajorFgHov;
-        }
     }
 
     &[class*='--caution'] {
-        background: $colorBtnCautionBg;
+        background: $colorBtnCautionBg !important;
-        color: $colorBtnCautionFg;
+        color: $colorBtnCautionFg !important;
-
-        &:hover {
-            background: $colorBtnCautionBgHov;
-        }
     }
 }
 

src/styles/_table.scss

@@ -90,14 +90,28 @@ div.c-table {
         flex: 1 1 auto;
     }
 
-    > * + * {
+    .is-in-small-container & {
-        margin-top: $interiorMarginSm;
+        &:not(.is-paused) {
+            .c-table-control-bar {
+                display: none;
+            }
+        }
+        .c-table-control-bar {
+            .c-click-icon,
+            .c-button {
+                &__label {
+                    display: none;
+                }
+            }
+        }
     }
 }
 
 .c-table-control-bar {
     display: flex;
     flex: 0 0 auto;
+    //margin-bottom: $interiorMarginSm; // This approach to allow margin to go away when control bar is hidden
+    padding: $interiorMarginSm 0;
 
     > * + * {
         margin-left: $interiorMarginSm;

src/styles/vue-styles.scss

@@ -3,7 +3,7 @@
 @import "../plugins/condition/components/conditionals.scss";
 @import "../plugins/conditionWidget/components/condition-widget.scss";
 @import "../plugins/condition/components/inspector/conditional-styles.scss";
-@import "../plugins/displayLayout/components/box-view.scss";
+@import "../plugins/displayLayout/components/box-and-line-views";
 @import "../plugins/displayLayout/components/display-layout.scss";
 @import "../plugins/displayLayout/components/edit-marquee.scss";
 @import "../plugins/displayLayout/components/image-view.scss";

src/ui/components/ObjectFrame.vue

@@ -142,8 +142,11 @@ export default {
         getOverlayElement(childElement) {
             const fragment = new DocumentFragment();
             const header = this.getPreviewHeader();
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('l-preview-window__object-view');
+            wrapper.append(childElement);
             fragment.append(header);
-            fragment.append(childElement);
+            fragment.append(wrapper);
 
             return fragment;
         },

src/ui/components/object-frame.scss

@@ -10,25 +10,21 @@
     &__header {
         flex: 0 0 auto;
         display: flex;
+        font-size: 1.05em;
         align-items: center;
-        margin-bottom: $interiorMargin;
+        margin-bottom: $interiorMarginSm;
-
+        padding: 1px 2px;
-        &__icon {
-            flex: 0 0 auto;
-            margin-right: $interiorMarginSm;
-            opacity: 0.5;
-        }
 
+        .c-object-label {
             &__name {
-            @include headerFont(1em);
+                filter: $objectLabelNameFilter;
-            @include ellipsize();
+            }
-            flex: 0 1 auto;
         }
     }
 
     &:not(.c-so-view--no-frame) {
         border: $browseFrameBorder;
-        padding: $interiorMargin;
+        padding: 0 $interiorMarginSm;
 
         .is-editing & {
             background: rgba($colorBodyBg, 0.8);
@@ -40,9 +36,9 @@
             display: none;
         }
 
-        > .c-so-view__local-controls {
+        //> .c-so-view__local-controls {
-            top: $interiorMarginSm; right: $interiorMarginSm;
+        //    top: $interiorMarginSm; right: $interiorMarginSm;
-        }
+        //}
 
         &.is-missing {
             @include isMissing($absPos: true);
@@ -55,9 +51,19 @@
     }
 
     &__local-controls {
+        // View Large button
+        box-shadow: $colorLocalControlOvrBg 0 0 0 2px;
         position: absolute;
         top: $interiorMargin; right: $interiorMargin;
-        z-index: 2;
+        z-index: 10;
+    }
+
+    .c-click-icon,
+    .c-button {
+        // Shrink buttons a bit when they appear in a frame
+        border-radius: $smallCr !important;
+        font-size: 0.9em;
+        padding: 3px 5px;
     }
 
     &__view-large {
@@ -68,7 +74,6 @@
         > .c-so-view__view-large { display: block; }
     }
 
-    /*************************** OBJECT VIEW */
     &__object-view {
         flex: 1 1 auto;
         height: 0; // Chrome 73 overflow bug fix
@@ -79,13 +84,6 @@
             @include abs();
         }
     }
-
-    .c-click-icon,
-    .c-button {
-        // Shrink buttons a bit when they appear in a frame
-        font-size: 0.9em;
-        padding: 3px 5px;
-    }
 }
 
 .u-angular-object-view-wrapper {

src/ui/components/object-label.scss

@@ -19,6 +19,7 @@
         display: block;
         flex: 0 0 auto;
         font-size: 1.1em;
+        opacity: $objectLabelTypeIconOpacity;
     }
 
     &.is-missing {

src/ui/inspector/ObjectName.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="c-inspector__header">
     <div v-if="!multiSelect"
-         class="c-inspector__selected-w c-object-label"
+         class="c-inspector__selected c-object-label"
          :class="{'is-missing': domainObject.status === 'missing' }"
     >
         <div class="c-object-label__type-icon"
@@ -11,17 +11,20 @@
                   title="This item is missing"
             ></span>
         </div>
-
         <span v-if="!singleSelectNonObject"
               class="c-inspector__selected c-object-label__name"
         >{{ item.name }}</span>
-        <span v-if="singleSelectNonObject"
+        <div v-if="singleSelectNonObject"
-              class="c-inspector__selected  c-object-label__name c-inspector__selected--non-domain-object"
+             class="c-inspector__selected c-inspector__selected--non-domain-object  c-object-label"
-        >Layout Object</span>
+        >
-
+            <span class="c-object-label__type-icon"
+                  :class="typeCssClass"
+            ></span>
+            <span class="c-object-label__name">Layout Object</span>
+        </div>
     </div>
     <div v-if="multiSelect"
-         class="c-inspector__multiple-selected-w"
+         class="c-inspector__multiple-selected"
     >
         {{ itemsSelected }} items selected
     </div>

src/ui/inspector/inspector.scss

@@ -8,13 +8,13 @@
         margin-top: $interiorMargin;
     }
 
-    &__selected-w,
+    &__selected,
-    &__multiple-selected-w {
+    &__multiple-selected {
         @include headerFont(1.1em);
         padding: $interiorMarginSm 0;
     }
 
-    &__multiple-selected-w {
+    &__multiple-selected {
         $p: $interiorMarginLg;
         background: rgba($colorWarningLo, 0.3);
         border-radius: $basicCr;
@@ -25,10 +25,11 @@
     }
 
     &__selected {
-        @include ellipsize();
+        .c-object-label__name {
-        flex: 1 1 auto;
+            filter: $objectLabelNameFilter;
+        }
 
-        &--non-domain-object {
+        &--non-domain-object .c-object-label__name {
             font-style: italic;
         }
     }

src/ui/layout/BrowseBar.vue

@@ -55,7 +55,7 @@
                 :title="lockedOrUnlocked"
                 class="c-button"
                 :class="{
-                    'icon-lock': domainObject.locked,
+                    'icon-lock c-button--caution': domainObject.locked,
                     'icon-unlocked': !domainObject.locked
                 }"
                 @click="toggleLock(!domainObject.locked)"

src/ui/layout/layout.scss

@@ -313,6 +313,13 @@
 
     &__actions,
     &__end {
+        .c-button {
+            &[class*='icon-']:before {
+                min-width: 1em;
+                text-align: center;
+            }
+        }
+
         > * + * {
             margin-left: $interiorMargin;
         }
@@ -350,6 +357,10 @@
         flex: 0 1 auto;
     }
 
+    .c-object-label__name {
+        filter: $objectLabelNameFilter;
+    }
+
     &__object-name--w {
         @include headerFont(1.4em);
         min-width: 0;

src/ui/preview/preview-header.vue

@@ -1,11 +1,13 @@
 <template>
-<div class="l-browse-bar">
+<div class="c-preview-header l-browse-bar">
     <div class="l-browse-bar__start">
         <div
-            class="l-browse-bar__object-name--w"
+            class="l-browse-bar__object-name--w c-object-label"
-            :class="type.cssClass"
         >
-            <span class="l-browse-bar__object-name">
+            <div class="c-object-label__type-icon"
+                 :class="type.cssClass"
+            ></div>
+            <span class="l-browse-bar__object-name c-object-label__name">
                 {{ domainObject.name }}
             </span>
             <context-menu-drop-down :object-path="objectPath" />

src/ui/preview/preview.scss

@@ -13,11 +13,9 @@
     }
 
     &__object-view {
-        background: $colorBodyBg;
-        border: 1px solid $colorInteriorBorder;
         flex: 1 1 auto;
+        height: 0; // Chrome 73
         overflow: auto;
-        padding: $interiorMargin;
 
         > div:not([class]) {
             // Target an immediate child div without a class and make it display: contents