diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c503b222f4..ec9f0aac32 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -785,7 +785,7 @@ mct-container {
left: 0; }
/* line 31, ../sass/mobile/_layout.scss */
- .pane.left {
+ .pane.left.treeview {
background-color: #222; }
/* line 35, ../sass/mobile/_layout.scss */
@@ -797,8 +797,17 @@ mct-container {
transition-timing-function: ease;
backface-visibility: hidden;
margin-left: 0 !important; }
+ /* line 39, ../sass/mobile/_layout.scss */
+ .pane.right-repr #content-area {
+ -moz-transition-duration: 0.35s;
+ -o-transition-duration: 0.35s;
+ -webkit-transition-duration: 0.35s;
+ transition-duration: 0.35s;
+ transition-timing-function: ease;
+ backface-visibility: hidden;
+ opacity: 1; }
- /* line 41, ../sass/mobile/_layout.scss */
+ /* line 45, ../sass/mobile/_layout.scss */
.user-environ .browse-area,
.user-environ .edit-area,
.user-environ .editor {
@@ -807,38 +816,38 @@ mct-container {
right: 0;
bottom: 25px; }
- /* line 47, ../sass/mobile/_layout.scss */
+ /* line 51, ../sass/mobile/_layout.scss */
.holder.l-mobile {
top: 10px !important;
right: 10px !important;
bottom: 10px !important;
left: 10px !important; }
- /* line 57, ../sass/mobile/_layout.scss */
+ /* line 61, ../sass/mobile/_layout.scss */
.browse-hidetree {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
- /* line 61, ../sass/mobile/_layout.scss */
- .browse-hidetree .pane.left {
+ /* line 65, ../sass/mobile/_layout.scss */
+ .browse-hidetree .pane.left.treeview {
opacity: 0;
right: 100% !important;
width: auto !important;
overflow-y: hidden;
overflow-x: hidden; }
- /* line 70, ../sass/mobile/_layout.scss */
+ /* line 74, ../sass/mobile/_layout.scss */
.browse-hidetree .pane.right-repr {
left: 0 !important; }
- /* line 77, ../sass/mobile/_layout.scss */
+ /* line 79, ../sass/mobile/_layout.scss */
.browse-showtree {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
- /* line 86, ../sass/mobile/_layout.scss */
- .browse-showtree .pane.left {
+ /* line 88, ../sass/mobile/_layout.scss */
+ .browse-showtree .pane.left.treeview {
-moz-transition-property: opacity;
-o-transition-property: opacity;
-webkit-transition-property: opacity;
@@ -860,44 +869,44 @@ mct-container {
display: block !important;
right: auto !important;
width: 40% !important; }
- /* line 96, ../sass/mobile/_layout.scss */
+ /* line 98, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr {
left: 40% !important; }
- /* line 106, ../sass/mobile/_layout.scss */
+ /* line 107, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 110%;
position: absolute;
top: 12px;
left: 10px; }
- /* line 113, ../sass/mobile/_layout.scss */
+ /* line 114, ../sass/mobile/_layout.scss */
.object-browse-bar {
left: 30px !important; }
- /* line 116, ../sass/mobile/_layout.scss */
+ /* line 117, ../sass/mobile/_layout.scss */
.object-browse-bar .context-available {
opacity: 1 !important; }
- /* line 119, ../sass/mobile/_layout.scss */
+ /* line 120, ../sass/mobile/_layout.scss */
.object-browse-bar .view-switcher {
margin-right: 0 !important; }
- /* line 124, ../sass/mobile/_layout.scss */
+ /* line 125, ../sass/mobile/_layout.scss */
.tree-holder {
overflow-x: hidden !important; }
- /* line 128, ../sass/mobile/_layout.scss */
+ /* line 129, ../sass/mobile/_layout.scss */
.mobile-disable-select {
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none; }
- /* line 133, ../sass/mobile/_layout.scss */
+ /* line 134, ../sass/mobile/_layout.scss */
.mobile-hide,
.mobile-hide-important {
display: none !important; }
- /* line 138, ../sass/mobile/_layout.scss */
+ /* line 139, ../sass/mobile/_layout.scss */
.mobile-back-hide {
pointer-events: none;
-moz-transition-property: opacity;
@@ -914,7 +923,7 @@ mct-container {
transition-timing-function: ease-in-out;
opacity: 0; }
- /* line 143, ../sass/mobile/_layout.scss */
+ /* line 144, ../sass/mobile/_layout.scss */
.mobile-back-unhide {
pointer-events: all;
-moz-transition-property: opacity;
@@ -931,15 +940,18 @@ mct-container {
transition-timing-function: ease-in-out;
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) {
- /* line 152, ../sass/mobile/_layout.scss */
- .browse-showtree .pane.left {
+ /* line 153, ../sass/mobile/_layout.scss */
+ .browse-showtree .pane.left.treeview {
width: 90% !important; }
- /* line 155, ../sass/mobile/_layout.scss */
+ /* line 156, ../sass/mobile/_layout.scss */
.browse-showtree .pane.right-repr {
left: 0 !important;
- transform: translateX(90%); } }
+ transform: translateX(90%); }
+ /* line 159, ../sass/mobile/_layout.scss */
+ .browse-showtree .pane.right-repr #content-area {
+ 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) {
- /* line 163, ../sass/mobile/_layout.scss */
+ /* line 167, ../sass/mobile/_layout.scss */
.desktop-hide {
display: none; } }
/*****************************************************************************
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 008beef117..aee784f537 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,15 +24,22 @@
// Wrapper of the entire 2 panes, only enacted on
// phone and tablet. Also for the panes
.browse-wrapper,
- .mobile-pane {
- position: absolute;
+ .pane {
top: 0 !important; right: 0; bottom: 0; left: 0;
}
- .mobile-pane.right-repr {
+ .pane.left.treeview {
+ background-color: $colorMobilePaneLeft;
+ }
+
+ .pane.right-repr {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
+ #content-area {
+ @include slMenuTransitions;
+ opacity: 1;
+ }
}
.user-environ .browse-area,
@@ -55,7 +62,7 @@
@include user-select(none);
// Sets the left tree menu when the tree
// is hidden.
- .mobile-pane.left {
+ .pane.left.treeview {
opacity: 0;
right: 100% !important;
width: auto !important;
@@ -64,10 +71,8 @@
}
// Sets the right represenation when
// the tree is hidden.
- .mobile-pane.right-repr {
- //@include slMenuTransitions;
+ .pane.right-repr {
left: 0 !important;
- //width: 100% !important;
}
}
@@ -80,7 +85,7 @@
@include user-select(none);
// Sets the left tree menu when the tree is shown.
- .mobile-pane.left {
+ .pane.left.treeview {
@include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
opacity: 1;
@@ -90,8 +95,7 @@
width: $proporMenuWithView !important;
}
// Sets the right representation when the tree is shown.
- .mobile-pane.right-repr {
- //@include slMenuTransitions; CH MOVED
+ .pane.right-repr {
left: $proporMenuWithView !important;
//width: auto !important;
@@ -146,12 +150,15 @@
@include phonePortrait {
.browse-showtree {
- .mobile-pane.left {
+ .pane.left.treeview {
width: $proporMenuOnly !important;
}
- .mobile-pane.right-repr {
+ .pane.right-repr {
left: 0 !important;
transform: translateX($proporMenuOnly);
+ #content-area {
+ opacity: 0;
+ }
}
}
}
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index d67c0ccb9a..f04071fa0e 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -36,7 +36,7 @@
line-height: $ohH;
}
>.object-holder.abs {
- top: $ohH + $interiorMarginSm;
+ top: $ohH + $interiorMargin;
}
.contents {
$myM: $interiorMargin;