Alternate mobile transitions

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -8,7 +8,7 @@
    xmlns:uix="OGo:uix">
 
 <md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1" ng-class="">
-  <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
+  <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
   <header class="msg-header">
 
       <div class="msg-header-content">

UI/WebServerResources/scss/components/button/_button.scss

@@ -92,6 +92,11 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
     border-radius: 50%;
   }
 }
+// First button must have it's icon align to margin/padding
+md-content.md-padding > .iconButton:first-child {
+  margin-top: ($iconButton-padding * -1);
+  margin-left: ($iconButton-padding * -1);
+  }
 
 
 
@@ -128,6 +133,7 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
 }
 
 .sg-button-navicon {
+  top: ($mg * -1);
   margin-left: ($mg * -1);
   width: $touch-zone;
   height: $touch-zone;

UI/WebServerResources/scss/components/content/content.scss

@@ -1,4 +1,34 @@
 @import 'extends';
+
+// angular-material is mobile first (is it ?) SOGo is not. We're inversing
+// the media definitions and replacing magic numbers with variables
+// ----------------------------------------------------------------------------
 md-content {
+
+  display: block;
+  position: relative;
+  overflow: auto;
   background-color: transparent;
+  -webkit-overflow-scrolling: touch;
+
+  &[md-scroll-y] {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  &[md-scroll-x] {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  &[md-scroll-xy] {
+  }
+
+  &.md-padding {
+    padding: $mg;
+  }
 }
+// Overrides out of specs angular-material definition
+@include at(sm) {
+  md-content.md-padding {
+    padding: $mg;
+  }
+}

UI/WebServerResources/scss/components/toolbar/toolbar.scss

@@ -7,7 +7,7 @@ md-toolbar {
 }
 
 .md-toolbar-tools.md-toolbar-tools-top {
-  padding-top: $bl;
+  padding-top: $mg;
 }
 
 .md-toolbar-tools.md-toolbar-tools-bottom {

UI/WebServerResources/scss/views/_view.scss

@@ -62,26 +62,33 @@ $detailView-width: grid-step(8) !global;
     width: 100%;
     min-width: 100%;
     background-color: sg-color($sogoPaper, 50);
-    transform: translateX(-100%);
-    transition: all 0.2s $swift-ease-in-out-timing-function;
+    transform: translateX(-100%) scale(1);
+    filter: opacity(1);
+    transform-origin: 50% 50%;
+    transition: all 0.5s $swift-ease-in-out-timing-function;
     &.sg-close {
-      transition-delay: 0.2s;
-      transform: translateX(-200%);
+      transition: all 0.35s $swift-ease-in-out-timing-function;
+      transition-delay: 0.15s;
+      transform: translateX(-100%) scale(0);
+      //transform: translateX(-200%);
       &.ng-enter {
-        filter: opacity(0);
+        transform: translateX(-100%) scale(0);
       }
     }
     &.ng-enter {
-      transform: translateX(0);
+      transform: translateX(-100%) scale(0);
+      //transform: translateX(0);
     }
     &.ng-enter.ng-enter-active,
     &.ng-leave {
+      transform: translateX(-100%) scale(1);
       filter: opacity(1);
-      transform: translateX(-100%);
+      //transform: translateX(-100%);
     }
     &.ng-leave.ng.leave-active {
+      transform: translateX(-100%) scale(0);
       filter: opacity(1);
-      transform: translateX(-200%);
+      //transform: translateX(-200%);
     }
     [class *= md-whiteframe-] {
       box-shadow: none;