fix(toolbar): adds shadow when content moves under 'scroll shrink' toolbar

Author: Robert Messerle

docs/app/css/style.css

@@ -202,6 +202,12 @@ code:not(.highlight) {
 .docs-menu li {
   margin: 0;
 }
+.docs-menu > li:nth-child(1) {
+  border-top: none;
+}
+.md-whiteframe-glow-z2 {
+  box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2), 0px 0 4px 3px rgba(0, 0, 0, 0.14), 0px 0px 8px 1px rgba(0, 0, 0, 0.12);
+}
 .docs-menu > li {
   border-top: 1px solid rgba(0, 0, 0, 0.12);
 }

docs/config/template/index.template.html

@@ -21,7 +21,7 @@
               md-component-id="left"
               md-is-locked-open="$mdMedia('gt-sm')">
 
-    <md-toolbar>
+    <md-toolbar class="md-whiteframe-glow-z2">
       <h1 class="md-toolbar-tools">
         <a ng-href="#/" layout="row" flex class="docs-logo">
           <md-icon md-svg-src="menu"></md-icon>
@@ -59,7 +59,7 @@ <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="headi
   </md-sidenav>
 
   <div layout="column" tabIndex="-1" role="main" flex>
-    <md-toolbar>
+    <md-toolbar class="md-whiteframe-glow-z2">
 
       <div class="md-toolbar-tools docs-toolbar-tools" ng-click="openMenu()" tabIndex="-1">
         <md-button class="md-icon-button" hide-gt-sm aria-label="Toggle Menu">

src/components/toolbar/toolbar.js

@@ -127,6 +127,8 @@ function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming) {
             Math.max(0, y + scrollTop - prevScrollTop)
           );
 
+          element[y ? 'addClass' : 'removeClass']('md-whiteframe-z1');
+
           element.css(
             $mdConstant.CSS.TRANSFORM,
             'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)'

src/components/toolbar/toolbar.scss

@@ -18,6 +18,7 @@ md-toolbar {
   font-size: 2.0rem;
   min-height: $baseline-grid * 8;
   width: 100%;
+  transition: box-shadow $swift-ease-in-out-duration linear;
 
   *,
   *:before,