[Mobile] Right Pane sets

Right pane sets the size of itself,
causing the left pane to re-adjust
to fit the screen based on it. Also
transitions work on the slide and the
fade in.

platform/commonUI/general/res/css/theme-espresso.css

@@ -756,106 +756,137 @@ mct-container {
 @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 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.2s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
-    width: 0px !important;
+    -moz-transition-property: opacity;
-    right: auto !important;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    -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;
+    opacity: 0;
+    right: 100% !important;
+    width: auto !important;
     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 58, ../sass/mobile/_layout.scss */
+  /* line 60, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.2s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
-    width: auto !important;
+    left: auto !important;
-    left: 0px !important; } }
+    width: 100% !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 68, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.2s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -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;
+    opacity: 1;
     display: block !important;
-    right: 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 68, ../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 68, ../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 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    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 68, ../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 87, ../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;
-    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 87, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  .browse-showtree .pane-special.left {
-    left: 80% !important; } }
+    right: 19px !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 87, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  .browse-showtree .pane-special.left {
-    left: 30% !important; } }
+    right: 66% !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 87, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  .browse-showtree .pane-special.left {
-    left: 35% !important; } }
+    right: 600px !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 87, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    right: 78% !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 91, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    left: 25% !important; } }
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    left: 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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 19px !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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 66% !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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 600px !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 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 78% !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 107, ../sass/mobile/_layout.scss */
+  /* line 111, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     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 113, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
-    -moz-transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.2s;
+    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.2s;
+    transition-duration: 0.35s;
     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) {
+@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 120, ../sass/mobile/_layout.scss */
+  /* line 124, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
+@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 124, ../sass/mobile/_layout.scss */
+  .object-header-mobile {
+    position: relative;
+    left: 35px; } }
 
 @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 135, ../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 133, ../sass/mobile/_layout.scss */
+  /* line 141, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2867,11 +2898,11 @@ label.checkbox.custom {
   @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 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 125%; } }
+      font-size: 25px; } }
   @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 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 175%; } }
+      font-size: 29px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {

platform/commonUI/general/res/sass/mobile/_constants.scss

@@ -67,8 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-$phoneMenuSizePortrait: 80%;
+$phoneMenuSizePortrait: 19px;
-$phoneMenuSizeLandscape: 30%;
+$phoneMenuSizeLandscape: 66%;
-$tabletMenuSizePortrait: 35%;
+$tabletMenuSizePortrait: 600px;
-$tabletMenuSizeLandscape: 25%;
+$tabletMenuSizeLandscape: 78%;
 $desktopMenuSize: 25%;

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -20,8 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// NOTE: Added to adjust the browse folder left list view
-
 .browse-wrapper,
 .pane-special {
     @include phoneandtablet {
@@ -48,8 +46,10 @@
     .pane-special.left {
         @include phoneandtablet {
             @include slMenuTransitions;
-            width: 0px !important;
+            @include trans-prop-nice(opacity, .35s);
-            right: auto !important;
+            opacity: 0;
+            right: 100% !important;
+            width: auto !important;
             overflow-y: hidden;
             overflow-x: hidden;       
         }
@@ -58,8 +58,8 @@
     .pane-special.right {       
         @include phoneandtablet {         
             @include slMenuTransitions;
-            width: auto !important;
+            left: auto !important;
-            left: 0px !important;
+            width: 100% !important;
         }
     }    
 }
@@ -68,8 +68,28 @@
     .pane-special.left {
         @include phoneandtablet {
             @include slMenuTransitions;
+            @include trans-prop-nice(opacity, .4s);
+            opacity: 1;
             display: block !important;
-            right: auto !important;
+            width: auto !important;
+        }
+        @include phonePortrait {
+            right: $phoneMenuSizePortrait !important;
+        }
+        @include phoneLandscape {
+            right: $phoneMenuSizeLandscape !important;
+        }
+        @include tabletPortrait {
+            right: $tabletMenuSizePortrait !important;
+        }
+        @include tabletLandscape {
+            right: $tabletMenuSizeLandscape !important;
+        }
+    }
+    .pane-special.right {
+        @include phoneandtablet {
+            @include slMenuTransitions;
+            left: auto !important;
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -84,24 +104,6 @@
             width: $tabletMenuSizeLandscape !important;
         }
     }
-    .pane-special.right {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            width: auto !important;
-        }
-        @include phonePortrait {
-            left: $phoneMenuSizePortrait !important;
-        }
-        @include phoneLandscape {
-            left: $phoneMenuSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            left: $tabletMenuSizePortrait !important;
-        }
-        @include tabletLandscape {
-            left: $tabletMenuSizeLandscape !important;
-        }
-    }
 }
 
 .mobile-splitter {
@@ -118,10 +120,14 @@
 }
 
 .object-header-mobile {
-    @include phoneandtablet {
+    @include phone {
         position: relative;
         left: 30px;
     }    
+    @include tablet {
+        position: relative;
+        left: 35px;
+    }
 }
 
 .mobile-hide {

platform/commonUI/general/res/sass/mobile/_mixins.scss

@@ -89,6 +89,6 @@
 }
 
 @mixin slMenuTransitions {
-    @include transition-duration(.2s);
+    @include transition-duration(.35s);
     transition-timing-function: ease;
 }

platform/commonUI/general/res/sass/mobile/controls/_menus.scss

@@ -2,10 +2,10 @@
 .mobile-menu-icon {
     display: inline-block;
     @include phone {
-        font-size: 125%;
+        font-size: 25px;
     }
     @include tablet {
-        font-size: 175%;
+        font-size: 29px;
     }      
     @include desktop {
         display: none;