Add responsiveness (First draft)

UI/WebServerResources/scss/views/ContactsUI.scss

@@ -3,6 +3,7 @@
 [id = "contactsList"] .sg-md-subheader {
   transform: translateY(-100%); // Compensate the container top-margin
 }
+
 // md is overqualifying, we have to do the same to override
 md-content[ui-view="card"] {
   margin: 0 auto;
@@ -11,7 +12,7 @@ md-content[ui-view="card"] {
 
 // md is overqualifying, we have to do the same to override
 md-card.viewer {
-  min-width: ($detailView-width - ($pitch * 2));
+
 }
 
 // Contact editor

UI/WebServerResources/scss/views/MailerUI.scss

@@ -29,8 +29,8 @@
   @extend .sg-md-title;
   margin: 0;
   margin-bottom: $line;
-  font-weight: $sg-font-regular;
   white-space: normal;
+  font-weight: $sg-font-regular;
 }
 
 .mailer_mailcontent {

UI/WebServerResources/scss/views/_view.scss

@@ -13,6 +13,7 @@
 .view[layout=row] {
   max-height: 100%;
 }
+
 // We make intensive use of the list/detail view pattern, here are some base
 // definitions for this
 // ----------------------------------------------------------------------------
@@ -32,38 +33,42 @@ $detailView-width: grid-step(8) !global;
 //}
 
 .view-list {
-  flex: 0 1 $listView-width;
   min-width: ($listView-width - ($pitch * 2));
+  @include at(md){
+    @include flex-col(md, 7, 1, 1);
+  }
+  @include from(lg) {
+    @include flex-col(lg, 6, 1, 0);
+  }
+  @include to(sm) {
+    width: 100%;
+    min-width: 100%;
+  }
 }
 
 .view-detail {
-  flex: 1 2 $detailView-width;
-  min-width: ($detailView-width - $pitch);
-  max-width: ($detailView-width + $pitch);
-  margin: 0 auto;
+  position: relative;
+  z-index: $z-index-view;
+  @include from(lg) {
+    @include flex-col(lg, 8, 2, 1);
+    margin: 0 auto $mg auto;
+  }
+  @include at(md) {
+    @include flex-col(md, 9);
+    margin: 0;
+  }
+  @include to(sm) {
+    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%);
+    }
+    [class *= md-whiteframe-] {
+      box-shadow: none;
+    }
+  }
 }
 
-
-[ui-view="message"] {
-
-  &.ng-enter {
-    border: 4px solid red;
-    transition: all 1s linear;
-
-    &.ng-enter-active {
-      border: 4px solid green;
-      transition: all 1s linear;
-    }
-  }
-
-  &.ng-leave {
-    border: 4px solid blue;
-    transition: all 1s linear;
-
-    &.ng-leave-active {
-      border: 4px solid blue;
-      transition: all 1s linear;
-      filter: opacity(0);
-    }
-  }
-}