mirror of
https://github.com/nasa/openmct.git
synced 2025-02-18 16:40:58 +00:00
Misc UI 6 (#2338)
* Sanding and shimming on loading CSS - Wait spinners in the tree; - Move spinner and loading CSS from legacy to global.scss; * Misc UI 6 - Better approach to Time Conductor overflow; - Fixed main page left/right clipping issue; - Fixed table header bg styling that had issues in legacy tables; - Fixed Time Conductor datetime picker clipping issue; - New .c-message--simple for use in Summary Widgets; - Better styling for header in empty Tabs view; - Fixed Chrome 73 scrolling bug in Summary Widgets; - Fixed problem in Inspector <li> elements from new wait spinner; - Fixed color of <a> tags in tables to be more visible; styling; * Misc UI 6 - Fix VISTA session selector not scrolling (Chrome 73 overflow bug); * Misc UI 6 - Fix VISTA session selector not scrolling (Chrome 73 overflow bug);
This commit is contained in:
Charles Hacskaylo
Deep Tailor
parent
d36441db73
commit
57443d227d
@ -36,7 +36,7 @@
|
||||
|
||||
.c-message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMarginLg;
|
||||
@ -66,6 +66,17 @@
|
||||
font-size: 1.2em; // TEMP
|
||||
}
|
||||
|
||||
&--simple {
|
||||
// Icon and text elements only
|
||||
&:before {
|
||||
font-size: 30px !important;
|
||||
}
|
||||
|
||||
[class*='__text'] {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** LEGACY */
|
||||
&.message-severity-info:before {
|
||||
@include legacyMessage();
|
||||
|
||||
@ -3,11 +3,9 @@
|
||||
<div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
|
||||
<div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
|
||||
</a>
|
||||
<div class="c-summary-widget__message holder flex-elem t-message-inline c-message message-severity-alert t-message-widget-no-data">
|
||||
<div class="w-message-contents l-message-body-only">
|
||||
<div class="message-body">
|
||||
You must add at least one telemetry object to edit this widget.
|
||||
</div>
|
||||
<div class="js-summary-widget__message c-summary-widget__message c-message c-message--simple message-severity-alert">
|
||||
<div class="c-summary-widget__text">
|
||||
You must add at least one telemetry object to edit this widget.
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
|
||||
|
||||
@ -81,6 +81,7 @@
|
||||
}
|
||||
|
||||
&__empty-message {
|
||||
background: rgba($colorBodyFg, 0.1);
|
||||
color: rgba($colorBodyFg, 0.7);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
|
||||
@ -126,7 +126,6 @@
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 20px auto 1fr auto;
|
||||
grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__mode-icon {
|
||||
|
||||
@ -80,7 +80,7 @@ $formLabelW: 30%;
|
||||
$waitSpinnerD: 32px;
|
||||
$waitSpinnerTreeD: 20px;
|
||||
$waitSpinnerBorderW: 5px;
|
||||
$waitSpinnerTreeBorderW: 4px;
|
||||
$waitSpinnerTreeBorderW: 3px;
|
||||
/*************** Messages */
|
||||
$messageIconD: 80px;
|
||||
$messageListIconD: 32px;
|
||||
|
||||
@ -143,7 +143,7 @@
|
||||
@include nice-input();
|
||||
padding: $interiorMargin;
|
||||
position: relative;
|
||||
min-height: 150px;
|
||||
min-height: 0; // Chrome 73 overflow bug fix
|
||||
height: 100%;
|
||||
>.wrapper {
|
||||
$p: $interiorMargin;
|
||||
|
||||
@ -19,8 +19,7 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/******************************* RESETS */
|
||||
/******************************************************** RESETS */
|
||||
*,
|
||||
:before,
|
||||
:after {
|
||||
@ -31,7 +30,7 @@ div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/******************************* UTILITIES */
|
||||
/******************************************************** UTILITIES */
|
||||
.u-contents {
|
||||
display: contents;
|
||||
}
|
||||
@ -45,7 +44,7 @@ div {
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* BROWSER ELEMENTS */
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
body.desktop {
|
||||
::-webkit-scrollbar {
|
||||
box-sizing: border-box;
|
||||
@ -75,7 +74,7 @@ body.desktop {
|
||||
}
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
/******************************************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
cursor: pointer;
|
||||
@ -167,7 +166,6 @@ body.desktop .has-local-controls {
|
||||
|
||||
/******************************************************** SELECTION AND EDITING */
|
||||
// Provides supporting styles for Display Layouts and augmented legacy Fixed Position view
|
||||
|
||||
.c-grid,
|
||||
.c-grid__x,
|
||||
.c-grid__y {
|
||||
@ -204,169 +202,88 @@ body.desktop .has-local-controls {
|
||||
}
|
||||
}
|
||||
|
||||
/************************** LEGACY */
|
||||
|
||||
mct-container {
|
||||
/******************************************************** STATES */
|
||||
@mixin spinner($b: 5px, $c: $colorKey) {
|
||||
animation-name: rotation-centered;
|
||||
animation-duration: 0.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
border-color: rgba($c, 0.25);
|
||||
border-top-color: rgba($c, 1.0);
|
||||
border-style: solid;
|
||||
border-width: $b;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
left: 50%; top: 50%;
|
||||
transform-origin: center;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", monospace;
|
||||
font-size: 0.7em;
|
||||
line-height: 150%;
|
||||
white-space: pre;
|
||||
.wait-spinner {
|
||||
@include spinner($waitSpinnerBorderW, $colorKey);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
&.inline {
|
||||
display: inline-block !important;
|
||||
margin-right: $interiorMargin;
|
||||
position: relative !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.codehilite {
|
||||
@extend .code;
|
||||
background-color: rgba($colorBodyFg, 0.1);
|
||||
padding: 1em;
|
||||
.loading {
|
||||
// Can be applied to any block element with height and width
|
||||
pointer-events: none;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
}
|
||||
&:before {
|
||||
@include spinner($waitSpinnerBorderW, $colorLoadingFg);
|
||||
height: $waitSpinnerD; width: $waitSpinnerD;
|
||||
z-index: 10;
|
||||
}
|
||||
&:after {
|
||||
@include abs();
|
||||
background: $colorLoadingBg;
|
||||
display: block;
|
||||
z-index: 9;
|
||||
}
|
||||
&.c-tree__item {
|
||||
$d: $waitSpinnerTreeD;
|
||||
$spinnerL: 19px + $d/2;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: $spinnerL + $d/2 + $interiorMargin;
|
||||
background: $colorLoadingBg;
|
||||
min-height: 5px + $d;
|
||||
|
||||
.c-tree__item__label {
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:before {
|
||||
height: $d;
|
||||
width: $d;
|
||||
border-width: 4px;
|
||||
left: $spinnerL;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.c-loading--overlay {
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
|
||||
*[disabled],
|
||||
.disabled,
|
||||
a.disabled {
|
||||
.disabled {
|
||||
opacity: $controlDisabledOpacity;
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.s-status-missing {
|
||||
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
|
||||
.t-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
|
||||
.item .t-item-icon-glyph:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Object header. Expects .s-status-missing to be applied to mct-representation.object-header
|
||||
&.object-header {
|
||||
.type-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree item. Expects .s-status-missing to be applied to .tree-item,
|
||||
// and mct-representation.search-item
|
||||
&.tree-item,
|
||||
&.search-item {
|
||||
> .rep-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
// aka selection = "None". Used in palettes and their menu buttons.
|
||||
$c: red;
|
||||
$s: 48%;
|
||||
$e: 52%;
|
||||
background-image: linear-gradient(-45deg,
|
||||
transparent $s - 5%,
|
||||
$c $s,
|
||||
$c $e,
|
||||
transparent $e + 5%
|
||||
);
|
||||
box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.scrolling,
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
&.scroll-pad {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll--persist {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.slidable {
|
||||
cursor: move; // Fallback
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
&.horz {
|
||||
cursor: col-resize;
|
||||
}
|
||||
&.vert {
|
||||
cursor: row-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ds {
|
||||
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden,
|
||||
.t-main-view .hide-in-t-main-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide-nice {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: rgba(#fff, 0.2);
|
||||
}
|
||||
|
||||
.comma-list span {
|
||||
&:not(:first-child) {
|
||||
&:before {
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -461,7 +461,7 @@ body.mobile.phone {
|
||||
width: $ruleLabelW;
|
||||
}
|
||||
|
||||
.t-message-widget-no-data {
|
||||
.js-summary-widget__message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -508,7 +508,7 @@ body.mobile.phone {
|
||||
&.expanded-widget-rules {
|
||||
.widget-rules-wrapper {
|
||||
min-height: 50px;
|
||||
height: auto;
|
||||
height: 100%; // Fix for Chrome 73 scrolling bug
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
}
|
||||
@ -520,7 +520,7 @@ body.mobile.phone {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
.t-message-widget-no-data {
|
||||
.js-summary-widget__message {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@ -1177,79 +1177,6 @@ body.desktop {
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************* WAIT SPINNERS */
|
||||
@mixin spinner($b: 5px, $c: $colorKey) {
|
||||
animation-name: rotation-centered;
|
||||
animation-duration: 0.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
border-color: rgba($c, 0.25);
|
||||
border-top-color: rgba($c, 1.0);
|
||||
border-style: solid;
|
||||
border-width: $b;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%; top: 50%;
|
||||
transform-origin: center;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.wait-spinner {
|
||||
@include spinner($waitSpinnerBorderW, $colorKey);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
&.inline {
|
||||
display: inline-block !important;
|
||||
margin-right: $interiorMargin;
|
||||
position: relative !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
// Can be applied to any block element with height and width
|
||||
pointer-events: none;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
}
|
||||
&:before {
|
||||
@include spinner($waitSpinnerBorderW, $colorLoadingFg);
|
||||
height: $waitSpinnerD; width: $waitSpinnerD;
|
||||
z-index: 10;
|
||||
}
|
||||
&:after {
|
||||
@include abs();
|
||||
background: $colorLoadingBg;
|
||||
display: block;
|
||||
z-index: 9;
|
||||
}
|
||||
&.tree-item.t-wait-node {
|
||||
$d: $waitSpinnerTreeD;
|
||||
$spinnerL: $interiorMargin + 19px + $d/2;
|
||||
padding-left: $spinnerL + $d/2 + $interiorMargin;
|
||||
.t-title-label {
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:before {
|
||||
height: $d;
|
||||
width: $d;
|
||||
border-width: 4px;
|
||||
left: $spinnerL;
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.c-loading--overlay {
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************* FLEX STYLES */
|
||||
.l-flex-row,
|
||||
.l-flex-col {
|
||||
@ -1514,6 +1441,10 @@ body.desktop {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
mct-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
.outer-holder {
|
||||
background: $colorMenuBg;
|
||||
@ -1579,3 +1510,157 @@ body.desktop {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", monospace;
|
||||
font-size: 0.7em;
|
||||
line-height: 150%;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.codehilite {
|
||||
@extend .code;
|
||||
background-color: rgba($colorBodyFg, 0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.s-status-missing {
|
||||
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
|
||||
.t-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
|
||||
.item .t-item-icon-glyph:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Object header. Expects .s-status-missing to be applied to mct-representation.object-header
|
||||
&.object-header {
|
||||
.type-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree item. Expects .s-status-missing to be applied to .tree-item,
|
||||
// and mct-representation.search-item
|
||||
&.tree-item,
|
||||
&.search-item {
|
||||
> .rep-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
// aka selection = "None". Used in palettes and their menu buttons.
|
||||
$c: red;
|
||||
$s: 48%;
|
||||
$e: 52%;
|
||||
background-image: linear-gradient(-45deg,
|
||||
transparent $s - 5%,
|
||||
$c $s,
|
||||
$c $e,
|
||||
transparent $e + 5%
|
||||
);
|
||||
box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.scrolling,
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
&.scroll-pad {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll--persist {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.slidable {
|
||||
cursor: move; // Fallback
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
&.horz {
|
||||
cursor: col-resize;
|
||||
}
|
||||
&.vert {
|
||||
cursor: row-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ds {
|
||||
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden,
|
||||
.t-main-view .hide-in-t-main-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide-nice {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: rgba(#fff, 0.2);
|
||||
}
|
||||
|
||||
.comma-list span {
|
||||
&:not(:first-child) {
|
||||
&:before {
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -25,9 +25,12 @@ table {
|
||||
width: 100%;
|
||||
|
||||
thead {
|
||||
background: $colorTabHeaderBg;
|
||||
th + th {
|
||||
border-left: 1px solid $colorTabHeaderBorder;
|
||||
th {
|
||||
background: $colorTabHeaderBg;
|
||||
|
||||
+ th {
|
||||
border-left: 1px solid $colorTabHeaderBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,6 +49,8 @@ table {
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
a { color: $colorBtnMajorBg; }
|
||||
}
|
||||
|
||||
div.c-table {
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
.l-pane__contents {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
@ -242,7 +242,10 @@
|
||||
|
||||
.is-editing {
|
||||
.l-shell__main-container {
|
||||
$m: 3px;
|
||||
box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
|
||||
margin-left: $m;
|
||||
margin-right: $m;
|
||||
|
||||
&[s-selected] {
|
||||
// Provide a clearer selection context articulation for the main edit area
|
||||
|
||||
@ -9,15 +9,15 @@
|
||||
</div>
|
||||
|
||||
<!-- loading -->
|
||||
<span v-if="isLoading"
|
||||
class="loading">
|
||||
</span>
|
||||
<div class="c-tree-and-search__loading loading"
|
||||
v-if="isLoading"></div>
|
||||
<!-- end loading -->
|
||||
|
||||
<div class="c-tree-and-search__no-results" v-if="treeItems.length === 0">
|
||||
No results found
|
||||
</div>
|
||||
<ul class="c-tree-and-search__tree c-tree">
|
||||
<ul class="c-tree-and-search__tree c-tree"
|
||||
v-if="!isLoading">
|
||||
<tree-item v-for="treeItem in treeItems"
|
||||
:key="treeItem.id"
|
||||
:node="treeItem">
|
||||
@ -41,6 +41,10 @@
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__no-results {
|
||||
font-style: italic;
|
||||
opacity: 0.6;
|
||||
@ -54,10 +58,16 @@
|
||||
|
||||
.c-tree {
|
||||
@include userSelectNone();
|
||||
height: 100%; // Chrome 73 overflow bug fix
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-right: $interiorMargin;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
&.c-tree__item-h { display: block; }
|
||||
}
|
||||
|
||||
.c-tree {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@ -11,14 +11,12 @@
|
||||
</object-label>
|
||||
</div>
|
||||
<ul v-if="expanded" class="c-tree">
|
||||
|
||||
<!-- loading -->
|
||||
<li
|
||||
class="loading"
|
||||
<li class="c-tree__item-h"
|
||||
v-if="isLoading && !loaded">
|
||||
<div class="c-tree__item loading">
|
||||
<span class="c-tree__item__label">Loading...</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- end loading -->
|
||||
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user