feat(examples): hero header for demo site

justindujardin · Dec 28, 2015 · 90464af · 90464af
1 parent d419853
commit 90464af
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 5 deletions.
diff --git a/examples/app.html b/examples/app.html
@@ -1,14 +1,17 @@
-<md-toolbar class="md-whiteframe-z1">
+<md-toolbar class="fixed-toolbar md-whiteframe-z1" md-peekaboo [breaks]="190">
   <div class="md-toolbar-tools">
-    <button md-button class="md-icon-button" aria-label="Settings">
-      <i md-icon class="md-light">menu</i>
-    </button>
     <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>
+<button md-button class="md-hamburger md-icon-button" aria-label="Settings">
+  <i md-icon class="md-light">menu</i>
+</button>
 
 <md-content class="examples" md-scroll-y layout-padding>
 

diff --git a/examples/app.scss b/examples/app.scss
@@ -5,6 +5,45 @@ $md-font-url: '../public/font/';
 @import "example";
 
 demos-app {
+
+  h1, h2, h3, h4, h5 {
+    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 {
+    position: fixed;
+    top: 0;
+    z-index: $z-index-sidenav;
+    h2 {
+      padding-left: 52px;
+    }
+  }
+
+  md-toolbar.md-hero {
+    padding: 115px 16px 0;
+    h1 {
+      color: #fff;
+      font-size: 56px;
+      font-weight: 400;
+      line-height: 1.5;
+      margin: 0 auto;
+      overflow: hidden;
+      width: 1160px;
+      white-space: nowrap;
+    }
+  }
+
   md-content {
     max-width: 800px;
     > section {

diff --git a/ng2-material/all.scss b/ng2-material/all.scss
@@ -17,6 +17,7 @@
 @import "components/icon/icon";
 @import "components/input/input";
 @import "components/list/list";
+@import "components/peekaboo/peekaboo";
 @import "components/progress_circular/progress_circular";
 @import "components/progress_linear/progress_linear";
 @import "components/radio/radio_button";

diff --git a/ng2-material/all.ts b/ng2-material/all.ts
@@ -34,6 +34,9 @@ export * from './components/progress_linear/progress_linear';
 import {MdProgressCircular} from './components/progress_circular/progress_circular';
 export * from './components/progress_circular/progress_circular';
 
+import {MdPeekaboo} from './components/peekaboo/peekaboo';
+export * from './components/peekaboo/peekaboo';
+
 import {MdRadioButton, MdRadioGroup} from './components/radio/radio_button';
 import {MdRadioDispatcher} from './components/radio/radio_dispatcher';
 export * from './components/radio/radio_button';
@@ -61,6 +64,7 @@ export const MATERIAL_DIRECTIVES: Type[] = CONST_EXPR([
   MdIcon,
   MdInput, MdInputContainer,
   MdList, MdListItem,
+  MdPeekaboo,
   MdProgressLinear,
   MdProgressCircular,
   MdRadioButton, MdRadioGroup,

diff --git a/ng2-material/core/style/variables.scss b/ng2-material/core/style/variables.scss
@@ -20,7 +20,7 @@ $caption-font-size-base:   rem(1.200) !default;
 $baseline-grid:            8px !default;
 $layout-breakpoint-sm:     600px !default;
 $layout-breakpoint-md:     960px !default;
-$layout-breakpoint-lg:     1200px !default;
+$layout-breakpoint-lg:     1280px !default;
 $layout-gutter-width:      ($baseline-grid * 2) !default;
 
 // Typography