Merge branch 'topic-core-refactor' into misc-ui-4

Toolbar styling, edit colors
- Toolbar now with color bg for better tie-in with edit area visually; - Edit colors refined for Snow theme, WIP;
2025-06-25 18:50:11 +00:00 · 2019-01-15 16:42:03 -08:00 · 2019-01-10 17:35:22 -08:00 · 2019-01-08 14:42:02 -08:00 · 2019-01-04 17:56:10 -08:00 · 2019-01-04 17:06:26 -08:00
12 changed files with 184 additions and 117 deletions
--- a/src/plugins/folderView/components/ListItem.vue
+++ b/src/plugins/folderView/components/ListItem.vue
@ -4,9 +4,8 @@
        @click="navigate">
        <td class="c-list-item__name">
            <a :href="objectLink" ref="objectLink">
-                <div class="c-list-item__type-icon"
-                     :class="item.type.cssClass"></div>
-                {{item.model.name}}
+                <div class="c-list-item__type-icon" :class="item.type.cssClass"></div>
+                <div class="c-list-item__name-value">{{item.model.name}}</div>
            </a>
        </td>
        <td class="c-list-item__type">{{ item.type.name }}</td>
@ -20,17 +19,24 @@

    /******************************* LIST ITEM */
    .c-list-item {
-        &__name {
-            @include ellipsize();
+        &__name a {
+            display: flex;
+
+            > * + * { margin-left: $interiorMarginSm; }
        }

        &__type-icon {
+            // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
            color: $colorKey;
            display: inline-block;
            width: 1em;
            margin-right:$interiorMarginSm;
        }

+        &__name-value {
+            @include ellipsize();
+        }
+
        &.is-alias {
            // Object is an alias to an original.
            [class*='__type-icon'] {
@ -48,7 +54,6 @@
            }
        }
    }
-
 </style>

 <script>
--- a/src/plugins/folderView/components/ListView.vue
+++ b/src/plugins/folderView/components/ListView.vue
@ -78,9 +78,12 @@

        td {
            $p: floor($interiorMargin * 1.5);
-            font-size: 1.1em;
+            @include ellipsize();
+            line-height: 120%; // Needed for icon alignment
+            max-width: 0;
            padding-top: $p;
            padding-bottom: $p;
+            width: 25%;

            &:not(.c-list-item__name) {
                color: $colorItemFgDetails;
--- a/src/plugins/notebook/res/templates/notebook.html
+++ b/src/plugins/notebook/res/templates/notebook.html
@ -5,21 +5,17 @@
                @input="search"
                @clear="search">
            </search>
-        <div class="c-notebook__controls">
-            <div class="select c-notebook__controls__time">
-                <select v-model="showTime">
-                    <option value="0" selected="selected">Show all</option>
-                    <option value="1">Last hour</option>
-                    <option value="8">Last 8 hours</option>
-                    <option value="24">Last 24 hours</option>
-                </select>
-            </div>
-            <div class="select c-notebook__controls__sort">
-                <select v-model="sortEntries">
-                    <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
-                    <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
-                </select>
-            </div>
+        <div class="c-notebook__controls ">
+            <select class="c-notebook__controls__time" v-model="showTime">
+                <option value="0" selected="selected">Show all</option>
+                <option value="1">Last hour</option>
+                <option value="8">Last 8 hours</option>
+                <option value="24">Last 24 hours</option>
+            </select>
+            <select class="c-notebook__controls__time" v-model="sortEntries">
+                <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
+                <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
+            </select>
        </div>
    </div>
    <div class="c-notebook__drag-area icon-plus"
--- a/src/plugins/plot/res/templates/plot-options-edit.html
+++ b/src/plugins/plot/res/templates/plot-options-edit.html
@ -41,28 +41,24 @@
                    <div class="grid-cell label"
                         title="The field to be plotted as a value for this series.">Value</div>
                    <div class="grid-cell value">
-                        <div class="select">
-                            <select ng-model="form.yKey">
-                                <option ng-repeat="option in yKeyOptions"
-                                        value="{{option.value}}"
-                                        ng-selected="option.value == form.yKey">
-                                    {{option.name}}
-                                </option>
-                            </select>
-                        </div>
+                        <select ng-model="form.yKey">
+                            <option ng-repeat="option in yKeyOptions"
+                                    value="{{option.value}}"
+                                    ng-selected="option.value == form.yKey">
+                                {{option.name}}
+                            </option>
+                        </select>
                    </div>
                </li>
                <li class="grid-row">
                    <div class="grid-cell label"
                         title="The line rendering style for this series.">Line Style</div>
                    <div class="grid-cell value">
-                        <div class="select">
-                            <select ng-model="form.interpolate">
-                                <option value="none">None</option>
-                                <option value="linear">Linear interpolate</option>
-                                <option value="stepAfter">Step after</option>
-                            </select>
-                        </div>
+                        <select ng-model="form.interpolate">
+                            <option value="none">None</option>
+                            <option value="linear">Linear interpolate</option>
+                            <option value="stepAfter">Step after</option>
+                        </select>
                    </div>
                </li>
                <li class="grid-row">
@ -160,15 +156,13 @@
                <div class="grid-cell label"
                     title="The position of the legend relative to the plot display area.">Position</div>
                <div class="grid-cell value">
-                    <div class="select">
-                        <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>
-                            <option value="left">Left</option>
-                        </select>
-                    </div>
+                    <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>
+                        <option value="left">Left</option>
+                    </select>
                </div>
            </li>
            <li class="grid-row">
@ -180,15 +174,13 @@
                <div class="grid-cell label"
                     title="What to display in the legend when it's collapsed.">When collapsed show</div>
                <div class="grid-cell value">
-                    <div class="select">
-                        <select ng-model="form.valueToShowWhenCollapsed">
-                            <option value="none">nothing</option>
-                            <option value="nearestTimestamp">nearest timestamp</option>
-                            <option value="nearestValue">nearest Value</option>
-                            <option value="min">minimum value</option>
-                            <option value="max">maximum value</option>
-                        </select>
-                    </div>
+                    <select ng-model="form.valueToShowWhenCollapsed">
+                        <option value="none">Nothing</option>
+                        <option value="nearestTimestamp">Nearest timestamp</option>
+                        <option value="nearestValue">Nearest value</option>
+                        <option value="min">Minimum value</option>
+                        <option value="max">Maximum value</option>
+                    </select>
                </div>
            </li>
            <li class="grid-row">
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@ -34,7 +34,7 @@
    <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}">
        <table class="c-table__headers c-telemetry-table__headers">
            <thead>
-                <tr>
+                <tr class="c-telemetry-table__headers__name">
                    <table-column-header
                        v-for="(title, key, headerIndex) in headers"
                        :key="key"
@ -50,7 +50,7 @@
                        :sortOptions="sortOptions"
                        >{{title}}</table-column-header>
                </tr>
-                <tr>
+                <tr class="c-telemetry-table__headers__filter">
                    <table-column-header
                        v-for="(title, key, headerIndex) in headers"
                        :key="key"
@ -214,6 +214,22 @@
        }
    }

