(css) Improve contacts and messages lists

UI/WebServerResources/scss/_shame.scss

@@ -23,5 +23,5 @@
 
 .sg-tile-content .sg-md-subhead-multi, 
 .sg-tile-content .sg-md-subhead-solo {
-  min-width: 65%;
+  //min-width: 65%;
 }

UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss

@@ -18,12 +18,9 @@
     position: absolute;
   }
 
-  // In use in MAILER messages list but re-usable
-  // --------------------------------------------
-  md-item-content {
-    padding: 0 0 0 $mg;
-    margin: $mg 0;
-    transition: all 0.20s $swift-ease-in-timing-function 0.12s;
+  md-list-item {
+    transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
+                color 0.12s linear;
     &:hover {
       background-color: sg-color($sogoPaper, 300);
       color: sg-color($sogoBlue, 800);
@@ -33,62 +30,44 @@
       color: sg-color($sogoBlue, 800);
     }
     &:focus,
-    &._selected {
+    &.sg-active {
       background-color: sg-color($sogoBlue, 100);
     }
   }
-  .sg-md-subhead-solo {
-    margin: 0;
-  }
 }
 
 .sg {
   &-tile-content {
-    //@extend .md-tile-content; content of :
+    align-items: baseline;
+    flex-direction: row;
+    flex-wrap: wrap;
     flex: 1;
-    padding: $baseline-grid * 2;
-    text-overflow: ellipsis;
-
-    .name,
-    .contact-email {
-      font-weight: $sg-font-light;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-    .subject,
-    .contact-name {
-      font-weight: $sg-font-medium;
-      // dirty fix for vs-repeat damages
-      max-width: 75%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+    justify-content: space-between;
     p {
       margin: $list-p-margin;
       font-size: sg-size(body);
     }
     .msg-date {
+      float: right;
       font-size: sg-size(body);
+      font-weight: $sg-font-light;
+      line-height: $sg-line-height-2;
+      margin-left: 1em;
+    }
+    .#{$md}-subhead-multi,
+    .#{$md}-subhead-solo,
+    .#{$md}-body-multi {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .#{$md}-subhead-multi {
+      @extend .#{$md}-body-1;
+      font-size: initial;
+    }
+    .#{$md}-body-multi {
+      @extend .#{$md}-caption;
     }
-  }
-}
-
-.sg-tile-content {
-  padding: 0 0 0 $layout-gutter-width;
-  .sg-md-subhead-multi,
-  .sg-md-subhead-solo {
-    margin: 0;
-  }
-  .sg-md-body-multi {
-    margin: 0;
-  }
-  a {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-    flex-wrap: wrap;
   }
 }
 .sg-avatar {

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

@@ -8,8 +8,8 @@
 
 // Buttons for the sidenav folder tree
 // ------------------------------------
-sg-folder-tree .md-button,
-md-sidenav md-list .md-button {
+md-sidenav md-list .md-button,
+.view-list md-list .md-button {
   // dirty fix to squash the theme style
   background-color: transparent !important;
   padding: 0 $mg;
@@ -20,6 +20,11 @@ md-sidenav md-list .md-button {
   -webkit-font-smoothing: auto;
 }
 
+.view-list md-list .md-button {
+  // Gain some space in lists
+  padding: 0;
+}
+
 .md-sidenav-left .md-button [class^="md-icon"] {
   //margin-right: 1em;
 }

UI/WebServerResources/scss/components/list/list.scss

@@ -34,7 +34,7 @@ md-list {
   }
 
  .sg-inline-list-icon-label {
-  text-transform: uppercase;
+   text-transform: uppercase;
   }
 }
 
@@ -59,8 +59,8 @@ md-list {
   padding: $layout-gutter-width;
   width: $sg-md-grid-pitch + $baseline-grid;
   height: $sg-md-grid-pitch + $baseline-grid;
+  line-height: $sg-md-grid-pitch + $baseline-grid;
   background-clip: content-box;
-  margin-left: -$layout-gutter-width;
 }
 .md-tile-right {
   margin-right: -$layout-gutter-width;

UI/WebServerResources/scss/core/typography.scss

@@ -386,10 +386,6 @@ html p {
   line-height: $sg-line-height-2;
   font-weight: $sg-font-regular;
 }
-/// @alias .body-1
-.#{$md}-body-multi {
-  @extend .#{$md}-body-1;
-}
 .#{$md}-body-2 {
   $lineHeight : $sg-line-height-2 + $sg-md-typo-baseline;
   font-size: $sg-font-size-2;
@@ -398,10 +394,6 @@ html p {
   margin-top: ($lineHeight * -1);
   margin-bottom: $lineHeight;
 }
-/// @alias .body-2
-.#{$md}-body-solo {
-  @extend .#{$md}-body-2;
-}
 .#{$md}-subhead-1 {
   $lineHeight : $sg-line-height-3;
   font-size: $sg-font-size-3;
@@ -410,10 +402,6 @@ html p {
   margin-top: ($lineHeight * -1);
   margin-bottom: $lineHeight;
 }
-/// @alias .subhead-1
-.#{$md}-subhead-multi {
-  @extend .#{$md}-subhead-1;
-}
 .#{$md}-subhead-2 {
   $lineHeight : $sg-line-height-3 + $sg-md-typo-baseline;
   font-size: $sg-font-size-3;

UI/WebServerResources/scss/views/MailerUI.scss

@@ -11,6 +11,16 @@
   transform: translateY(-100%); // Compensate the container top-margin
 }
 
+.unread {
+  .#{$md}-subhead-multi,
+  .#{$md}-body-multi {
+    font-weight: $sg-font-medium;
+  }
+  .msg-date {
+    color: sg-color($sogoBlue, 600);
+  }
+}
+
 .msg-header-content {
   display: flex;
   flex-direction: column;