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

[Frontend] Splitter re-styling

Browse Source 
open #90
Significant redo of splitter styling;
This commit is contained in:
Charles Hacskaylo 2015-10-23 20:06:38 -07:00
parent aa3cf70b22
commit 94649b12fd
9 changed files with 301 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,7 +53,7 @@
<mct-splitter class="splitter-treeview mobile-hide"></mct-splitter> <mct-splitter class="splitter-treeview mobile-hide"></mct-splitter>
<div class='split-pane-component items pane right'> <div class='split-pane-component items pane primary-pane right'>
<a class="mini-tab anchor-left toggle-pane toggle-tree" <a class="mini-tab anchor-left toggle-pane toggle-tree"
title="Click to {{ modelPaneTree.visible()? 'hide' : 'show' }} the tree pane" title="Click to {{ modelPaneTree.visible()? 'hide' : 'show' }} the tree pane"
ng-click="modelPaneTree.toggle()" ng-click="modelPaneTree.toggle()"
@ -62,7 +62,7 @@
ng-controller="PaneController as modelPaneInspect" ng-controller="PaneController as modelPaneInspect"
ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'"> ng-class="modelPaneInspect.visible() ? 'pane-inspect-showing' : 'pane-inspect-hidden'">
<mct-split-pane class='l-object-and-inspector contents abs' anchor='right'> <mct-split-pane class='l-object-and-inspector contents abs' anchor='right'>
<div class='split-pane-component t-object pane left'> <div class='split-pane-component t-object pane primary-pane left'>
<a class="mini-tab anchor-right mobile-hide toggle-pane toggle-inspect" <a class="mini-tab anchor-right mobile-hide toggle-pane toggle-inspect"
title="Click to {{ modelPaneInspect.visible()? 'hide' : 'show' }} the Inspection pane" title="Click to {{ modelPaneInspect.visible()? 'hide' : 'show' }} the Inspection pane"
ng-click="modelPaneInspect.toggle()" ng-click="modelPaneInspect.toggle()"

