ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-17 10:20:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Apply flex layout to object header elements

Browse Source 
open #250
open #260
vista#132
Major refactoring to markup and CSS to apply
flex layout strategy to object headers;
Flex necessary to fix 'overflow: hidden' setting
applied in open90 to object-browse-bar that
was preventing the view switcher menu from
appearing;
Browse, edit, mobile, frames in layouts, etc. all
visually checked in a first go round;
Mobile classes tweaked to fix left and right
margin problems resulting from open90 changes;
z-indexing of Inspector pane and splitters changed
to allow primary pane elements to overflow beneath
when primary pane width is severely constrained;
This commit is contained in:
Charles Hacskaylo 2015-11-06 17:42:54 -08:00
parent 76e15f2963
commit 4e79de6156
13 changed files with 612 additions and 7744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -20,15 +20,17 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<span ng-controller="BrowseObjectController"> <span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex"> <div class="object-browse-bar l-flex-row">
<div class="items-select left"> <div class="items-select left flex-elem l-flex-row grows">
<mct-representation key="'back-arrow'" <mct-representation key="'back-arrow'"
mct-object="domainObject" mct-object="domainObject"
class="l-back"></mct-representation> class="flex-elem l-back"></mct-representation>
<mct-representation key="'object-header'" mct-object="domainObject"> <mct-representation key="'object-header'"
mct-object="domainObject"
class="l-flex-row flex-elem grows object-header">
</mct-representation> </mct-representation>
</div> </div>
<div class="btn-bar right"> <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
<mct-representation key="'switcher'" <mct-representation key="'switcher'"
mct-object="domainObject" mct-object="domainObject"
ng-model="representation"> ng-model="representation">

20
platform/commonUI/browse/res/templates/browse/object-header.html
View File

@ -19,12 +19,14 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class='object-header'> <!--<div class='object-header'> Moved up to browse-object.html and frame.html. TO-DO: make sure this is Ok!-->
<span class='type-icon ui-symbol'>{{type.getGlyph()}}</span> <span class='type-icon ui-symbol flex-elem'>{{type.getGlyph()}}</span>
<!--span class='type-name mobile-important-hide'>{{type.getName()}}</span--> <span class="l-elem-wrapper l-flex-row flex-elem grows">
<span class="l-elem-wrapper l-flex"> <span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
<span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span> <span class='title-label flex-elem flex-can-shrink'>{{model.name}}</span>
<span class='title-label'>{{model.name}}</span> <mct-representation
<mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation> key="'menu-arrow'"
</span> mct-object='domainObject'
</div> class="flex-elem"></mct-representation>
</span>
<!--</div>-->

3
platform/commonUI/edit/res/templates/topbar-edit.html
View File

@ -22,7 +22,8 @@
<div class='top-bar edit abs'> <div class='top-bar edit abs'>
<mct-representation key="'object-header'" <mct-representation key="'object-header'"
mct-object="domainObject" mct-object="domainObject"
parameters="{ mode: 'Edit' }"> parameters="{ mode: 'Edit' }"
class="l-flex-row flex-elem grows object-header">
</mct-representation> </mct-representation>
<div class='buttons-main btn-bar buttons abs'> <div class='buttons-main btn-bar buttons abs'>
<mct-representation key="'switcher'" <mct-representation key="'switcher'"

22
platform/commonUI/general/res/sass/_archetypes.scss
View File

