chore: make header hero mobile friendly

 - make the toolbar height styles mixins so you can style a div to be toolbar height in the various flavors.
 - add styles cloned from the google design page with our custom breakpoints.

examples/app.html

@@ -1,17 +1,25 @@
-<md-toolbar class="fixed-toolbar md-whiteframe-z1" md-peekaboo [breaks]="190">
+<md-toolbar class="fixed-toolbar md-whiteframe-z1" md-peekaboo [breaks]="190" action="show">
   <div class="md-toolbar-tools">
     <h2>
       <span>Angular2 Material</span>
       <span *ngIf="version" class="md-caption" flex>v{{version}}</span>
     </h2>
   </div>
 </md-toolbar>
-<md-toolbar class="md-hero">
-  <h1 md-peekaboo [breaks]="192" action="hide">Angular2 Material</h1>
+<md-toolbar class="hero">
+  <h1 md-peekaboo [breaks]="72" action="hide">Angular2 Material</h1>
 </md-toolbar>
-<button md-button class="md-hamburger md-icon-button" aria-label="Settings">
-  <i md-icon class="md-light">menu</i>
-</button>
+<md-toolbar class="fixed-toolbar">
+  <div class="md-toolbar-tools">
+    <button md-button class="md-hamburger md-icon-button" aria-label="Settings">
+      <i md-icon class="md-light">menu</i>
+    </button>
+    <h2 md-peekaboo [breaks]="72" action="show">Angular2 Material</h2>
+    <span flex></span>
+    <span md-peekaboo [breaks]="72" action="show" *ngIf="version" class="md-caption">v{{version}}</span>
+  </div>
+</md-toolbar>
+<md-toolbar class="shadow-toolbar md-whiteframe-z1" md-peekaboo [breaks]="190" action="show"></md-toolbar>
 
 <md-content class="examples" md-scroll-y layout-padding>
 

examples/app.scss

@@ -10,27 +10,20 @@ demos-app {
     font-family: $font-family;
   }
 
-
-  [md-button].md-icon-button.md-hamburger {
-    position: fixed;
-    z-index: $z-index-sidenav;
-    border: 0;
-    display: block;
-    overflow: hidden;
-    top: $baseline-grid * 1.5;
-    left: $baseline-grid * 1.5;
-  }
-
-  .fixed-toolbar {
+  .fixed-toolbar, .shadow-toolbar {
     position: fixed;
     top: 0;
     z-index: $z-index-sidenav;
-    h2 {
-      padding-left: 52px;
+    &.shadow-toolbar {
+      z-index: $z-index-sidenav - 1;
+    }
+    .md-hamburger {
+      color: md-color($md-background);
     }
   }
 
-  md-toolbar.md-hero {
+  md-toolbar.hero {
+    @include md-hero-toolbar();
     padding: 115px 16px 0;
     h1 {
       color: #fff;
@@ -42,6 +35,21 @@ demos-app {
       width: 1160px;
       white-space: nowrap;
     }
+    @media screen and (max-width: $layout-breakpoint-lg) {
+      h1 {
+        width: 760px;
+      }
+    }
+    @media screen and (max-width: $layout-breakpoint-sm) {
+      height: 128px;
+      padding-top: 72px;
+      @include md-tall-toolbar();
+      h1 {
+        font-size: $title-font-size-base;
+        width: 360px;
+        margin-left: 0;
+      }
+    }
   }
 
   md-content {

index.html

@@ -22,7 +22,7 @@
 
 </script>
 <a href="https://github.com/justindujardin/ng2-material"><img
-  style="position: absolute; top: 0; right: 0; border: 0;z-index:10;"
+  style="position: absolute; top: 0; right: 0; border: 0;z-index:100;"
   src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
   alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
 

ng2-material/components/toolbar/toolbar.scss

@@ -17,12 +17,29 @@ $toolbar-height-mobile-portrait: 56px !default;
 $toolbar-tools-height-mobile-landscape: 48px !default;
 $toolbar-height-mobile-landscape: 48px !default;
 
-
 $toolbar-indent-margin: 64px !default;
 $toolbar-padding: 16px !default;
 
 $icon-button-margin-offset: rem(-0.800) !default;
 
+@mixin md-tall-toolbar() {
+  height: $toolbar-tall-height;
+  min-height: $toolbar-tall-height;
+  max-height: $toolbar-tall-height;
+}
+
+@mixin md-medium-tall-toolbar() {
+  height: $toolbar-medium-tall-height;
+  min-height: $toolbar-medium-tall-height;
+  max-height: $toolbar-medium-tall-height;
+}
+
+@mixin md-hero-toolbar() {
+  height: $toolbar-hero-height;
+  min-height: $toolbar-hero-height;
+  max-height: $toolbar-hero-height;
+}
+
 md-toolbar {
   box-sizing: border-box;
   display: flex;
@@ -50,22 +67,15 @@ md-toolbar {
   }
 
   &.md-tall {
-    height: $toolbar-tall-height;
-    min-height: $toolbar-tall-height;
-    max-height: $toolbar-tall-height;
+    @include md-tall-toolbar();
   }
 
   &.md-hero {
-    height: $toolbar-hero-height;
-    min-height: $toolbar-hero-height;
-    max-height: $toolbar-hero-height;
+    @include md-hero-toolbar();
   }
 
   &.md-medium-tall {
-    height: $toolbar-medium-tall-height;
-    min-height: $toolbar-medium-tall-height;
-    max-height: $toolbar-medium-tall-height;
-
+    @include md-medium-tall-toolbar();
     .md-toolbar-tools {
       height: 48px;
       min-height: 48px;
@@ -123,14 +133,14 @@ md-toolbar {
     margin-top: 0;
     margin-bottom: 0;
   }
-  &> [md-button]:first-child {
+  & > [md-button]:first-child {
     margin-left: $icon-button-margin-offset;
   }
-  &> [md-button]:last-child {
+  & > [md-button]:last-child {
     margin-right: $icon-button-margin-offset;
   }
 
-  &> md-menu:last-child {
+  & > md-menu:last-child {
     margin-right: $icon-button-margin-offset;
     & > [md-button] {
       margin-right: 0;
@@ -143,8 +153,7 @@ md-toolbar {
 }
 
 // Handle mobile portrait
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and
-  (orientation: portrait) {
+@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and(orientation: portrait) {
   md-toolbar {
     min-height: $toolbar-height-mobile-portrait;
   }
@@ -156,8 +165,7 @@ md-toolbar {
 }
 
 // Handle mobile landscape
-@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and
-  (orientation: landscape) {
+@media only screen and (min-width: 0) and (max-width: $layout-breakpoint-sm) and(orientation: landscape) {
   md-toolbar {
     min-height: $toolbar-height-mobile-landscape;
   }