Replace mobile detail-view transitions

Minor adjustments to layout

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

@@ -100,11 +100,14 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
 .sg-icon-bar--vertical {
   display: flex;
   flex-direction: column;
-  margin: 0 ($iconButton-padding * -1) 0 $mg;
+  margin: ($iconButton-padding * -1) ($iconButton-padding * -1) 0 $mg;
   font-size: $sg-font-size-3;
   align-items: center;
   // Containers have padding, we compensate to align according to specs
   justify-content: space-between;
+  @include at(sm) {
+  margin-left: $iconButton-padding;
+  }
 }
 
 // NiceToHave: some horizontal or left hand side variant

UI/WebServerResources/scss/views/_view.scss

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