ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-29 15:43:52 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Inspector styling

Browse Source 
- Moved legacy CSS as needed into MctInspector component;
This commit is contained in:
charlesh88 2018-08-17 17:48:20 -07:00
parent e4420c17c6
commit bea135a221
3 changed files with 81 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles-new/_constants.scss
View File

@ -15,6 +15,7 @@ $interiorMarginLg: 10px;
$inputTextPTopBtm: 2px;
$inputTextPLeftRight: 5px;
$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
$treeItemIndent: 16px;
$treeTypeIconW: 18px;
/************************** VISUAL */

4
src/styles-new/legacy-styles.scss
View File

@ -19,7 +19,7 @@
@import "../styles/helpers/bubbles";
@import "../styles/helpers/splitter";
@import "../styles/helpers/wait-spinner";
@import "../styles/inspector";
//@import "../styles/inspector";
//
//!********************************* CONTROLS *!
//@import "../styles/controls/breadcrumb";
@ -46,7 +46,7 @@
//@import "../styles/search/search";
//@import "../styles/mobile/search/search";
@import "../styles/overlay/overlay";
//@import "../styles/tree/tree";
@import "../styles/tree/tree";
@import "../styles/object-label";
//@import "../styles/mobile/tree";
@import "../styles/user-environ/frame";

97
src/ui/components/layout/MctInspector.vue
View File

@ -26,7 +26,6 @@
grid-column: 1 / 3;
}
/******************************* INSPECTOR */
.c-inspector {
display: flex;
flex-flow: column nowrap;
@ -50,6 +49,22 @@
display: contents;
}
h2 {
@include grid-two-column-span-cols;
border-radius: $controlCr;
background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg;
font-size: 100%;
font-weight: normal;
margin: $interiorMarginLg 0 $interiorMarginSm 0;
padding: $interiorMarginSm $interiorMargin;
text-transform: uppercase;
&.first {
margin-top: 0;
}
}
.grid-properties {
.label {
color: $colorInspectorPropName;
@ -80,26 +95,9 @@
}
// Properties grids
.grid-properties, // LEGACY
.l-grid-properties {
@include grid-two-column;
h2 {
// Headers for .l-inspector-part elements
@include grid-two-column-span-cols;
border-radius: $controlCr;
background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg;
font-size: 0.9rem;
font-weight: normal;
margin: $interiorMarginLg 0 $interiorMarginSm 0;
padding: $interiorMarginSm $interiorMargin;
text-transform: uppercase;
&.first {
margin-top: 0;
}
}
}
.grid-row {
@ -125,6 +123,67 @@
border-top: 1px solid $colorInspectorSectionHeaderBg;
}
}
/************************************************************** LEGACY STYLES */
.tree {
.grid-properties {
margin-left: $treeItemIndent + $interiorMarginLg;
}
}
.inspector-location {
display: inline-block;
.location-item {
$h: 1.2em;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
line-height: $h;
position: relative;
padding: 2px 4px;
.t-object-label {
.t-item-icon {
height: $h;
margin-right: $interiorMarginSm;
}
}
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.icon {
color: $colorItemTreeIconHover;
}
}
}
&:not(.last) .t-object-label .t-title-label:after {
color: pushBack($colorInspectorFg, 15%);
content: '\e904';
display: inline-block;
font-family: symbolsfont;
font-size: 8px;
font-style: normal !important;
line-height: inherit;
margin-left: $interiorMarginSm;
width: 4px;
}
}
// Elements pool
.holder-elements {
.current-elements {
position: relative;
.tree-item {
.t-object-label {
// Elements pool is a flat list, so don't indent items.
/*font-size: 0.75rem;*/
left: 0;
}
}
}
}
}