+    /******************************* EDITING */
+    .is-editing {
+        .c-telemetry-table__headers__name {
+            th[draggable],
+            th[draggable] > * {
+                cursor: move;
+            }
+
+            th[draggable]:hover {
+                $b: $editSelectableColor;
+                background: $b;
+                > * { background: $b; }
+            }
+        }
+    }
+
    /******************************* LEGACY */
    .s-status-taking-snapshot,
    .overlay.snapshot {
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@ -55,7 +55,7 @@ $basicCr: 4px;

 // Base colors
 $colorBodyBg: #393939;
-$colorBodyFg: #aaa;
+$colorBodyFg: #aaaaaa;
 $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
@ -65,7 +65,7 @@ $colorStatusBarFg: $colorBodyFg;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
+$colorKeyHov: #26d8ff;
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
@ -116,13 +116,16 @@ $editColorBgBase: darken($editColor, $dlSpread);
 $editColorBg: rgba($editColorBgBase, 0.2);
 $editColorFg: lighten($editColor, $dlSpread);
 $editColorHov: lighten($editColor, 20%);
+
 // Canvas
-$editCanvasColorBg: $editColorBg; //#002524;
-$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
+$editCanvasColorBg: $editColorBg;
+$editCanvasColorGrid: rgba($editColorBgBase, 0.4);
+
 // Selectable
 $editSelectableColor: #006563;
 $editSelectableColorFg: lighten($editSelectableColor, 20%);
 $editSelectableColorHov: lighten($editSelectableColor, 10%);
+
 // Selectable selected
 $editSelectableColorSelected: $editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
@ -222,6 +225,13 @@ $overlayColorFg: $colorMenuFg;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);