26
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -41,39 +41,39 @@
width: $d; width: $d;
} }
@mixin trans-prop-nice($prop, $t: 500ms, $delay: 0) { @mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
// This only works for a single property right now // Multiple $props must be in parans like this: (left, right)
@if $t == 0 { @if $dur == 0 {
@include transition-property(none); @include transition-property(none);
} @else { } @else {
@include transition-property($prop); @include transition-property($props);
@include transition-duration($t); @include transition-duration($dur);
@include transition-timing-function(ease-in-out); @include transition-timing-function(ease-in-out);
@include transition-delay($delay); @include transition-delay($delay);
} }
} }
@mixin trans-prop-nice-fade($t: 500ms, $delay: 0) { @mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
@if $t == 0 { @if $dur == 0 {
@include transition-property(none); @include transition-property(none);
} @else { } @else {
@include transition-property(opacity, background-color, border-color, color); @include transition-property(opacity, background-color, border-color, color);
@include transition-duration($t); @include transition-duration($dur);
@include transition-timing-function(ease-in-out); @include transition-timing-function(ease-in-out);
@include transition-delay($delay); @include transition-delay($delay);
} }
} }
@mixin trans-prop-nice-resize-h($t: 500ms, $delay: 0) { @mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
@include transition-property(height, bottom, top); @include transition-property(height, bottom, top);
@include transition-duration($t); @include transition-duration($dur);
@include transition-timing-function(ease-in-out); @include transition-timing-function(ease-in-out);
@include transition-delay($delay); @include transition-delay($delay);
} }
@mixin trans-prop-nice-resize-w($t: 500ms, $delay: 0) { @mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
@include transition-property(width, left, right); @include transition-property(width, left, right);
@include transition-duration($t); @include transition-duration($dur);
@include transition-timing-function(ease-in-out); @include transition-timing-function(ease-in-out);
@include transition-delay($delay); @include transition-delay($delay);
} }
@ -162,7 +162,7 @@
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) { @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
//&:before { //&:before {
@include trans-prop-nice("border-color", 25ms); //@include trans-prop-nice("border-color", 25ms);
content: ''; content: '';
display: block; display: block;
//height: auto; //height: auto;

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

@ -19,71 +19,87 @@
* 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.
*****************************************************************************/ *****************************************************************************/
.split-layout {
$b: pullForward($colorBodyBg, $contrastRatioPercent);
.splitter { .splitter {
background-color: $b; // Redo the splitter.
@include border-radius($splitterEndCr); // New look is a simple line.
@include boxShdw($splitterShdw); // Main width is used to provide a good click area, and is always transparent
//overflow: hidden; // :after will be a positioned and colored element that is the handle
position: absolute; display: block;
z-index: 1; position: absolute;
z-index: 1;
&:after {
// The handle
content:"";
pointer-events: none;
@include absPosDefault(0);
background: $colorSplitterBg;
display: block;
@if $splitterEndCr != 'none' {
@include border-radius($splitterEndCr);
}
}
&:active {
&:after {
background: $colorSplitterActive;
}
}
@if $colorSplitterHover != 'none' {
&:hover { &:hover {
background-color: $colorSplitterHover; background: $colorSplitterHover;
&:after {
//@include trans-prop-nice("border-color", 25ms);
border-color: $colorGrippyInteriorHover !important;
}
} }
&:active { }
background-color: pullForward($b, 5%); }
}
} .split-layout {
&.horizontal { &.horizontal {
// Slides vertically up and down, splitting the element horizontally // Slides vertically up and down, splitting the element horizontally
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
.pane { .pane {
left: 0; left: 0;
right: 0; right: 0;
&.top { &.top {
bottom: auto; bottom: auto;
}
&.bottom {
top: auto;
}
}
>.splitter {
&:after {
@include controlGrippy($colorSplitterInterior, horizontal);
} }
cursor: row-resize; &.bottom {
left: 0; right: 0; top: auto;
width: auto;
height: $splitterW;
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
top: 0;
bottom: 0;
&.left {
right: auto;
}
&.right {
left: auto;
}
}
>.splitter {
bottom: 0;
cursor: col-resize;
width: $splitterW;
&:after {
@include controlGrippy($colorBodyBg, vertical);
} }
} }
} >.splitter {
cursor: row-resize;
left: 0;
right: 0;
height: $splitterD;
&:after {
top: $splitterHandleInset; bottom: $splitterHandleInset;
}
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
top: 0;
bottom: 0;
&.left {
right: auto;
}
&.right {
left: auto;
}
}
>.splitter {
cursor: col-resize;
top: 0;
bottom: 0;
width: $splitterD;
&:after {
left: $splitterHandleInset; right: $splitterHandleInset;
}
}
}
} }
.browse-area .splitter { .browse-area .splitter {

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

@ -244,6 +244,11 @@
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }
.primary-pane {
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
z-index: 5;
}
&.treeview.left { &.treeview.left {
.create-btn-holder { .create-btn-holder {
bottom: auto; bottom: auto;
@ -264,7 +269,8 @@
} }
.mini-tab.toggle-pane { .mini-tab.toggle-pane {
$paneOffset: -1 * ($uePaneMiniTabW + $interiorMargin + $splitterW); //@include test(blue, 0.6);
$paneOffset: -2 * $splitterD;
$paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM; $paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
z-index: 2; z-index: 2;
@include desktop { @include desktop {
@ -406,7 +412,7 @@
// Sets the left tree menu when the tree is shown. // Sets the left tree menu when the tree is shown.
.pane.left.treeview, .pane.left.treeview,
.splitter-treeview { .splitter-treeview {
@include trans-prop-nice-fade(250ms, 250ms); @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1; opacity: 1;
} }
} }
@ -415,7 +421,7 @@
.l-object-and-inspector { .l-object-and-inspector {
.pane.right, .pane.right,
.splitter-inspect { .splitter-inspect {
@include trans-prop-nice-fade(250ms, 250ms); @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1; opacity: 1;
} }
} }

2
platform/commonUI/general/src/directives/MCTSplitPane.js
View File

@ -135,7 +135,7 @@ define(
splitter.css(anchor.edge, (firstSize + splitterSize) + 'px'); splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
splitter.css(anchor.opposite, "auto"); splitter.css(anchor.opposite, "auto");
last.css(anchor.edge, (firstSize + splitterSize * 3) + 'px'); last.css(anchor.edge, (firstSize + splitterSize * 2) + 'px');
last.css(anchor.opposite, "0px"); last.css(anchor.opposite, "0px");
position = firstSize + splitterSize; position = firstSize + splitterSize;

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

@ -900,123 +900,78 @@ mct-container {
* 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.
*****************************************************************************/ *****************************************************************************/
/* line 25, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 23, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter { .splitter {
background-color: #454545; display: block;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
/* line 32, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 31, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:hover { .splitter:after {
background-color: none; } content: "";
/* line 34, ../../../../general/res/sass/helpers/_splitter.scss */ pointer-events: none;
.split-layout .splitter:hover:after { overflow: hidden;
border-color: #0099cc !important; } position: absolute;
/* line 39, ../../../../general/res/sass/helpers/_splitter.scss */ top: 0;
.split-layout .splitter:active { right: 0;
background-color: #525252; } bottom: 0;
/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */ left: 0;
width: auto;
height: auto;
background: #4d4d4d;
display: block; }
/* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
.splitter:active:after {
background: #0099cc; }
/* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal { .split-layout.horizontal {
overflow: hidden; } overflow: hidden; }
/* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 60, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane { .split-layout.horizontal .pane {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 49, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top { .split-layout.horizontal .pane.top {
bottom: auto; } bottom: auto; }
/* line 52, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom { .split-layout.horizontal .pane.bottom {
top: auto; } top: auto; }
/* line 56, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter { .split-layout.horizontal > .splitter {
cursor: row-resize; cursor: row-resize;
left: 0; left: 0;
right: 0; right: 0;
width: auto; height: 12px; }
height: 5px; } /* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
/* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter:after { .split-layout.horizontal > .splitter:after {
-moz-transition-property: "border-color"; top: 3px;
-o-transition-property: "border-color"; bottom: 3px; }
-webkit-transition-property: "border-color"; /* line 83, ../../../../general/res/sass/helpers/_splitter.scss */
transition-property: "border-color";
-moz-transition-duration: 25ms;
-o-transition-duration: 25ms;
-webkit-transition-duration: 25ms;
transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
content: '';
display: block;
pointer-events: none;
position: absolute;
z-index: 2;
border-top: 1px dotted #0d0d0d;
top: 2px;
left: 5px;
right: 5px;
height: 1px; }
/* line 68, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane { .split-layout.vertical .pane {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.left { .split-layout.vertical .pane.left {
right: auto; } right: auto; }
/* line 74, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.right { .split-layout.vertical .pane.right {
left: auto; } left: auto; }
/* line 78, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0;
cursor: col-resize; cursor: col-resize;
width: 5px; } top: 0;
/* line 82, ../../../../general/res/sass/helpers/_splitter.scss */ bottom: 0;
width: 12px; }
/* line 98, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter:after { .split-layout.vertical > .splitter:after {
-moz-transition-property: "border-color"; left: 3px;
-o-transition-property: "border-color"; right: 3px; }
-webkit-transition-property: "border-color";
transition-property: "border-color";
-moz-transition-duration: 25ms;
-o-transition-duration: 25ms;
-webkit-transition-duration: 25ms;
transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
content: '';
display: block;
pointer-events: none;
position: absolute;
z-index: 2;
border-left: 1px dotted #0d0d0d;
left: 2px;
bottom: 5px;
top: 5px;
width: 1px; }
/* line 89, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 105, ../../../../general/res/sass/helpers/_splitter.scss */
.browse-area .splitter { .browse-area .splitter {
top: 0; } top: 0; }
/* line 93, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 109, ../../../../general/res/sass/helpers/_splitter.scss */
.edit-area .splitter { .edit-area .splitter {
top: 0; } top: 0; }
@ -3913,59 +3868,62 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 248, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .primary-pane {
z-index: 5; }
/* line 253, ../../../../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 252, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 257, ../../../../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 257, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder { .pane.treeview.left .search-holder {
top: 34px; } top: 34px; }
/* line 260, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 265, ../../../../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 266, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 271, ../../../../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 271, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 277, ../../../../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: 0; left: 0;
-moz-transform: translateX(-25px); -moz-transform: translateX(-24px);
-ms-transform: translateX(-25px); -ms-transform: translateX(-24px);
-webkit-transform: translateX(-25px); -webkit-transform: translateX(-24px);
transform: translateX(-25px); } transform: translateX(-24px); }
/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 281, ../../../../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 276, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 282, ../../../../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 {
-moz-transform: translateX(-20px); -moz-transform: translateX(-20px);
-ms-transform: translateX(-20px); -ms-transform: translateX(-20px);
-webkit-transform: translateX(-20px); -webkit-transform: translateX(-20px);
transform: translateX(-20px); } transform: translateX(-20px); }
/* line 280, ../../../../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 { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right {
right: 0; right: 0;
-moz-transform: translateX(25px); -moz-transform: translateX(24px);
-ms-transform: translateX(25px); -ms-transform: translateX(24px);
-webkit-transform: translateX(25px); -webkit-transform: translateX(24px);
transform: translateX(25px); } transform: translateX(24px); }
/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 290, ../../../../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 285, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 291, ../../../../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 {
-moz-transform: translateX(20px); -moz-transform: translateX(20px);
-ms-transform: translateX(20px); -ms-transform: translateX(20px);
-webkit-transform: translateX(20px); -webkit-transform: translateX(20px);
transform: translateX(20px); } } transform: translateX(20px); } }
/* line 294, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 300, ../../../../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,
@ -3978,28 +3936,28 @@ 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 305, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 308, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 314, ../../../../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 317, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 323, ../../../../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 321, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 327, ../../../../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 323, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 329, ../../../../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 331, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: hidden; overflow: hidden;
top: 34px; } top: 34px; }
/* line 334, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder > ng-include { .object-holder > ng-include {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -4009,11 +3967,11 @@ span.req {
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 344, ../../../../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 344, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 350, ../../../../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,
@ -4025,12 +3983,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 357, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 363, ../../../../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 362, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
@ -4046,42 +4004,42 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 370, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 378, ../../../../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 380, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 386, ../../../../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 383, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 389, ../../../../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 395, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 401, ../../../../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 400, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 406, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.items { .pane-tree-hidden .pane.right.items {
left: 10px !important; } left: 10px !important; }
/* line 407, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 413, ../../../../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;
-o-transition-property: opacity, background-color, border-color, color; -o-transition-property: opacity;
-webkit-transition-property: opacity, background-color, border-color, color; -webkit-transition-property: opacity;
transition-property: opacity, background-color, border-color, color; transition-property: opacity;
-moz-transition-duration: 250ms; -moz-transition-duration: 250ms;
-o-transition-duration: 250ms; -o-transition-duration: 250ms;
-webkit-transition-duration: 250ms; -webkit-transition-duration: 250ms;
@ -4096,13 +4054,13 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 416, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 422, ../../../../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;
-o-transition-property: opacity, background-color, border-color, color; -o-transition-property: opacity;
-webkit-transition-property: opacity, background-color, border-color, color; -webkit-transition-property: opacity;
transition-property: opacity, background-color, border-color, color; transition-property: opacity;
-moz-transition-duration: 250ms; -moz-transition-duration: 250ms;
-o-transition-duration: 250ms; -o-transition-duration: 250ms;
-webkit-transition-duration: 250ms; -webkit-transition-duration: 250ms;
@ -4117,16 +4075,16 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 425, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 431, ../../../../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 429, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 435, ../../../../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: 10px !important; } right: 10px !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 436, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 442, ../../../../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;

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

@ -154,12 +154,13 @@ $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px; $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
// Splitter // Splitter
$splitterD: 12px;
$splitterHandleInset: 3px;
$colorSplitterBg: pullForward($colorBodyBg, 10%);
$splitterShdw: rgba(black, 0.4) 0 0 3px; $splitterShdw: rgba(black, 0.4) 0 0 3px;
$colorSplitterInterior: $colorBodyBg; $splitterEndCr: none;
$colorSplitterHover: none; $colorSplitterHover: none;
$splitterW: 5px; $colorSplitterActive: $colorKey;
$splitterEndCr: 1px;
$colorGrippyInteriorHover: $colorKey;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 5%); $colorMobilePaneLeft: darken($colorBodyBg, 5%);

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

@ -900,120 +900,78 @@ mct-container {
* 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.
*****************************************************************************/ *****************************************************************************/
/* line 25, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 23, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter { .splitter {
background-color: #969696; display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: absolute; position: absolute;
z-index: 1; } z-index: 1; }
/* line 32, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 31, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:hover { .splitter:after {
background-color: #0099cc; } content: "";
/* line 34, ../../../../general/res/sass/helpers/_splitter.scss */ pointer-events: none;
.split-layout .splitter:hover:after { overflow: hidden;
border-color: #fcfcfc !important; } position: absolute;
/* line 39, ../../../../general/res/sass/helpers/_splitter.scss */ top: 0;
.split-layout .splitter:active { right: 0;
background-color: #898989; } bottom: 0;
/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */ left: 0;
width: auto;
height: auto;
background: #e3e3e3;
display: block; }
/* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
.splitter:active:after {
background: #0099cc; }
/* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal { .split-layout.horizontal {
overflow: hidden; } overflow: hidden; }
/* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 60, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane { .split-layout.horizontal .pane {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 49, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top { .split-layout.horizontal .pane.top {
bottom: auto; } bottom: auto; }
/* line 52, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom { .split-layout.horizontal .pane.bottom {
top: auto; } top: auto; }
/* line 56, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter { .split-layout.horizontal > .splitter {
cursor: row-resize; cursor: row-resize;
left: 0; left: 0;
right: 0; right: 0;
width: auto; height: 15px; }
height: 5px; } /* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
/* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter:after { .split-layout.horizontal > .splitter:after {
-moz-transition-property: "border-color"; top: 6px;
-o-transition-property: "border-color"; bottom: 6px; }
-webkit-transition-property: "border-color"; /* line 83, ../../../../general/res/sass/helpers/_splitter.scss */
transition-property: "border-color";
-moz-transition-duration: 25ms;
-o-transition-duration: 25ms;
-webkit-transition-duration: 25ms;
transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
content: '';
display: block;
pointer-events: none;
position: absolute;
z-index: 2;
border-top: 1px dotted #d6d6d6;
top: 2px;
left: 5px;
right: 5px;
height: 1px; }
/* line 68, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane { .split-layout.vertical .pane {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.left { .split-layout.vertical .pane.left {
right: auto; } right: auto; }
/* line 74, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.right { .split-layout.vertical .pane.right {
left: auto; } left: auto; }
/* line 78, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0;
cursor: col-resize; cursor: col-resize;
width: 5px; } top: 0;
/* line 82, ../../../../general/res/sass/helpers/_splitter.scss */ bottom: 0;
width: 15px; }
/* line 98, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter:after { .split-layout.vertical > .splitter:after {
-moz-transition-property: "border-color"; left: 6px;
-o-transition-property: "border-color"; right: 6px; }
-webkit-transition-property: "border-color";
transition-property: "border-color";
-moz-transition-duration: 25ms;
-o-transition-duration: 25ms;
-webkit-transition-duration: 25ms;
transition-duration: 25ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-moz-transition-delay: 0;
-o-transition-delay: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
content: '';
display: block;
pointer-events: none;
position: absolute;
z-index: 2;
border-left: 1px dotted #d6d6d6;
left: 2px;
bottom: 5px;
top: 5px;
width: 1px; }
/* line 89, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 105, ../../../../general/res/sass/helpers/_splitter.scss */
.browse-area .splitter { .browse-area .splitter {
top: 0; } top: 0; }
/* line 93, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 109, ../../../../general/res/sass/helpers/_splitter.scss */
.edit-area .splitter { .edit-area .splitter {
top: 0; } top: 0; }
@ -3851,59 +3809,62 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 248, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .primary-pane {
z-index: 5; }
/* line 253, ../../../../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 252, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 257, ../../../../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 257, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder { .pane.treeview.left .search-holder {
top: 34px; } top: 34px; }
/* line 260, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 265, ../../../../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 266, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 271, ../../../../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 271, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 277, ../../../../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: 0; left: 0;
-moz-transform: translateX(-25px); -moz-transform: translateX(-30px);
-ms-transform: translateX(-25px); -ms-transform: translateX(-30px);
-webkit-transform: translateX(-25px); -webkit-transform: translateX(-30px);
transform: translateX(-25px); } transform: translateX(-30px); }
/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 281, ../../../../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 276, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 282, ../../../../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 {
-moz-transform: translateX(-20px); -moz-transform: translateX(-20px);
-ms-transform: translateX(-20px); -ms-transform: translateX(-20px);
-webkit-transform: translateX(-20px); -webkit-transform: translateX(-20px);
transform: translateX(-20px); } transform: translateX(-20px); }
/* line 280, ../../../../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 { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right {
right: 0; right: 0;
-moz-transform: translateX(25px); -moz-transform: translateX(30px);
-ms-transform: translateX(25px); -ms-transform: translateX(30px);
-webkit-transform: translateX(25px); -webkit-transform: translateX(30px);
transform: translateX(25px); } transform: translateX(30px); }
/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 290, ../../../../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 285, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 291, ../../../../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 {
-moz-transform: translateX(20px); -moz-transform: translateX(20px);
-ms-transform: translateX(20px); -ms-transform: translateX(20px);
-webkit-transform: translateX(20px); -webkit-transform: translateX(20px);
transform: translateX(20px); } } transform: translateX(20px); } }
/* line 294, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 300, ../../../../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,
@ -3916,28 +3877,28 @@ 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 305, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 311, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 308, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 314, ../../../../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 317, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 323, ../../../../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 321, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 327, ../../../../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 323, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 329, ../../../../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 331, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: hidden; overflow: hidden;
top: 34px; } top: 34px; }
/* line 334, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder > ng-include { .object-holder > ng-include {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -3947,11 +3908,11 @@ span.req {
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 344, ../../../../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 344, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 350, ../../../../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,
@ -3963,12 +3924,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 357, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 363, ../../../../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 362, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 368, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
@ -3984,42 +3945,42 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 370, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 376, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 372, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 378, ../../../../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 380, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 386, ../../../../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 383, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 389, ../../../../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 395, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 401, ../../../../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 400, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 406, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.items { .pane-tree-hidden .pane.right.items {
left: 10px !important; } left: 10px !important; }
/* line 407, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 413, ../../../../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;
-o-transition-property: opacity, background-color, border-color, color; -o-transition-property: opacity;
-webkit-transition-property: opacity, background-color, border-color, color; -webkit-transition-property: opacity;
transition-property: opacity, background-color, border-color, color; transition-property: opacity;
-moz-transition-duration: 250ms; -moz-transition-duration: 250ms;
-o-transition-duration: 250ms; -o-transition-duration: 250ms;
-webkit-transition-duration: 250ms; -webkit-transition-duration: 250ms;
@ -4034,13 +3995,13 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 416, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 422, ../../../../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;
-o-transition-property: opacity, background-color, border-color, color; -o-transition-property: opacity;
-webkit-transition-property: opacity, background-color, border-color, color; -webkit-transition-property: opacity;
transition-property: opacity, background-color, border-color, color; transition-property: opacity;
-moz-transition-duration: 250ms; -moz-transition-duration: 250ms;
-o-transition-duration: 250ms; -o-transition-duration: 250ms;
-webkit-transition-duration: 250ms; -webkit-transition-duration: 250ms;
@ -4055,16 +4016,16 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 425, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 431, ../../../../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 429, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 435, ../../../../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: 10px !important; } right: 10px !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 436, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 442, ../../../../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;

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

@ -152,12 +152,13 @@ $scrollbarThumbColor: darken($colorBodyBg, 50%);//
$scrollbarThumbColorHov: $colorKey; $scrollbarThumbColorHov: $colorKey;
// Splitter // Splitter
$splitterD: 15px;
$splitterHandleInset: 6px;
$colorSplitterBg: pullForward($colorBodyBg, 10%);
$splitterShdw: none; $splitterShdw: none;
$colorSplitterInterior: $colorBodyBg; $splitterEndCr: none;
$colorSplitterHover: $colorKey; $colorSplitterHover: none;
$splitterW: 5px; $colorSplitterActive: $colorKey;
$splitterEndCr: $splitterW;
$colorGrippyInteriorHover: $colorBodyBg;
// Mobile // Mobile
$colorMobilePaneLeft: darken($colorBodyBg, 2%); $colorMobilePaneLeft: darken($colorBodyBg, 2%);