Alternate mobile transitions

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 {