+// Toolbar
+$toolBarEditColorBg: darken($editColorBgBase, 5%);
+$toolBarEditColorFg: lighten($editColorBgBase, 20%);
+$toolBarEditColorBtnFg: $toolBarEditColorFg;
+$toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%);
+$toolBarEditColorBtnFgHover: lighten($toolBarEditColorFg, 10%);
+
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
@ -371,17 +381,6 @@ $createBtnTextTransform: uppercase;
    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }

-/**************************************************** NOT USED, LEAVE FOR NOW */
-// Slider controls, not in use
-/*
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.07);
-$sliderColorRange: rgba($sliderColorBase, 0.2);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: darken($sliderColorBase, 20%);
-$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange;
-$sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 2px;
-*/
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px);
+}
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@ -69,7 +69,7 @@ $colorStatusBarFg: $colorBodyFg;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
+$colorKeyHov: #26d8ff;
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
@ -120,13 +120,16 @@ $editColorBgBase: darken($editColor, $dlSpread);
 $editColorBg: rgba($editColorBgBase, 0.2);
 $editColorFg: lighten($editColor, $dlSpread);
 $editColorHov: lighten($editColor, 20%);
+
 // Canvas
-$editCanvasColorBg: $editColorBg; //#002524;
-$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
+$editCanvasColorBg: $editColorBg;
+$editCanvasColorGrid: rgba($editColorBgBase, 0.4);
+
 // Selectable
 $editSelectableColor: #006563;
 $editSelectableColorFg: lighten($editSelectableColor, 20%);
 $editSelectableColorHov: lighten($editSelectableColor, 10%);
+
 // Selectable selected
 $editSelectableColorSelected: $editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
@ -142,7 +145,7 @@ $colorGridLines: rgba($editColor, 0.2);
 /************************************************** BROWSING */
 $browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.5);

 // Icons
 $colorIconAlias: #4af6f3;
@ -226,6 +229,13 @@ $overlayColorFg: $colorMenuFg;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);

+// Toolbar
+$toolBarEditColorBg: darken($editColorBgBase, 5%);
+$toolBarEditColorFg: lighten($editColorBgBase, 20%);
+$toolBarEditColorBtnFg: $toolBarEditColorFg;
+$toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%);
+$toolBarEditColorBtnFgHover: lighten($toolBarEditColorFg, 10%);
+
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
@ -375,6 +385,10 @@ $createBtnTextTransform: uppercase;
    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }

