diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 12755dd3f1..b8ab9845cb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,16 +31,16 @@
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6fb970f646..33838faa7f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -754,124 +754,130 @@ mct-container {
width: 25%; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 46, ../sass/mobile/_layout.scss */
+ /* line 48, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left {
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;
+ -moz-transition-duration: 0.5s;
+ -o-transition-duration: 0.5s;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ transition-timing-function: ease;
width: 0px !important;
right: auto !important; }
- /* line 52, ../sass/mobile/_layout.scss */
+ /* line 54, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.left .createBtnPos {
overflow-y: hidden;
overflow-x: hidden; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 59, ../sass/mobile/_layout.scss */
+ /* line 61, ../sass/mobile/_layout.scss */
.browse-hidetree .pane-special.right {
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;
+ -moz-transition-duration: 0.5s;
+ -o-transition-duration: 0.5s;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ transition-timing-function: ease;
width: auto !important;
left: 0px !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 69, ../sass/mobile/_layout.scss */
+ /* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;
+ -moz-transition-duration: 0.5s;
+ -o-transition-duration: 0.5s;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ transition-timing-function: ease;
display: block !important;
right: auto !important; }
- /* line 75, ../sass/mobile/_layout.scss */
+ /* line 77, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left .createBtnPos {
+ height: inherit;
overflow-y: hidden;
overflow-x: hidden; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
- /* line 69, ../sass/mobile/_layout.scss */
+ /* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
width: 80% !important; } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 69, ../sass/mobile/_layout.scss */
+ /* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
width: 30% !important; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
- /* line 69, ../sass/mobile/_layout.scss */
+ /* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
- width: 40% !important; } }
+ width: 35% !important; } }
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 69, ../sass/mobile/_layout.scss */
+ /* line 71, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.left {
width: 25% !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 94, ../sass/mobile/_layout.scss */
+ /* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;
+ -moz-transition-duration: 0.5s;
+ -o-transition-duration: 0.5s;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ transition-timing-function: ease;
width: auto !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
- /* line 94, ../sass/mobile/_layout.scss */
+ /* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 80% !important; } }
@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 94, ../sass/mobile/_layout.scss */
+ /* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 30% !important; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
- /* line 94, ../sass/mobile/_layout.scss */
+ /* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
- left: 40% !important; } }
+ left: 35% !important; } }
@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 94, ../sass/mobile/_layout.scss */
+ /* line 97, ../sass/mobile/_layout.scss */
.browse-showtree .pane-special.right {
left: 25% !important; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 114, ../sass/mobile/_layout.scss */
+ /* line 117, ../sass/mobile/_layout.scss */
.mobile-splitter {
display: none; } }
-/* line 122, ../sass/mobile/_layout.scss */
+/* line 125, ../sass/mobile/_layout.scss */
.button-pos {
position: absolute;
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s; }
+ -moz-transition-duration: 0.5s;
+ -o-transition-duration: 0.5s;
+ -webkit-transition-duration: 0.5s;
+ transition-duration: 0.5s;
+ transition-timing-function: ease; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 127, ../sass/mobile/_layout.scss */
+ /* line 130, ../sass/mobile/_layout.scss */
.object-header-mobile {
position: relative;
left: 30px; } }
-/* line 134, ../sass/mobile/_layout.scss */
+/* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
top: 5px; }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 134, ../sass/mobile/_layout.scss */
+ /* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 125%; } }
@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 134, ../sass/mobile/_layout.scss */
+ /* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
font-size: 175%; } }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
- /* line 134, ../sass/mobile/_layout.scss */
+ /* line 137, ../sass/mobile/_layout.scss */
.mobile-menu-icon {
display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 148, ../sass/mobile/_layout.scss */
+ /* line 151, ../sass/mobile/_layout.scss */
.mobile-hide {
display: none; } }
@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
- /* line 154, ../sass/mobile/_layout.scss */
+ /* line 157, ../sass/mobile/_layout.scss */
.phone-hide {
display: none; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 1c10f59395..2886b8a7e6 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -69,6 +69,6 @@ $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
/************************** DEVICE PARAMETERS FOR MENUS */
$phoneMenuSizePortrait: 80%;
$phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 40%;
+$tabletMenuSizePortrait: 35%;
$tabletMenuSizeLandscape: 25%;
$desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index a59713c236..0cb3ac5307 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -42,10 +42,12 @@
}
}
+
+
.browse-hidetree {
.pane-special.left {
@include phoneandtablet {
- @include transition-duration(.2s);
+ @include slMenuTransitions;
width: 0px !important;
right: auto !important;
@@ -58,7 +60,7 @@
.pane-special.right {
@include phoneandtablet {
- @include transition-duration(.2s);
+ @include slMenuTransitions;
width: auto !important;
left: 0px !important;
}
@@ -68,14 +70,15 @@
.browse-showtree {
.pane-special.left {
@include phoneandtablet {
- @include transition-duration(.2s);
+ @include slMenuTransitions;
display: block !important;
right: auto !important;
.createBtnPos {
+ height: inherit;
overflow-y: hidden;
overflow-x: hidden;
- }
+ }
}
@include phonePortrait {
width: $phoneMenuSizePortrait !important;
@@ -93,8 +96,8 @@
.pane-special.right {
@include phoneandtablet {
- @include transition-duration(.2s);
- width: auto !important;
+ @include slMenuTransitions;
+ width: auto !important;
}
@include phonePortrait {
left: $phoneMenuSizePortrait !important;
@@ -121,7 +124,7 @@
.button-pos {
position: absolute;
- @include transition-duration(.2s);
+ @include slMenuTransitions;
}
.object-header-mobile {
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 85d4a78b7a..764fdfd098 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -80,3 +80,8 @@
@content
}
}
+
+@mixin slMenuTransitions {
+ @include transition-duration(.5s);
+ transition-timing-function: ease;
+}