Adjust z-indexes and box-shadows

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -2,13 +2,13 @@
 <container
     xmlns = "http://www.w3.org/1999/xhtml"
     >
-  <md-content flex = "40" style = "min-width: 300px; position: relative;" id = "messagesList">
+  <md-content class="md-whiteframe-z2" flex ="40" style="min-width: 300px; position: relative;" id = "messagesList">
     <style>
       .vs-repeat-repeated-element {
       width: 100%;
       }
     </style>
-    <header class="md-background sg-md-subheader">
+    <header class="md-background sg-md-subheader sg-avatar-left">
       <h2 class="sg-md-subhead-solo md-primary md-hue-3">Unread Messages</h2>
     </header>
 

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -263,7 +263,7 @@
     </div>
 
 <!-- Sidenav -->
-    <md-sidenav class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
+    <md-sidenav class="md-sidenav-left md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
       <md-toolbar class="md-tall" layout-align="end start">
         <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
           <span class="sg-md-title md-flex">{{activeUser.identification}}</span>

UI/WebServerResources/scss/_shame.scss

@@ -13,3 +13,15 @@
 // 4. Try and clean shame.css up when you have some down time.
 //    Even better, get a tech-debt story in which you can dedicate actual sprint time to it.
 //
+
+// 1. Component : autoScrollList
+// 2. Suddently, the date span of the first list item of the messagae-list do not
+//    justify to the extreme right of his container (flex-box)
+//    After more than an hour spent analysing trying to find differences with other
+//    list element. I still can't find any.
+// 3. I decide to apply a minimal width to the left element until I found a culprit.
+
+.sg-tile-content .sg-md-subhead-multi, 
+.sg-tile-content .sg-md-subhead-solo {
+  min-width: 50%;
+}

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

@@ -12,6 +12,7 @@
 [id='messagesList'] {
   border-top: 44px solid transparent;   // padding for the header.subheader,
   border-bottom: 2px solid transparent; //close to a hack
+  z-index: 10;
 
   md-item-content {
     padding: $layout-gutter-width;

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

@@ -8,7 +8,6 @@
 .sg {
   &-tile-content {
     @extend .md-tile-content;
-    margin-left: $layout-gutter-width; // dirty fix for vs-repeat damages
     .name  {
       margin: $list-h3-margin;
       font-weight: $list-h3-font-weight;
@@ -37,7 +36,22 @@
 }
 // The right tile for a list item (avatar container)
 // ----------------------------------------------------------------------------
-.md-tile-left {
+
+.md-tile-left,
+.md-tile-right {
   border-radius: 100%;
-  min-height: 56px;
+  padding: $layout-gutter-width;
+  width: $sg-md-grid-pitch + $baseline-grid;
+  height: $sg-md-grid-pitch + $baseline-grid;
+  background-clip: content-box;
+  margin-left: -$layout-gutter-width;
 }
+.md-tile-right {
+  margin-right: -$layout-gutter-width;
+}
+.md-tile-left:before {
+  content: "\f251";
+  font-family: 'Material Design Iconic Font';
+  font-size: 40px;
+  color: rgba(0, 0, 0, 0.26);
+}

UI/WebServerResources/scss/components/subheader/subheader.scss

@@ -12,4 +12,20 @@
 [id = "messagesList"] .sg-md-subheader {
   width: 390px; // todo : convert this in grid-pitch
   transform: translateY(-100%); // Compensate the container top-margin
+}
+.sg-md-subheader {
+  font-size: $sg-font-size-2;
+  font-weight: $sg-font-medium;
+}
+.sg-md-subheader > * {
+  font-size: inherit;
+  font-weight: inherit;
+}
+.sg-md-subheader.sg-avatar {
+  &-left {
+    padding-left: $sg-md-grid-pitch + $baseline-grid;
+  }
+  &-right {
+    padding-left: $baseline-grid * 2;
+  }
 }

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

@@ -1,2 +1,6 @@
 /*! toolbar/_extends.scss - */
-@import '../../../angular-material/src/components/toolbar/toolbar.scss';
+@import '../../../angular-material/src/components/toolbar/toolbar.scss';
+
+[id='messagesList'] {
+  @extend .md-whiteframe-z2;
+}

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

@@ -1 +1,5 @@
-@import 'extends';
+@import 'extends';
+
+.md-toolbar {
+  z-index: 20;
+}

UI/WebServerResources/scss/styles.scss

@@ -57,6 +57,7 @@
 @import 'components/button/button';
 @import 'components/backdrop/backdrop.scss';
 @import 'components/subheader/subheader.scss';
+@import 'components/whiteframe/whiteframe.scss';
 
 
 // core styles - need to be after components till settings are correctly implemented