alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Inspector styling, in progress

Browse Source 
open #90
Significant styling in object-inspector.html;
This commit is contained in:
Charles Hacskaylo
2015-10-23 15:14:07 -07:00
parent a7ea4c3c6e
commit efd209826d
12 changed files with 6689 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
platform/commonUI/browse/res/templates/browse.html
View File

@@ -73,8 +73,7 @@
<div class="split-pane-component t-inspect pane right mobile-hide"> <div class="split-pane-component t-inspect pane right mobile-hide">
<mct-representation key="'object-inspector'" <mct-representation key="'object-inspector'"
mct-object="domainObject" mct-object="domainObject"
ng-model="treeModel" ng-model="treeModel">
class="t-inspector">
</mct-representation> </mct-representation>
</div> </div>
</mct-split-pane> </mct-split-pane>

2
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -43,7 +43,7 @@ $ueColMargin: 1.5%;
$ueAppLogoW: 105px; $ueAppLogoW: 105px;
$ueEditToolBarH: 25px; $ueEditToolBarH: 25px;
$ueBrowseLeftPaneTreeW: 25%; $ueBrowseLeftPaneTreeW: 25%;
$ueBrowseRightPaneInspectW: 10%; $ueBrowseRightPaneInspectW: 20%;
$ueEditLeftPaneW: 75%; $ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px; $treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px); $ueTimeControlH: (33px, 20px, 20px);

39
platform/commonUI/general/res/sass/_inspector.scss
View File

@@ -23,12 +23,18 @@
//.pane.right.t-inspect { @include test(green, 0.3); } // TEMP! //.pane.right.t-inspect { @include test(green, 0.3); } // TEMP!
.t-inspector, .l-inspect,
.t-inspector table tr td { .l-inspect table tr td {
font-size: 0.7rem; font-size: 0.7rem;
} }
.t-inspector { .l-inspect {
color: $colorInspectorFg;
.pane-header {
color: pushBack($colorInspectorFg, 20%);
font-size: 0.8rem;
}
ul li, ul li,
em { em {
display: block; display: block;
@@ -36,7 +42,6 @@
} }
ul li { ul li {
line-height: 130%;
margin-bottom: $interiorMarginLg * 2; margin-bottom: $interiorMarginLg * 2;
} }
@@ -61,7 +66,6 @@
white-space: nowrap; white-space: nowrap;
} }
&.value { &.value {
//word-wrap: break-word; // Doesn't work in <td>?
word-break: break-all; word-break: break-all;
} }
} }
@@ -70,4 +74,29 @@
border-top: none !important; border-top: none !important;
} }
} }
.inspector-location {
line-height: 180%;
.location-item {
cursor: pointer;
display: inline;
position: relative;
padding: 2px 4px;
&:hover {
background: $colorItemTreeHoverBg;
color: $colorItemTreeHoverFg;
.icon {
color: $colorItemTreeIconHover;
}
}
}
&:not(.first):before {
color: pushBack($colorInspectorFg, 15%);
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size:7px;
width: 4px;
}
}
} }

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

