Add paper texture to toolbar and sidenav

UI/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -145,7 +145,7 @@
          sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -</div>
     -->
 <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <md-toolbar class="md-tall" layout-align="start start">
         <div class="md-toolbar-tools sg-padded" layout="row" layout-align="start start">
           <md-button class="iconButton sg-button-navicon" ng-click="openBottomSheet()">
@@ -210,7 +210,6 @@
             <md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
             </md-button>
-            <!--todo: provide live data for this group-->
             <div class="sg-date-group" layout="column" layout-align="space-between end">
               <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
               <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
@@ -245,7 +244,7 @@
 
       <div layout="row" class="md-flex" layout-align="space-between">
 
-        <md-content class="view-list" style="position: relative;" id="contactsList">
+        <md-content class="view-list" id="contactsList">
           <header class="sg-md-subheader">
             <h2 class="sg-md-subhead-solo fg-sogoBlue-700">Contacts</h2>
           </header>

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

@@ -18,7 +18,6 @@
 [id='contactsList'] {
   border-top: 44px solid transparent;   // padding for the header.subheader,
   border-bottom: 2px solid transparent; //close to a hack
-  z-index: 10;
 
   // In use in MAILER messages list but re-usable
   // --------------------------------------------

UI/WebServerResources/scss/components/sidenav/sidenav.scss

@@ -106,9 +106,15 @@ md-sidenav {
   & md-content,
   & md-toolbar {
     background-color: inherit;
+    background-image: url("../img/cardboard-transp.png");
+    background-blend-mode: multiply;
   }
 }
 
+.md-sidenav-left md-toolbar {
+  box-shadow: none;
+}
+
 // MAILER Folder tree (in the left sidenav
 // ---------------------------------------
 $i: 1;
@@ -122,7 +128,7 @@ $i: 1;
   [class*="sg-child-level"] {
     margin-right: 1em;
   };
-// This hack is so BAD I'm ashame putting it in the shame file
+// This hack is so BAD I am ashame putting it in the shame file
 // -----------------------------------------------------------
 // Folder tree's controler function are very intricate, the way
 // elements are marked as 'active reminds me of good old time JQuery
@@ -130,7 +136,7 @@ $i: 1;
 // selection, but I don't wan't to mess in that script.
 // Here's the hack : on selection I use the parent > child selector to
 // change the definition of the icon's class. Yes, this means that
-// md-icon-folder:before as the value of md-icon-folder:before:before,
+// md-icon-folder:before as the value of md-icon-folder-open:before,
 // and this is wrong !
 
 .sg-active i.md-icon-folder:before {

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

@@ -13,8 +13,11 @@ $toolbar-padding: $mg;
 // must be declare in containers with sg-padded
 md-toolbar {
   padding: $toolbar-padding 0;
-  box-shadow: none;
+  z-index: $z-index-toolbar;
   font-size: initial;
+  background-image: url("../img/felt-transp.png");
+  background-blend-mode: luminosity;
+  box-shadow: $whiteframe-shadow-z1;
 }
 
 .md-toolbar-tools {
@@ -71,3 +74,5 @@ hgroup {
     order: 3;
   }
 }
+
+

UI/WebServerResources/scss/core/variables.scss

@@ -124,8 +124,9 @@ $z-index-toast: 90 !default;
 $z-index-bottom-sheet: 70 !default;
 $z-index-sidenav: 60 !default;
 $z-index-backdrop: 50 !default;
+$z-index-toolbar: 10 !default;
 $z-index-fab: 20;
-$z-index-view: 10;
+$z-index-view: 9;
 
 // Easing Curves
 //--------------------------------------------

UI/WebServerResources/scss/views/_view.scss

@@ -33,7 +33,13 @@ $detailView-width: grid-step(8) !global;
 //  min-width: ($listView-width - ($pitch * 2));
 //}
 
+[class|="view"] {
+  position: relative;
+
+}
+
 .view-list {
+  z-index: ($z-index-view -1);
   min-width: ($listView-width - ($pitch * 2));
   @include at(md){
     @include flex-col(md, 7, 1, 1);
@@ -48,7 +54,6 @@ $detailView-width: grid-step(8) !global;
 }
 
 .view-detail {
-  position: relative;
   z-index: $z-index-view;
   background-color: $background-base-color;
   @include from(lg) {