+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px);
+}
+
 /**************************************************** OVERRIDES */
 .c-frame {
    &:not(.no-frame) {
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@ -110,26 +110,29 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 /************************************************** EDITING */
 // Base Colors
 $dlSpread: 20%;
-$editColor: #00c7c3;
+$editColor: #6afdff;
 $editColorAlt: #9971ff;
-$editColorBgBase: darken($editColor, $dlSpread);
-$editColorBg: darken($editColor, $dlSpread);
-$editColorFg: lighten($editColor, $dlSpread);
+$editColorBgBase: lighten($editColor, 20%);
+$editColorBg: $editColor;
+$editColorFg: darken($editColor, $dlSpread);
 $editColorHov: lighten($editColor, 20%);
+
 // Canvas
-$editCanvasColorBg: #e6ffff;
-$editCanvasColorGrid: darken($editCanvasColorBg, 10%);
+$editCanvasColorBg: lighten($editColorBgBase, 5%);
+$editCanvasColorGrid: $editColorBgBase;
+
 // Selectable
-$editSelectableColor: #acdad6;
+$editSelectableColor: #00b3b1;
 $editSelectableColorFg: darken($editSelectableColor, 20%);
-$editSelectableColorHov: darken($editSelectableColor, 10%);
+$editSelectableColorHov: darken($editSelectableColor, 20%);
+
 // Selectable selected
-$editSelectableColorSelected: $editColor;
+$editSelectableColorSelected: #c60; //$editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%);
 $editSelectableColorFg: darken($editSelectableColor, 40%);
 $editSelectableBorder: 1px dotted $editSelectableColor;
 $editSelectableBorderHov: 1px dotted $editColorAlt;
-$editSelectableBorderSelected: 1px solid $editColor;
+$editSelectableBorderSelected: 1px solid $editSelectableColorSelected;
 $editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
 $editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
 $editBorderDrilledIn: 1px dashed $editColorAlt;
@ -138,7 +141,7 @@ $colorGridLines: rgba($editColor, 0.2);
 /************************************************** BROWSING */
 $browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.5);

 // Icons
 $colorIconAlias: #4af6f3;
@ -222,6 +225,13 @@ $overlayColorFg: $colorMenuFg;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1);

+// Toolbar
+$toolBarEditColorBg: darken($editColorBgBase, 5%);
+$toolBarEditColorFg: rgba(black, 0.7);
+$toolBarEditColorBtnFg: $toolBarEditColorFg;
+$toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%);
+$toolBarEditColorBtnFgHover: rgba(black, 0.9);
+
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #444;
@ -370,16 +380,6 @@ $createBtnTextTransform: uppercase;
    background: $c;
 }

-
-/**************************************************** NOT USED, LEAVE FOR NOW */
-
-// Content status
-/*
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-*/
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect($bg, $fg, lighten($bg, 20%), none);
+}
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@ -228,6 +228,17 @@ input[type=number]::-webkit-outer-spin-button {
    }
 }