@@ -249,7 +249,7 @@ label.checkbox.custom {
.l-elem-wrapper { .l-elem-wrapper {
//@include test(#66f, 0.2); //@include test(#66f, 0.2);
@include webkitProp(justify-content, flex-start); @include justify-content(flex-start);
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

4
platform/commonUI/general/res/sass/tree/_tree.scss
View File

@@ -125,8 +125,8 @@ ul.tree {
// NOTE: [Mobile] Removed Hover on Mobile // NOTE: [Mobile] Removed Hover on Mobile
@include desktop { @include desktop {
&:hover { &:hover {
background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%); background: $colorItemTreeHoverBg;
color: pullForward($colorBodyFg, 20%); color: $colorItemTreeHoverFg;
.icon { .icon {
color: $colorItemTreeIconHover; color: $colorItemTreeIconHover;
} }

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

@@ -212,7 +212,7 @@
width: $ueBrowseLeftPaneTreeW; width: $ueBrowseLeftPaneTreeW;
} }
&.t-inspect.right { &.t-inspect.right {
min-width: 150px; min-width: 100px;
max-width: 800px; max-width: 800px;
width: $ueBrowseRightPaneInspectW; width: $ueBrowseRightPaneInspectW;
} }
@@ -234,6 +234,14 @@
.pane { .pane {
position: absolute; position: absolute;
.pane-header {
text-transform: uppercase;
height: $ueTopBarH;
line-height: $ueTopBarH;
margin-bottom: $interiorMargin;
}
&.treeview.left { &.treeview.left {
.create-btn-holder { .create-btn-holder {
bottom: auto; bottom: auto;
@@ -381,7 +389,6 @@
} }
} }
// MOVED from mobile/_layout.scss
// 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.

22
platform/commonUI/general/res/templates/label.html
View File

@@ -20,15 +20,15 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<span class="label s-label"> <span class="label s-label">
<span class='ui-symbol icon type-icon'> <span class='ui-symbol icon type-icon'>
{{type.getGlyph()}} {{type.getGlyph()}}
<span <span
class='ui-symbol icon l-icon-link' class='ui-symbol icon l-icon-link'
ng-show="location.isLink()" ng-show="location.isLink()"
></span> ></span>
<span class='ui-symbol icon l-icon-alert'></span> <span class='ui-symbol icon l-icon-alert'></span>
</span> </span>
<span class='title-label'> <span class='title-label'>
{{model.name}} {{model.name}}
</span> </span>
</span> </span>

15
platform/commonUI/general/res/templates/object-inspector.html
View File

@@ -19,7 +19,8 @@
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.
--> -->
<span ng-controller="ObjectInspectorController as controller"> <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div class="pane-header">Inspection</div>
<ul> <ul>
<li> <li>
<em>Properties</em> <em>Properties</em>
@@ -33,22 +34,26 @@
<li ng-if="contextutalParents.length > 0"> <li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em> <em title="The location of this linked object.">Location</em>
<span class="inspector-location" <span class="inspector-location"
ng-repeat="parent in contextutalParents"> ng-repeat="parent in contextutalParents"
ng-class="{ first:$index === 0 }">
<mct-representation key="'label'" <mct-representation key="'label'"
mct-object="parent" mct-object="parent"
ng-model="ngModel" ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"> ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation> </mct-representation>
</span> </span>
</li> </li>
<li ng-if="primaryParents.length > 0"> <li ng-if="primaryParents.length > 0">
<em title="The location of the original object that this was linked from.">Original Location</em> <em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location" <span class="inspector-location"
ng-repeat="parent in primaryParents"> ng-repeat="parent in primaryParents"
ng-class="{ first:$index === 0 }">
<mct-representation key="'label'" <mct-representation key="'label'"
mct-object="parent" mct-object="parent"
ng-model="ngModel" ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"> ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation> </mct-representation>
</span> </span>
</li> </li>

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

@@ -1259,21 +1259,27 @@ mct-container {
*****************************************************************************/ *****************************************************************************/
/* Styles for the Inspector pane */ /* Styles for the Inspector pane */
/* line 26, ../../../../general/res/sass/_inspector.scss */ /* line 26, ../../../../general/res/sass/_inspector.scss */
.t-inspector, .l-inspect,
.t-inspector table tr td { .l-inspect table tr td {
font-size: 0.7rem; } font-size: 0.7rem; }
/* line 32, ../../../../general/res/sass/_inspector.scss */ /* line 31, ../../../../general/res/sass/_inspector.scss */
.t-inspector ul li, .l-inspect {
.t-inspector em { color: #999; }
/* line 33, ../../../../general/res/sass/_inspector.scss */
.l-inspect .pane-header {
color: #666666;
font-size: 0.8rem; }
/* line 38, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li,
.l-inspect em {
display: block; display: block;
position: relative; } position: relative; }
/* line 38, ../../../../general/res/sass/_inspector.scss */ /* line 44, ../../../../general/res/sass/_inspector.scss */
.t-inspector ul li { .l-inspect ul li {
line-height: 130%;
margin-bottom: 20px; } margin-bottom: 20px; }
/* line 43, ../../../../general/res/sass/_inspector.scss */ /* line 48, ../../../../general/res/sass/_inspector.scss */
.t-inspector em { .l-inspect em {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
@@ -1282,23 +1288,47 @@ mct-container {
margin-bottom: 5px; margin-bottom: 5px;
padding: 5px 5px; padding: 5px 5px;
text-transform: uppercase; } text-transform: uppercase; }
/* line 53, ../../../../general/res/sass/_inspector.scss */ /* line 58, ../../../../general/res/sass/_inspector.scss */
.t-inspector table tr td { .l-inspect table tr td {
border: none; border: none;
border-top: 1px solid rgba(153, 153, 153, 0.1) !important; border-top: 1px solid rgba(153, 153, 153, 0.1) !important;
padding: 2px 0; padding: 2px 0;
vertical-align: top; } vertical-align: top; }
/* line 58, ../../../../general/res/sass/_inspector.scss */ /* line 63, ../../../../general/res/sass/_inspector.scss */
.t-inspector table tr td.label { .l-inspect table tr td.label {
color: #666666 !important; color: #666666 !important;
padding-right: 5px !important; padding-right: 5px !important;
white-space: nowrap; } white-space: nowrap; }
/* line 63, ../../../../general/res/sass/_inspector.scss */ /* line 68, ../../../../general/res/sass/_inspector.scss */
.t-inspector table tr td.value { .l-inspect table tr td.value {
word-break: break-all; } word-break: break-all; }
/* line 69, ../../../../general/res/sass/_inspector.scss */ /* line 73, ../../../../general/res/sass/_inspector.scss */
.t-inspector table tr:first-child td { .l-inspect table tr:first-child td {
border-top: none !important; } border-top: none !important; }
/* line 78, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location {
line-height: 180%; }
/* line 80, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item {
cursor: pointer;
display: inline;
position: relative;
padding: 2px 4px; }
/* line 85, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover {
background: rgba(153, 153, 153, 0.1);
color: #cccccc; }
/* line 88, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon {
color: #33ccff; }
/* line 93, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.first):before {
color: #737373;
content: '\3e';
display: inline-block;
font-family: symbolsfont;
font-size: 7px;
width: 4px; }
/********************************* CONTROLS */ /********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */ /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
@@ -2016,8 +2046,8 @@ label.checkbox.custom {
margin-right: 5px; } margin-right: 5px; }
/* line 250, ../../../../general/res/sass/controls/_controls.scss */ /* line 250, ../../../../general/res/sass/controls/_controls.scss */
.object-header .l-elem-wrapper { .object-header .l-elem-wrapper {
justify-content: flex-start; -webkit-justify-content: flex-start;
-webkit-justify-content: flex-start; } justify-content: flex-start; }
/* line 253, ../../../../general/res/sass/controls/_controls.scss */ /* line 253, ../../../../general/res/sass/controls/_controls.scss */
.object-header .l-elem-wrapper mct-representation { .object-header .l-elem-wrapper mct-representation {
min-width: 0.7em; } min-width: 0.7em; }
@@ -3689,9 +3719,9 @@ span.req {
width: 25%; } width: 25%; }
/* line 214, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 214, ../../../../general/res/sass/user-environ/_layout.scss */
.browse-mode .split-layout .split-pane-component.pane.t-inspect.right { .browse-mode .split-layout .split-pane-component.pane.t-inspect.right {
min-width: 150px; min-width: 100px;
max-width: 800px; max-width: 800px;
width: 10%; } width: 20%; }
/* line 225, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 225, ../../../../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 {
@@ -3705,47 +3735,53 @@ span.req {
.pane { .pane {
position: absolute; } position: absolute; }
/* line 238, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 238, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .pane-header {
text-transform: uppercase;
height: 24px;
line-height: 24px;
margin-bottom: 5px; }
/* line 246, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder { .pane.treeview.left .create-btn-holder {
bottom: auto; bottom: auto;
top: 0; top: 0;
height: 24px; } height: 24px; }
/* line 242, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder .wrapper.menu-element { .pane.treeview.left .create-btn-holder .wrapper.menu-element {
position: absolute; position: absolute;
bottom: 5px; } bottom: 5px; }
/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 255, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder { .pane.treeview.left .search-holder {
top: 34px; } top: 34px; }
/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 258, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
overflow: auto; overflow: auto;
top: 64px; } top: 64px; }
/* line 256, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane { .pane .mini-tab.toggle-pane {
z-index: 2; } z-index: 2; }
@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 256, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane { .pane .mini-tab.toggle-pane {
top: 5px; } top: 5px; }
/* line 262, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 270, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left {
left: -30px; } left: -30px; }
/* line 265, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 273, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after {
content: 'F'; } content: 'F'; }
/* line 268, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 276, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed {
left: -25px; } left: -25px; }
/* line 272, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right {
right: -25px; } right: -25px; }
/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 283, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after {
content: '\e608'; } content: '\e608'; }
/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 286, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed {
right: -20px; } } right: -20px; } }
/* line 287, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 295, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .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 .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,
@@ -3758,31 +3794,31 @@ 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 298, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 306, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 309, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 308, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 316, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 319, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 323, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 325, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 3px; } right: 3px; }
/* line 325, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: hidden; overflow: hidden;
top: 34px; } top: 34px; }
/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 336, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder > ng-include { .object-holder > ng-include {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@@ -3792,11 +3828,11 @@ span.req {
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 340, ../../../../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 338, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 346, ../../../../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,
@@ -3808,12 +3844,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 351, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 359, ../../../../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 356, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 364, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
@@ -3829,36 +3865,36 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 372, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 366, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 382, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex { .l-flex {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
flex-flow: row nowrap; flex-flow: row nowrap;
-webkit-flex-flow: row nowrap; } -webkit-flex-flow: row nowrap; }
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 385, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left { .l-flex .left {
flex: 1 1 0; flex: 1 1 0;
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
padding-right: 10px; } padding-right: 10px; }
/* line 390, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 397, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.left.treeview, .pane-tree-hidden .pane.left.treeview,
.pane-tree-hidden .splitter-treeview { .pane-tree-hidden .splitter-treeview {
opacity: 0; } opacity: 0; }
/* line 395, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 402, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.items { .pane-tree-hidden .pane.right.items {
left: 15px !important; } left: 15px !important; }
/* line 402, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 409, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .pane.left.treeview, .pane-tree-showing .pane.left.treeview,
.pane-tree-showing .splitter-treeview { .pane-tree-showing .splitter-treeview {
-moz-transition-property: opacity, background-color, border-color, color; -moz-transition-property: opacity, background-color, border-color, color;
@@ -3879,7 +3915,7 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 411, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 418, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .pane.right, .pane-inspect-showing .l-object-and-inspector .pane.right,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect { .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity, background-color, border-color, color; -moz-transition-property: opacity, background-color, border-color, color;
@@ -3900,16 +3936,16 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 420, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 427, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.right, .pane-inspect-hidden .l-object-and-inspector .pane.right,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect { .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
opacity: 0; } opacity: 0; }
/* line 424, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 431, ../../../../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: 15px !important; } right: 15px !important; }
@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 431, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 438, ../../../../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;

4
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@@ -73,7 +73,7 @@ $colorInputFg: pullForward($colorBodyFg, 20%);
$colorFormText: rgba(#fff, 0.5); $colorFormText: rgba(#fff, 0.5);
$colorInputIcon: pushBack($colorBodyFg, 15%); $colorInputIcon: pushBack($colorBodyFg, 15%);
// Inspector - TO-DO: Add to snow theme // Inspector
$colorInspectorFg: $colorBodyFg; $colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 20%); $colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: $colorInspectorFg; $colorInspectorPropVal: $colorInspectorFg;
@@ -134,6 +134,8 @@ $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%); $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree // Tree
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%); $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeFg: $colorBodyFg; $colorItemTreeFg: $colorBodyFg;

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

File diff suppressed because it is too large Load Diff

9
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@@ -75,6 +75,13 @@ $colorInputIcon: pushBack($colorBodyFg, 25%);
$colorSelectBg: #ddd; $colorSelectBg: #ddd;
$colorSelectFg: $colorBodyFg; $colorSelectFg: $colorBodyFg;
// Inspector
$colorInspectorFg: $colorBodyFg;
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
$colorInspectorPropVal: $colorInspectorFg;
$colorInspectorSectionHeaderBg: pullForward($colorBodyBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorBodyBg, 40%);
// Limits and staleness colors// // Limits and staleness colors//
$colorTelemFresh: pullForward($colorBodyFg, 20%); $colorTelemFresh: pullForward($colorBodyFg, 20%);
$colorTelemStale: pushBack($colorBodyFg, 20%); $colorTelemStale: pushBack($colorBodyFg, 20%);
@@ -110,6 +117,7 @@ $colorItemBgSelected: $colorKey;
// Tabular // Tabular
$colorTabBorder: pullForward($colorBodyBg, 10%); $colorTabBorder: pullForward($colorBodyBg, 10%);
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorTabBodyBg: $colorBodyBg; $colorTabBodyBg: $colorBodyBg;
$colorTabBodyFg: pullForward($colorBodyFg, 20%); $colorTabBodyFg: pullForward($colorBodyFg, 20%);
$colorTabHeaderBg: pullForward($colorBodyBg, 10%); $colorTabHeaderBg: pullForward($colorBodyBg, 10%);
@@ -125,6 +133,7 @@ $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%); $colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree // Tree
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
$colorItemTreeIcon: $colorKey; $colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%); $colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorKey; $colorItemTreeVCHover: $colorKey;