@ -104,6 +104,9 @@
position: relative; position: relative;
&:not(.grows) { &:not(.grows) {
@include flex(0 0 auto); @include flex(0 0 auto);
&.flex-can-shrink {
@include flex(0 1 auto);
}
} }
&.grows { &.grows {
@include flex(1 1 auto); @include flex(1 1 auto);
@ -120,21 +123,28 @@
.l-flex-row { .l-flex-row {
@include flex-direction(row); @include flex-direction(row);
&.flex-elem { @include flex(1 1 auto); }
.flex-elem {
height: inherit;
line-height: inherit;
min-width: 0;
}
.flex-container { @include flex-direction(row); } .flex-container { @include flex-direction(row); }
} }
.l-flex-col { .l-flex-col {
@include flex-direction(column); @include flex-direction(column);
.flex-elem { .flex-elem {
min-height: 0;
&:not(:first-child) { margin-top: $interiorMarginLg; } &:not(:first-child) { margin-top: $interiorMarginLg; }
} }
.flex-container { @include flex-direction(column); } .flex-container { @include flex-direction(column); }
} }
.l-flex { .flex-fixed {
@extend .l-flex-row; @include flex(0 0 auto);
.left { }
@include flex(1 1 0);
padding-right: $interiorMarginLg; .flex-justify-end {
} @include justify-content(flex-end);
} }

2
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -214,7 +214,7 @@ label.checkbox.custom {
.l-elem-wrapper { .l-elem-wrapper {
//@include test(#66f, 0.2); //@include test(#66f, 0.2);
@include justify-content(flex-start); //@include justify-content(flex-start); // Commented out 11/6/15 open250
mct-representation { mct-representation {
// Holds the context-available item // Holds the context-available item
// Must have min-width to make flex work properly // Must have min-width to make flex work properly

2
platform/commonUI/general/res/sass/helpers/_splitter.scss
View File

@ -29,7 +29,7 @@
//@include test(red); //@include test(red);
display: block; display: block;
position: absolute; position: absolute;
z-index: 1; z-index: 3;
&:after { &:after {
// The handle // The handle
content:""; content:"";

7
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@ -36,8 +36,10 @@
//@include test(); //@include test();
@include slMenuTransitions; @include slMenuTransitions;
margin-left: 0 !important; margin-left: 0 !important;
#content-area { .holder-object-and-inspector {
@include slMenuTransitions; @include slMenuTransitions;
left: $bodyMargin;
right: $bodyMargin;
opacity: 1; opacity: 1;
} }
} }
@ -46,7 +48,6 @@
right: $bodyMargin !important; right: $bodyMargin !important;
} }
// When the tree is hidden, these are the // When the tree is hidden, these are the
// classes used for the left menu and the // classes used for the left menu and the
// right representation. // right representation.
@ -148,7 +149,7 @@
.pane.right.items { .pane.right.items {
left: 0 !important; left: 0 !important;
@include transform(translateX($proporMenuOnly)); @include transform(translateX($proporMenuOnly));
#content-area { .holder-object-and-inspector {
opacity: 0; opacity: 0;
} }
} }

5
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@ -29,11 +29,14 @@
border-color: lighten($bc, 10%); border-color: lighten($bc, 10%);
} }
} }
>.object-header.abs { .object-top-bar {
//@include test(red); //@include test(red);
font-size: 0.75em; font-size: 0.75em;
height: $ohH; height: $ohH;
line-height: $ohH; line-height: $ohH;
.left {
padding-right: $interiorMarginLg;
}
} }
>.object-holder.abs { >.object-holder.abs {
top: $ohH + $interiorMargin; top: $ohH + $interiorMargin;

124
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -46,36 +46,30 @@
} }
} }
.bar { // .bar and following commented out as part of refactor to use flex layout for this stuff
.icon.major { //.bar {
/* .icon.major {
margin-right: $interiorMargin; margin-right: $interiorMargin;
} }*/
&.abs { //&.abs {
text-wrap: none; //text-wrap: none;
white-space: nowrap; //white-space: nowrap;
&.left, //&.left,
.left { //.left {
width: 45%; // width: 45%;
right: auto; // right: auto;
} //}
&.right, //&.right,
.right { //.right {
width: 45%; // width: 45%;
left: auto; // left: auto;
text-align: right; // text-align: right;
.icon.major { // .icon.major {
margin-left: $interiorMargin * 3; // margin-left: $interiorMargin * 3;
} // }
} //}
.l-flex, //}
&.l-flex { //}
.left,
.right {
width: auto;
}
}
}
}
.user-environ { .user-environ {
.browse-area, .browse-area,
@ -141,21 +135,20 @@
} }
} }
.browse-mode { .split-layout {
.split-layout { .split-pane-component.pane {
.split-pane-component.pane { //@include test(green);
//@include test(green); &.treeview.left {
&.treeview.left { min-width: 150px;
min-width: 150px; max-width: 800px;
max-width: 800px; width: $ueBrowseLeftPaneTreeW;
width: $ueBrowseLeftPaneTreeW; }
} &.t-inspect.right {
&.t-inspect.right { min-width: 200px;
min-width: 200px; max-width: 600px;
max-width: 600px; //padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
//padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element width: $ueBrowseRightPaneInspectW;
width: $ueBrowseRightPaneInspectW; z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
}
} }
} }
} }
@ -187,7 +180,7 @@
z-index: 2; z-index: 2;
} }
&.treeview.left { //&.treeview.left {
// Converted to flex layout // Converted to flex layout
//.create-btn-holder { //.create-btn-holder {
@ -209,7 +202,7 @@
// overflow: auto; // overflow: auto;
// top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin; // top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
//} //}
} //}
.mini-tab-icon.toggle-pane { .mini-tab-icon.toggle-pane {
//@include test(blue, 0.3); //@include test(blue, 0.3);
@ -269,30 +262,6 @@
} }
.split-layout { .split-layout {
&.horizontal {
// Slides up and down
> .pane {
// @include test();
margin-top: $interiorMargin;
&:first-child {
margin-top: 0;
}
}
}
/* &.vertical {
// Slides left and right
> .pane.left {
> .holder {
left: $bodyMargin;
}
}
> .pane.right {
> .holder {
right: $bodyMargin;
}
}
}*/
// Specific elements margins // Specific elements margins
.holder.holder-treeview-elements { .holder.holder-treeview-elements {
top: $bodyMargin; top: $bodyMargin;
@ -315,7 +284,6 @@
bottom: $bodyMargin; bottom: $bodyMargin;
left: $bodyMargin; left: $bodyMargin;
right: $bodyMargin; right: $bodyMargin;
} }
} }
} }
@ -348,19 +316,18 @@
} }
} }
/***************************************************** OBJECT BROWSE BAR */
.object-browse-bar { .object-browse-bar {
//@include test(blue); //@include test(blue);
@include absPosDefault(0, hidden); @include absPosDefault(0, visible); // Must use visible to avoid hiding view switcher menu
@include box-sizing(border-box); @include box-sizing(border-box);
height: $ueTopBarH; height: $ueTopBarH;
line-height: $ueTopBarH; line-height: $ueTopBarH;
white-space: nowrap; white-space: nowrap;
.left { .left {
padding-right: $interiorMarginLg * 2; padding-right: $interiorMarginLg;
.l-back { .l-back {
display: inline-block;
float: left;
margin-right: $interiorMarginLg; margin-right: $interiorMarginLg;
} }
} }
@ -404,6 +371,9 @@
} }
.pane-inspect-hidden { .pane-inspect-hidden {
.l-object-and-inspector { .l-object-and-inspector {
.t-inspect {
z-index: 1 !important; // Move down so that primary pane elements are clickable
}
.l-inspect, .l-inspect,
.splitter-inspect { .splitter-inspect {
opacity: 0; opacity: 0;
@ -421,8 +391,10 @@
.pane-inspect-hidden .l-object-and-inspector { .pane-inspect-hidden .l-object-and-inspector {
.pane.left { right: $ueCollapsedPaneEdgeM !important; } .pane.left { right: $ueCollapsedPaneEdgeM !important; }
} }
.pane:not(.resizing) { .pane:not(.resizing) {
@include trans-prop-nice-resize-w(250ms); @include trans-prop-nice-resize-w(250ms);
} }
.pane.primary-pane .object-browse-bar {
min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
}
} }

446
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -425,6 +425,16 @@ mct-container {
display: none !important; } display: none !important; }
/* line 145, ../../../../general/res/sass/_global.scss */ /* line 145, ../../../../general/res/sass/_global.scss */
.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important; }
/* line 155, ../../../../general/res/sass/_global.scss */
.sep { .sep {
color: rgba(255, 255, 255, 0.2); } color: rgba(255, 255, 255, 0.2); }
@ -508,29 +518,34 @@ mct-container {
/********************************************* FLEX STYLES */ /********************************************* FLEX STYLES */
/* line 96, ../../../../general/res/sass/_archetypes.scss */ /* line 96, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex, .l-flex-row,
.l-flex-col { .l-flex-col {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
flex-wrap: nowrap; } flex-wrap: nowrap; }
/* line 101, ../../../../general/res/sass/_archetypes.scss */ /* line 101, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem, .l-flex .flex-elem, .l-flex-row .flex-elem,
.l-flex-col .flex-elem { .l-flex-col .flex-elem {
min-height: 0; min-height: 0;
position: relative; } position: relative; }
/* line 105, ../../../../general/res/sass/_archetypes.scss */ /* line 105, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem:not(.grows), .l-flex .flex-elem:not(.grows), .l-flex-row .flex-elem:not(.grows),
.l-flex-col .flex-elem:not(.grows) { .l-flex-col .flex-elem:not(.grows) {
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; } flex: 0 0 auto; }
/* line 108, ../../../../general/res/sass/_archetypes.scss */ /* line 107, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows, .l-flex .flex-elem.grows, .l-flex-row .flex-elem:not(.grows).flex-can-shrink,
.l-flex-col .flex-elem:not(.grows).flex-can-shrink {
-webkit-flex: 0 1 auto;
flex: 0 1 auto; }
/* line 111, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem.grows,
.l-flex-col .flex-elem.grows { .l-flex-col .flex-elem.grows {
-webkit-flex: 1 1 auto; -webkit-flex: 1 1 auto;
flex: 1 1 auto; } flex: 1 1 auto; }
/* line 112, ../../../../general/res/sass/_archetypes.scss */ /* line 115, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container, .l-flex-row .flex-container,
.l-flex-col .flex-container { .l-flex-col .flex-container {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -540,32 +555,48 @@ mct-container {
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; } min-height: 0; }
/* line 121, ../../../../general/res/sass/_archetypes.scss */ /* line 124, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row, .l-flex { .l-flex-row {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 123, ../../../../general/res/sass/_archetypes.scss */ /* line 126, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container, .l-flex .flex-container { .l-flex-row.flex-elem {
-webkit-flex: 1 1 auto;
flex: 1 1 auto; }
/* line 127, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-elem {
height: inherit;
line-height: inherit;
min-width: 0; }
/* line 132, ../../../../general/res/sass/_archetypes.scss */
.l-flex-row .flex-container {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; } flex-direction: row; }
/* line 126, ../../../../general/res/sass/_archetypes.scss */ /* line 135, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col { .l-flex-col {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 129, ../../../../general/res/sass/_archetypes.scss */ /* line 137, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem:not(:first-child) { .l-flex-col .flex-elem {
margin-top: 10px; } min-height: 0; }
/* line 131, ../../../../general/res/sass/_archetypes.scss */ /* line 139, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-elem:not(:first-child) {
margin-top: 10px; }
/* line 141, ../../../../general/res/sass/_archetypes.scss */
.l-flex-col .flex-container { .l-flex-col .flex-container {
-webkit-flex-direction: column; -webkit-flex-direction: column;
flex-direction: column; } flex-direction: column; }
/* line 136, ../../../../general/res/sass/_archetypes.scss */ /* line 144, ../../../../general/res/sass/_archetypes.scss */
.l-flex .left { .flex-fixed {
-webkit-flex: 1 1 0; -webkit-flex: 0 0 auto;
flex: 1 1 0; flex: 0 0 auto; }
padding-right: 10px; }
/* line 148, ../../../../general/res/sass/_archetypes.scss */
.flex-justify-end {
-webkit-justify-content: flex-end;
justify-content: flex-end; }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
@ -1082,7 +1113,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
.splitter { .splitter {
display: block; display: block;
position: absolute; position: absolute;
z-index: 1; } z-index: 3; }
/* line 33, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 33, ../../../../general/res/sass/helpers/_splitter.scss */
.splitter:after { .splitter:after {
content: ""; content: "";
@ -2273,13 +2304,9 @@ label.checkbox.custom {
font-size: 120%; font-size: 120%;
float: left; float: left;
margin-right: 5px; } margin-right: 5px; }
/* line 215, ../../../../general/res/sass/controls/_controls.scss */ /* line 218, ../../../../general/res/sass/controls/_controls.scss */
.object-header .l-elem-wrapper { .object-header .l-elem-wrapper mct-representation {
-webkit-justify-content: flex-start; min-width: 0.7em; }
justify-content: flex-start; }
/* line 218, ../../../../general/res/sass/controls/_controls.scss */
.object-header .l-elem-wrapper mct-representation {
min-width: 0.7em; }
/* line 226, ../../../../general/res/sass/controls/_controls.scss */ /* line 226, ../../../../general/res/sass/controls/_controls.scss */
.object-header .action { .object-header .action {
margin-right: 5px; } margin-right: 5px; }
@ -4348,94 +4375,37 @@ span.req {
bottom: 0px; bottom: 0px;
left: 0px; } left: 0px; }
/* line 50, ../../../../general/res/sass/user-environ/_layout.scss */ /* .icon.major {
.bar .icon.major, .bar .major.t-item-icon { margin-right: $interiorMargin;
margin-right: 5px; } }*/
/* line 53, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 75, ../../../../general/res/sass/user-environ/_layout.scss */
.bar.abs, .bar.l-inspect, .l-datetime-picker .l-month-year-pager .bar.pager,
.l-datetime-picker .l-month-year-pager .bar.val, .s-menu-btn span.bar.l-click-area {
text-wrap: none;
white-space: nowrap; }
/* line 56, ../../../../general/res/sass/user-environ/_layout.scss */
.bar.abs.left, .bar.left.l-inspect, .l-datetime-picker .l-month-year-pager .bar.left.pager,
.l-datetime-picker .l-month-year-pager .bar.left.val, .s-menu-btn span.bar.left.l-click-area,
.bar.abs .left,
.bar.l-inspect .left,
.l-datetime-picker .l-month-year-pager .bar.pager .left,
.l-datetime-picker .l-month-year-pager .bar.val .left,
.s-menu-btn span.bar.l-click-area .left {
width: 45%;
right: auto; }
/* line 61, ../../../../general/res/sass/user-environ/_layout.scss */
.bar.abs.right, .bar.right.l-inspect, .l-datetime-picker .l-month-year-pager .bar.right.pager,
.l-datetime-picker .l-month-year-pager .bar.right.val, .s-menu-btn span.bar.right.l-click-area,
.bar.abs .right,
.bar.l-inspect .right,
.l-datetime-picker .l-month-year-pager .bar.pager .right,
.l-datetime-picker .l-month-year-pager .bar.val .right,
.s-menu-btn span.bar.l-click-area .right {
width: 45%;
left: auto;
text-align: right; }
/* line 66, ../../../../general/res/sass/user-environ/_layout.scss */
.bar.abs.right .icon.major, .bar.right.l-inspect .icon.major, .l-datetime-picker .l-month-year-pager .bar.right.pager .icon.major,
.l-datetime-picker .l-month-year-pager .bar.right.val .icon.major, .s-menu-btn span.bar.right.l-click-area .icon.major, .bar.abs.right .major.t-item-icon, .bar.right.l-inspect .major.t-item-icon, .l-datetime-picker .l-month-year-pager .bar.right.pager .major.t-item-icon,
.l-datetime-picker .l-month-year-pager .bar.right.val .major.t-item-icon, .s-menu-btn span.bar.right.l-click-area .major.t-item-icon,
.bar.abs .right .icon.major,
.bar.l-inspect .right .icon.major,
.l-datetime-picker .l-month-year-pager .bar.pager .right .icon.major,
.l-datetime-picker .l-month-year-pager .bar.val .right .icon.major,
.s-menu-btn span.bar.l-click-area .right .icon.major,
.bar.abs .right .major.t-item-icon,
.bar.l-inspect .right .major.t-item-icon,
.l-datetime-picker .l-month-year-pager .bar.pager .right .major.t-item-icon,
.l-datetime-picker .l-month-year-pager .bar.val .right .major.t-item-icon,
.s-menu-btn span.bar.l-click-area .right .major.t-item-icon {
margin-left: 15px; }
/* line 72, ../../../../general/res/sass/user-environ/_layout.scss */
.bar.abs .l-flex .left, .bar.l-inspect .l-flex .left, .l-datetime-picker .l-month-year-pager .bar.pager .l-flex .left,
.l-datetime-picker .l-month-year-pager .bar.val .l-flex .left, .s-menu-btn span.bar.l-click-area .l-flex .left,
.bar.abs .l-flex .right,
.bar.l-inspect .l-flex .right,
.l-datetime-picker .l-month-year-pager .bar.pager .l-flex .right,
.l-datetime-picker .l-month-year-pager .bar.val .l-flex .right,
.s-menu-btn span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .bar.l-flex.l-inspect .left, .l-datetime-picker .l-month-year-pager .bar.l-flex.pager .left,
.l-datetime-picker .l-month-year-pager .bar.l-flex.val .left, .s-menu-btn span.bar.l-flex.l-click-area .left,
.bar.abs.l-flex .right,
.bar.l-flex.l-inspect .right,
.l-datetime-picker .l-month-year-pager .bar.l-flex.pager .right,
.l-datetime-picker .l-month-year-pager .bar.l-flex.val .right,
.s-menu-btn span.bar.l-flex.l-click-area .right {
width: auto; }
/* line 81, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .browse-area, .user-environ .browse-area,
.user-environ .editor { .user-environ .editor {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 25px; } bottom: 25px; }
/* line 88, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 82, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .browse-area > .contents, .user-environ .browse-area > .contents,
.user-environ .edit-area > .contents { .user-environ .edit-area > .contents {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 94, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 88, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .edit-area { .user-environ .edit-area {
top: 45px; top: 45px;
left: 10px; left: 10px;
right: 10px; right: 10px;
bottom: 35px; } bottom: 35px; }
/* line 100, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 94, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .edit-area .tool-bar { .user-environ .edit-area .tool-bar {
bottom: auto; bottom: auto;
height: 30px; height: 30px;
line-height: 25px; } line-height: 25px; }
/* line 105, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 99, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .edit-area .object-holder.work-area { .user-environ .edit-area .object-holder.work-area {
top: 40px; top: 40px;
overflow: auto; } overflow: auto; }
/* line 112, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 106, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .ue-bottom-bar { .user-environ .ue-bottom-bar {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -4451,7 +4421,7 @@ span.req {
background: #000; background: #000;
color: gray; color: gray;
font-size: .7rem; } font-size: .7rem; }
/* line 121, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 115, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .ue-bottom-bar .status-holder { .user-environ .ue-bottom-bar .status-holder {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -4470,7 +4440,7 @@ span.req {
right: 120px; right: 120px;
text-transform: uppercase; text-transform: uppercase;
z-index: 1; } z-index: 1; }
/* line 130, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 124, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .ue-bottom-bar .app-logo { .user-environ .ue-bottom-bar .app-logo {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -4487,79 +4457,80 @@ span.req {
left: auto; left: auto;
width: 105px; width: 105px;
z-index: 2; } z-index: 2; }
/* line 137, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 131, ../../../../general/res/sass/user-environ/_layout.scss */
.user-environ .ue-bottom-bar .app-logo.logo-openmctweb { .user-environ .ue-bottom-bar .app-logo.logo-openmctweb {
background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; } background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; }
/* line 148, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 141, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.treeview.left { .split-layout .split-pane-component.pane.treeview.left {
min-width: 150px; min-width: 150px;
max-width: 800px; max-width: 800px;
width: 25%; } width: 25%; }
/* line 153, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 146, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.t-inspect.right { .split-layout .split-pane-component.pane.t-inspect.right {
min-width: 200px; min-width: 200px;
max-width: 600px; max-width: 600px;
width: 20%; } width: 20%;
z-index: 3; }
/* line 165, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 158, ../../../../general/res/sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right { .edit-mode .split-layout .split-pane-component.pane.right {
width: 15%; } width: 15%; }
/* line 167, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 160, ../../../../general/res/sass/user-environ/_layout.scss */
.edit-mode .split-layout .split-pane-component.pane.right .pane.bottom { .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
min-height: 50px; min-height: 50px;
height: 30%; } height: 30%; }
/* line 175, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 168, ../../../../general/res/sass/user-environ/_layout.scss */
.pane { .pane {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
position: absolute; } position: absolute; }
/* line 179, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 172, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .pane-header { .pane .pane-header {
text-transform: uppercase; text-transform: uppercase;
height: 24px; height: 24px;
line-height: 24px; } line-height: 24px; }
/* line 185, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 178, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .primary-pane { .pane .primary-pane {
z-index: 2; } z-index: 2; }
/* line 214, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 207, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane { .pane .mini-tab-icon.toggle-pane {
z-index: 5; } z-index: 5; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 214, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 207, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane { .pane .mini-tab-icon.toggle-pane {
top: 10px; top: 10px;
height: 24px; height: 24px;
line-height: 24px; } line-height: 24px; }
/* line 223, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 216, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane:after { .pane .mini-tab-icon.toggle-pane:after {
opacity: 0; } opacity: 0; }
/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 221, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.collapsed:before { .pane .mini-tab-icon.toggle-pane.collapsed:before {
opacity: 0; } opacity: 0; }
/* line 231, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 224, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.collapsed:after { .pane .mini-tab-icon.toggle-pane.collapsed:after {
opacity: 1; } opacity: 1; }
/* line 235, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left {
left: 0; left: 0;
-moz-transform: translateX(-34px); -moz-transform: translateX(-34px);
-ms-transform: translateX(-34px); -ms-transform: translateX(-34px);
-webkit-transform: translateX(-34px); -webkit-transform: translateX(-34px);
transform: translateX(-34px); } transform: translateX(-34px); }
/* line 238, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:after {
content: '\6d'; } content: '\6d'; }
/* line 241, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 234, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left.collapsed {
left: 0; left: 0;
-moz-transform: translateX(-17px); -moz-transform: translateX(-17px);
-ms-transform: translateX(-17px); -ms-transform: translateX(-17px);
-webkit-transform: translateX(-17px); -webkit-transform: translateX(-17px);
transform: translateX(-17px); } transform: translateX(-17px); }
/* line 245, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 238, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before { .pane .mini-tab-icon.toggle-pane.toggle-tree.anchor-left:not(.collapsed):before {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4577,16 +4548,16 @@ span.req {
-o-transition-delay: 200ms; -o-transition-delay: 200ms;
-webkit-transition-delay: 200ms; -webkit-transition-delay: 200ms;
transition-delay: 200ms; } transition-delay: 200ms; }
/* line 249, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 242, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right {
right: 10px; } right: 10px; }
/* line 251, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right:after {
content: '\e615'; } content: '\e615'; }
/* line 254, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed { .pane .mini-tab-icon.toggle-pane.toggle-inspect.anchor-right.collapsed {
right: 5px; } } right: 5px; } }
/* line 263, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 256, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .left.l-inspect, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
.pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
.l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@ -4600,51 +4571,30 @@ span.req {
.s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout { .split-layout .holder.holder-treeview-elements {
/* &.vertical { top: 10px;
// Slides left and right right: 0;
> .pane.left { bottom: 10px;
> .holder { left: 10px; }
left: $bodyMargin; /* line 273, ../../../../general/res/sass/user-environ/_layout.scss */
} .split-layout .holder.holder-object-and-inspector {
} top: 0;
> .pane.right { right: 0;
> .holder { bottom: 0;
right: $bodyMargin; left: 0; }
} /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
} .split-layout .holder.holder-object-and-inspector .holder-object {
}*/ } top: 10px;
/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */ bottom: 10px; }
.split-layout.horizontal > .pane { /* line 282, ../../../../general/res/sass/user-environ/_layout.scss */
margin-top: 5px; } .split-layout .holder.holder-object-and-inspector .holder-inspector-elements {
/* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child {
margin-top: 0; }
/* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-treeview-elements {
top: 10px; top: 10px;
right: 0;
bottom: 10px; bottom: 10px;
left: 10px; } left: 10px;
/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */ right: 10px; }
.split-layout .holder.holder-object-and-inspector {
top: 0;
right: 0;
bottom: 0;
left: 0; }
/* line 309, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-object {
top: 10px;
bottom: 10px; }
/* line 313, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-inspector-elements {
top: 10px;
bottom: 10px;
left: 10px;
right: 10px; }
/* line 323, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -4655,11 +4605,11 @@ span.req {
width: auto; width: auto;
height: auto; height: auto;
top: 34px; } top: 34px; }
/* line 327, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 295, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible { .object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; } bottom: 88px; }
/* line 333, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 301, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -4671,14 +4621,15 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 346, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 314, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 351, ../../../../general/res/sass/user-environ/_layout.scss */ /***************************************************** OBJECT BROWSE BAR */
/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: hidden; overflow: visible;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -4692,22 +4643,20 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 359, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 10px; }
/* line 361, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block;
float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 375, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 342, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .tree-holder, .pane-tree-hidden .tree-holder,
.pane-tree-hidden .splitter-treeview, .pane-tree-hidden .splitter-treeview,
.pane-tree-hidden .holder-treeview-elements { .pane-tree-hidden .holder-treeview-elements {
opacity: 0; } opacity: 0; }
/* line 385, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 352, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .tree-holder, .pane-tree-showing .tree-holder,
.pane-tree-showing .splitter-treeview { .pane-tree-showing .splitter-treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4727,7 +4676,7 @@ span.req {
-webkit-transition-delay: 250ms; -webkit-transition-delay: 250ms;
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 391, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 358, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .holder-treeview-elements { .pane-tree-showing .holder-treeview-elements {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4746,7 +4695,7 @@ span.req {
-webkit-transition-delay: 200ms; -webkit-transition-delay: 200ms;
transition-delay: 200ms; } transition-delay: 200ms; }
/* line 398, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .l-inspect,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect { .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4767,25 +4716,28 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 407, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .t-inspect {
z-index: 1 !important; }
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .l-inspect,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect { .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
opacity: 0; } opacity: 0; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 415, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
padding-right: 5px; } padding-right: 5px; }
/* line 419, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 389, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane { .pane-tree-hidden .pane.right.primary-pane {
left: 22px !important; } left: 22px !important; }
/* line 422, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 392, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left { .pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 22px !important; } right: 22px !important; }
/* line 425, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 394, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) { .pane:not(.resizing) {
-moz-transition-property: width, left, right; -moz-transition-property: width, left, right;
-o-transition-property: width, left, right; -o-transition-property: width, left, right;
@ -4802,7 +4754,11 @@ span.req {
-moz-transition-delay: 0; -moz-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; } } transition-delay: 0; }
/* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.primary-pane .object-browse-bar {
min-width: 200px; } }
/***************************************************************************** /*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government * Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space * as represented by the Administrator of the National Aeronautics and Space
@ -4847,20 +4803,22 @@ span.req {
backface-visibility: hidden; backface-visibility: hidden;
margin-left: 0 !important; } margin-left: 0 !important; }
/* line 39, ../../../../general/res/sass/mobile/_layout.scss */ /* line 39, ../../../../general/res/sass/mobile/_layout.scss */
.pane.right.items #content-area { .pane.right.items .holder-object-and-inspector {
-moz-transition-duration: 0.35s; -moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s; -o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s; -webkit-transition-duration: 0.35s;
transition-duration: 0.35s; transition-duration: 0.35s;
transition-timing-function: ease; transition-timing-function: ease;
backface-visibility: hidden; backface-visibility: hidden;
left: 10px;
right: 10px;
opacity: 1; } opacity: 1; }
/* line 45, ../../../../general/res/sass/mobile/_layout.scss */ /* line 47, ../../../../general/res/sass/mobile/_layout.scss */
.holder.holder-treeview-elements { .holder.holder-treeview-elements {
right: 10px !important; } right: 10px !important; }
/* line 56, ../../../../general/res/sass/mobile/_layout.scss */ /* line 57, ../../../../general/res/sass/mobile/_layout.scss */
.pane-tree-hidden .pane.left.treeview { .pane-tree-hidden .pane.left.treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4879,11 +4837,11 @@ span.req {
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
opacity: 0 !important; } opacity: 0 !important; }
/* line 64, ../../../../general/res/sass/mobile/_layout.scss */ /* line 65, ../../../../general/res/sass/mobile/_layout.scss */
.pane-tree-hidden .pane.right.items { .pane-tree-hidden .pane.right.items {
left: 0 !important; } left: 0 !important; }
/* line 78, ../../../../general/res/sass/mobile/_layout.scss */ /* line 79, ../../../../general/res/sass/mobile/_layout.scss */
.pane-tree-showing .pane.left.treeview { .pane-tree-showing .pane.left.treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4908,52 +4866,52 @@ span.req {
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
right: auto !important; right: auto !important;
width: 40% !important; } width: 40% !important; }
/* line 85, ../../../../general/res/sass/mobile/_layout.scss */ /* line 86, ../../../../general/res/sass/mobile/_layout.scss */
.pane-tree-showing .pane.right.items { .pane-tree-showing .pane.right.items {
left: 40% !important; } left: 40% !important; }
/* line 90, ../../../../general/res/sass/mobile/_layout.scss */ /* line 91, ../../../../general/res/sass/mobile/_layout.scss */
.toggle-tree { .toggle-tree {
color: #0099cc !important; color: #0099cc !important;
font-size: 110%; font-size: 110%;
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 10px; } left: 10px; }
/* line 96, ../../../../general/res/sass/mobile/_layout.scss */ /* line 97, ../../../../general/res/sass/mobile/_layout.scss */
.toggle-tree:after { .toggle-tree:after {
content: 'm' !important; content: 'm' !important;
font-family: symbolsfont; } font-family: symbolsfont; }
/* line 102, ../../../../general/res/sass/mobile/_layout.scss */ /* line 103, ../../../../general/res/sass/mobile/_layout.scss */
.object-browse-bar { .object-browse-bar {
left: 45px !important; } left: 45px !important; }
/* line 105, ../../../../general/res/sass/mobile/_layout.scss */ /* line 106, ../../../../general/res/sass/mobile/_layout.scss */
.object-browse-bar .context-available { .object-browse-bar .context-available {
opacity: 1 !important; } opacity: 1 !important; }
/* line 108, ../../../../general/res/sass/mobile/_layout.scss */ /* line 109, ../../../../general/res/sass/mobile/_layout.scss */
.object-browse-bar .view-switcher { .object-browse-bar .view-switcher {
margin-right: 0 !important; } margin-right: 0 !important; }
/* line 110, ../../../../general/res/sass/mobile/_layout.scss */ /* line 111, ../../../../general/res/sass/mobile/_layout.scss */
.object-browse-bar .view-switcher .title-label { .object-browse-bar .view-switcher .title-label {
display: none; } display: none; }
/* line 117, ../../../../general/res/sass/mobile/_layout.scss */ /* line 118, ../../../../general/res/sass/mobile/_layout.scss */
.tree-holder { .tree-holder {
overflow-x: hidden !important; } overflow-x: hidden !important; }
/* line 121, ../../../../general/res/sass/mobile/_layout.scss */ /* line 122, ../../../../general/res/sass/mobile/_layout.scss */
.mobile-disable-select { .mobile-disable-select {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 126, ../../../../general/res/sass/mobile/_layout.scss */ /* line 127, ../../../../general/res/sass/mobile/_layout.scss */
.mobile-hide, .mobile-hide,
.mobile-hide-important { .mobile-hide-important {
display: none !important; } display: none !important; }
/* line 131, ../../../../general/res/sass/mobile/_layout.scss */ /* line 132, ../../../../general/res/sass/mobile/_layout.scss */
.mobile-back-hide { .mobile-back-hide {
pointer-events: none; pointer-events: none;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4974,7 +4932,7 @@ span.req {
transition-delay: 0; transition-delay: 0;
opacity: 0; } opacity: 0; }
/* line 136, ../../../../general/res/sass/mobile/_layout.scss */ /* line 137, ../../../../general/res/sass/mobile/_layout.scss */
.mobile-back-unhide { .mobile-back-unhide {
pointer-events: all; pointer-events: all;
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4995,21 +4953,21 @@ span.req {
transition-delay: 0; transition-delay: 0;
opacity: 1; } } opacity: 1; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
/* line 145, ../../../../general/res/sass/mobile/_layout.scss */ /* line 146, ../../../../general/res/sass/mobile/_layout.scss */
.pane-tree-showing .pane.left.treeview { .pane-tree-showing .pane.left.treeview {
width: 90% !important; } width: 90% !important; }
/* line 148, ../../../../general/res/sass/mobile/_layout.scss */ /* line 149, ../../../../general/res/sass/mobile/_layout.scss */
.pane-tree-showing .pane.right.items { .pane-tree-showing .pane.right.items {
left: 0 !important; left: 0 !important;
-moz-transform: translateX(90%); -moz-transform: translateX(90%);
-ms-transform: translateX(90%); -ms-transform: translateX(90%);
-webkit-transform: translateX(90%); -webkit-transform: translateX(90%);
transform: translateX(90%); } transform: translateX(90%); }
/* line 151, ../../../../general/res/sass/mobile/_layout.scss */ /* line 152, ../../../../general/res/sass/mobile/_layout.scss */
.pane-tree-showing .pane.right.items #content-area { .pane-tree-showing .pane.right.items .holder-object-and-inspector {
opacity: 0; } } opacity: 0; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 159, ../../../../general/res/sass/mobile/_layout.scss */ /* line 160, ../../../../general/res/sass/mobile/_layout.scss */
.desktop-hide { .desktop-hide {
display: none; } } display: none; } }
/***************************************************************************** /*****************************************************************************
@ -5192,26 +5150,16 @@ span.req {
.clear-icon:before { .clear-icon:before {
content: '\e607'; } content: '\e607'; }
/* line 52, ../../../../general/res/sass/search/_search.scss */ /* line 55, ../../../../general/res/sass/search/_search.scss */
.off {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important; }
/* line 65, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar { .holder-search .search-bar {
font-size: 0.8em; font-size: 0.8em;
max-width: 250px; max-width: 250px;
position: relative; } position: relative; }
/* line 74, ../../../../general/res/sass/search/_search.scss */ /* line 64, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input { .holder-search .search-bar .search-input {
height: 25px; height: 25px;
line-height: 25px; } line-height: 25px; }
/* line 79, ../../../../general/res/sass/search/_search.scss */ /* line 69, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before, .holder-search .search-bar:before,
.holder-search .search-bar .clear-icon, .holder-search .search-bar .clear-icon,
.holder-search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
@ -5225,16 +5173,16 @@ span.req {
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 4px; } top: 4px; }
/* line 92, ../../../../general/res/sass/search/_search.scss */ /* line 82, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input { .holder-search .search-bar .search-input {
position: relative; position: relative;
width: 100%; width: 100%;
padding-left: 22px !important; padding-left: 22px !important;
padding-right: 44px !important; } padding-right: 44px !important; }
/* line 99, ../../../../general/res/sass/search/_search.scss */ /* line 89, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-input input { .holder-search .search-bar .search-input input {
width: inherit; } width: inherit; }
/* line 104, ../../../../general/res/sass/search/_search.scss */ /* line 94, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:before { .holder-search .search-bar:before {
content: '\4d'; content: '\4d';
font-family: symbolsfont; font-family: symbolsfont;
@ -5256,44 +5204,40 @@ span.req {
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
pointer-events: none; } pointer-events: none; }
/* line 114, ../../../../general/res/sass/search/_search.scss */ /* line 104, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar:hover:before { .holder-search .search-bar:hover:before {
color: #8c8c8c; } color: #8c8c8c; }
/* line 118, ../../../../general/res/sass/search/_search.scss */ /* line 108, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon { .holder-search .search-bar .clear-icon {
right: 22px; right: 22px;
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 124, ../../../../general/res/sass/search/_search.scss */ /* line 114, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon.show { .holder-search .search-bar .clear-icon.show {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 129, ../../../../general/res/sass/search/_search.scss */ /* line 119, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .clear-icon:hover { .holder-search .search-bar .clear-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 134, ../../../../general/res/sass/search/_search.scss */ /* line 124, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon { .holder-search .search-bar .menu-icon {
font-size: 0.8em; font-size: 0.8em;
padding-right: 4px; padding-right: 4px;
right: 4px; right: 4px;
text-align: right; } text-align: right; }
/* line 136, ../../../../general/res/sass/search/_search.scss */ /* line 126, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:before { .holder-search .search-bar .menu-icon:before {
content: '\76'; } content: '\76'; }
/* line 142, ../../../../general/res/sass/search/_search.scss */ /* line 132, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .menu-icon:hover { .holder-search .search-bar .menu-icon:hover {
color: #8c8c8c; } color: #8c8c8c; }
/* line 147, ../../../../general/res/sass/search/_search.scss */ /* line 137, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder { .holder-search .search-bar .search-menu-holder {
float: right; float: right;
left: -20px; left: -20px;
z-index: 3; z-index: 3;
transition: visibility .05s, opacity .05s; } transition: visibility .05s, opacity .05s; }
/* line 153, ../../../../general/res/sass/search/_search.scss */ /* line 153, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-bar .search-menu-holder.off {
visibility: hidden;
opacity: 0; }
/* line 168, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display { .holder-search .active-filter-display {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -5301,7 +5245,7 @@ span.req {
line-height: 130%; line-height: 130%;
padding-left: 1.4625em; padding-left: 1.4625em;
font-size: 0.65em; } font-size: 0.65em; }
/* line 181, ../../../../general/res/sass/search/_search.scss */ /* line 166, ../../../../general/res/sass/search/_search.scss */
.holder-search .active-filter-display .clear-filters-icon { .holder-search .active-filter-display .clear-filters-icon {
color: #737373; color: #737373;
opacity: 1; opacity: 1;
@ -5309,7 +5253,7 @@ span.req {
position: absolute; position: absolute;
left: 1px; left: 1px;
cursor: pointer; } cursor: pointer; }
/* line 194, ../../../../general/res/sass/search/_search.scss */ /* line 179, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results { .holder-search .search-results {
-moz-transition-property: opacity, visibility; -moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility; -o-transition-property: opacity, visibility;
@ -5327,16 +5271,16 @@ span.req {
-o-transition-delay: 0; -o-transition-delay: 0;
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
transition-delay: 0; } transition-delay: 0; }
/* line 198, ../../../../general/res/sass/search/_search.scss */ /* line 183, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .hint { .holder-search .search-results .hint {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 0.65em; font-size: 0.65em;
opacity: 0.6; } opacity: 0.6; }
/* line 204, ../../../../general/res/sass/search/_search.scss */ /* line 189, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results.active { .holder-search .search-results.active {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
/* line 208, ../../../../general/res/sass/search/_search.scss */ /* line 193, ../../../../general/res/sass/search/_search.scss */
.holder-search .search-results .load-more-button { .holder-search .search-results .load-more-button {
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
@ -5964,45 +5908,47 @@ ul.tree {
.frame.child-frame.panel:hover { .frame.child-frame.panel:hover {
border-color: rgba(179, 179, 179, 0.1); } border-color: rgba(179, 179, 179, 0.1); }
/* line 32, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
.frame > .object-header.abs, .frame > .object-header.l-inspect, .l-datetime-picker .l-month-year-pager .frame > .object-header.pager, .frame .object-top-bar {
.l-datetime-picker .l-month-year-pager .frame > .object-header.val, .s-menu-btn .frame > span.object-header.l-click-area {
font-size: 0.75em; font-size: 0.75em;
height: 16px; height: 16px;
line-height: 16px; } line-height: 16px; }
/* line 38, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 37, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .object-top-bar .left {
padding-right: 10px; }
/* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
.frame > .object-holder.abs, .frame > .object-holder.l-inspect, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager, .frame > .object-holder.abs, .frame > .object-holder.l-inspect, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager,
.l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area { .l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area {
top: 21px; } top: 21px; }
/* line 41, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 44, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .contents { .frame .contents {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; } left: 5px; }
/* line 49, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 52, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-btn, .frame.frame-template .s-menu-btn, .frame.frame-template .s-btn, .frame.frame-template .s-menu-btn,
.frame.frame-template .s-menu-btn { .frame.frame-template .s-menu-btn {
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
padding: 0 5px; } padding: 0 5px; }
/* line 54, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 57, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span, .frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span,
.frame.frame-template .s-menu-btn > span { .frame.frame-template .s-menu-btn > span {
font-size: 0.65rem; } font-size: 0.65rem; }
/* line 59, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 62, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .s-menu-btn:after { .frame.frame-template .s-menu-btn:after {
font-size: 8px; } font-size: 8px; }
/* line 63, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 66, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
z-index: 10; } z-index: 10; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 69, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 72, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
opacity: 0; } opacity: 0; }
/* line 72, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 75, ../../../../general/res/sass/user-environ/_frame.scss */
.frame.frame-template:hover .view-switcher { .frame.frame-template:hover .view-switcher {
opacity: 1; } } opacity: 1; } }
/* line 80, ../../../../general/res/sass/user-environ/_frame.scss */ /* line 83, ../../../../general/res/sass/user-environ/_frame.scss */
.frame .view-switcher .title-label { .frame .view-switcher .title-label {
display: none; } display: none; }

7696
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

File diff suppressed because it is too large Load Diff

6
platform/features/imagery/res/templates/imagery.html
View File

@ -33,8 +33,8 @@
> >
</div> </div>
<div class="l-image-main-controlbar l-flex bar"> <div class="l-image-main-controlbar l-flex-row">
<div class="left"> <div class="left flex-elem grows">
<a <a
class="s-btn show-thumbs sm hidden" class="s-btn show-thumbs sm hidden"
ng-click="showThumbsBubble = (showThumbsBubble)? false:true" ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
@ -43,7 +43,7 @@
<span class="l-time">{{imagery.getTime()}}</span> <span class="l-time">{{imagery.getTime()}}</span>
<span class="l-date">{{imagery.getDate()}}</span> <span class="l-date">{{imagery.getDate()}}</span>
</div> </div>
<div class="right"> <div class="right flex-elem">
<a <a
class="s-btn pause-play" class="s-btn pause-play"
ng-click="imagery.paused(!imagery.paused())" ng-click="imagery.paused(!imagery.paused())"

11
platform/features/layout/res/templates/frame.html
View File

@ -20,12 +20,15 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="frame frame-template abs"> <div class="frame frame-template abs">
<div class="bar abs l-flex object-header object-top-bar"> <div class="abs object-top-bar l-flex-row">
<div class="left"> <div class="left flex-elem l-flex-row grows">
<mct-representation key="'object-header'" mct-object="domainObject"> <mct-representation
key="'object-header'"
mct-object="domainObject"
class="l-flex-row flex-elem object-header grows">
</mct-representation> </mct-representation>
</div> </div>
<div class="btn-bar right"> <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
<mct-representation key="'switcher'" <mct-representation key="'switcher'"
ng-model="representation" ng-model="representation"
mct-object="domainObject"> mct-object="domainObject">