Typograpy : Messages list subheader

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -8,10 +8,12 @@
       width: 100%;
       }
     </style>
+    <header class="md-background sg-md-subheader">
+      <h2 class="sg-md-subhead-solo md-primary md-hue-3">Unread Messages</h2>
+    </header>
 
     <md-list data-vs-repeat = "72"
         data-vs-scroll-parent = "#messagesList">
-      <!--<md-subheader class="md-default-theme md-primary md-hue-3">Unread Messages</md-subheader>-->
       <md-item ng-repeat = "currentMessage in mailbox.$messages track by currentMessage.id"
           data-ng-class = "{unread: !currentMessage.isread}">
         <md-item-content>

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

@@ -10,13 +10,20 @@
 // avoid overspecifying
 // todo: create new classes and refactor templates markup
 [id='messagesList'] {
+  border-top: 44px solid transparent;   // padding for the header.subheader,
+  border-bottom: 2px solid transparent; //close to a hack
+
   md-item-content {
     padding: $layout-gutter-width;
   }
+  .sg-md-subhead-solo {
+    margin: 0;
+  }
 }
 .sg-tile-content {
   padding: 0 0 0 $layout-gutter-width;
-  .sg-md-subhead-multi {
+  .sg-md-subhead-multi,
+  .sg-md-subhead-solo {
     margin: 0;
   }
   .sg-md-body-multi {
@@ -28,4 +35,4 @@
     justify-content: space-between;
     flex-wrap: wrap;
   }
-}
+}

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

@@ -1 +1,15 @@
-@import 'extends';
+@import 'extends';
+
+.sg-md-subheader {
+    padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
+    position: fixed;
+    background-color: rgb(247,241,220); // default theme background
+    z-index: 58;
+    box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+// WIdth for message list
+// ----------------------------------------------------------------------------
+[id = "messagesList"] .sg-md-subheader {
+  width: 390px; // todo : convert this in grid-pitch
+  transform: translateY(-100%); // Compensate the container top-margin
+}

UI/WebServerResources/scss/core/variables.scss

@@ -38,6 +38,7 @@ $bottombar-color: #212121;
 // ------------------------------
 
 $baseline-grid:            8px !default;
+$sg-md-grid-pitch: 8 * $baseline-grid;
 $layout-breakpoint-sm:     600px !default;
 $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;

UI/WebServerResources/scss/styles.scss

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