+// SELECTS
+select {
+    @include appearanceNone();
+    @include themedSelect();
+    background-repeat: no-repeat, no-repeat;
+    background-position: right .4em top 90%, 0 0;
+    border: none;
+    border-radius: $controlCr;
+    padding: 1px 20px 1px $interiorMargin;
+}
+
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
    &--link {
@ -421,21 +432,31 @@ input[type=number]::-webkit-outer-spin-button {

 .c-toolbar {
    $p: $interiorMargin;
-    border-top: 1px solid $colorInteriorBorder;
+    background: $toolBarEditColorBg;
+    border-radius: $basicCr;
    height: $p + 24px; // Need to standardize the height
-    padding-top: $p;
+    padding: $p;

    &__separator {
        @include cToolbarSeparator();
    }

+    .c-click-icon,
+    .c-labeled-input {
+        color: $toolBarEditColorBtnFg;
+    }
+
    .c-click-icon {
        @include cControl();
        $pLR: $interiorMargin - 1;
        $pTB: 2px;
-        color: $colorBodyFg;
        padding: $pTB $pLR;

+        &:hover {
+            background: $toolBarEditColorBtnBgHover !important;
+            color: $toolBarEditColorBtnFgHover !important;
+        }
+
        &--swatched {
            padding-bottom: floor($pTB / 2);
            width: 2em; // Standardize the width
@ -535,7 +556,7 @@ input[type=number]::-webkit-outer-spin-button {

 input[type="range"] {
    // HTML5 range inputs
-    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    @include appearanceNone(); /* Hides the slider so that custom slider can be made */
    background: transparent; /* Otherwise white in Chrome */
    &:focus {
        outline: none; /* Removes the blue border. */
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@ -60,6 +60,16 @@
    width: $d;
 }

+@mixin appearanceNone() {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
@mixin isAlias() {
    &:after {
        color:$colorIconAlias;
@ -194,7 +204,7 @@
 }

@mixin htmlInputReset() {
-    appearance: none;
+    @include appearanceNone();
    background: transparent;
    border: none;
    border-radius: 0;
@ -263,6 +273,7 @@
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    line-height: $fs; // Remove effect on top and bottom padding
    overflow: hidden;

    &:before,
@ -272,6 +283,10 @@
        flex: 0 0 auto;
    }

+    &:before {
+        font-size: 0.9em;
+    }
+
    &:after {
        font-size: 0.8em;
    }
@ -279,15 +294,18 @@
    [class*="__label"] {
        @include ellipsize();
        display: block;
-        line-height: $fs; // Remove effect on top and bottom padding
        font-size: $fs;
    }
+
+    &[class*='icon'] > [class*="__label"] {
+        // When button holds both an icon and a label, provide margin between them.
+        margin-left: $interiorMarginSm;
+    }
 }

@mixin cButton() {
    @include cControl();
    @include themedButton();
-    //@include buttonBehavior();
    border-radius: $controlCr;
    color: $colorBtnFg;
    cursor: pointer;
@ -329,12 +347,12 @@
    // Make the icon bigger relative to its container
    @include cControl();
    $pLR: 4px;
-    $pTB: 3px;
+    $pTB: 4px;
    background: none;
    box-shadow: none;
    border-radius: $controlCr;
    cursor: pointer;
-    padding: $pTB $pLR ;
+    padding: $pTB $pLR;

    @include hover() {
        background: $colorClickIconBgHov;
@ -421,6 +439,13 @@
    }
 }

+@mixin cSelect($bg, $fg, $arwClr, $shdw) {
+    $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
+    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;
+    color: $fg;
+    box-shadow: $shdw;
+}
+
@mixin wrappedInput() {
    // An input that is wrapped. Optionally includes a __label or icon element.
    // Based on .c-search.
--- a/src/ui/components/search.vue
+++ b/src/ui/components/search.vue
@ -18,9 +18,6 @@
    .c-search {
        @include wrappedInput();

-        padding-top: 2px;
-        padding-bottom: 2px;
-
        &:before {
            // Mag glass icon
            content: $glyph-icon-magnify;
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@ -184,7 +184,6 @@
        }

        /******************************* MAIN AREA */
-
        &__main-container {
            // Wrapper for main views
            flex: 1 1 auto !important;
Author	SHA1	Message	Date
charlesh88	6db1833a45	Merge branch 'topic-core-refactor' into misc-ui-4	2019-01-15 16:42:03 -08:00
charlesh88	8b2edaa6fd	Toolbar styling, edit colors - Toolbar now with color bg for better tie-in with edit area visually; - Edit colors refined for Snow theme, WIP;	2019-01-10 17:35:22 -08:00
charlesh88	8caeed2ce5	Telemetry Table editing styles - Headers now have hover effects;	2019-01-08 14:42:02 -08:00
charlesh88	03be582b54	List View fixes - Ellipsizing now works; - Better icon and text alignment;	2019-01-04 17:56:10 -08:00
charlesh88	1ce84ee56b	Styling for selects - New cleaner styling approach; - New cSelect and appearanceNone mixins; - Converted selects in Notebook, plot-options-edit;	2019-01-04 17:06:26 -08:00
charlesh88	cb39ad8500	Merge branch 'topic-core-refactor' into misc-ui-4	2019-01-04 14:39:57 -08:00
charlesh88	74be02b6de	Various improvements - Tighten up search inputs; - Fix icon/label spacing regression in c-button--menu; - Better icon and text alignment in c-button and related;	2018-12-21 23:50:19 -08:00