feat(subheader): add non-sticky subheader component

ng2-material/all.scss

@@ -23,6 +23,7 @@
 @import "components/radio/radio_button";
 @import "components/radio/radio_group";
 @import "components/sidenav/sidenav";
+@import "components/subheader/subheader";
 @import "components/switcher/switch";
 @import "components/toolbar/toolbar";
 @import "components/tabs/tabs";

ng2-material/all.ts

@@ -44,6 +44,9 @@ export * from './components/radio/radio_dispatcher';
 import {MdSwitch} from './components/switcher/switch';
 export * from './components/switcher/switch';
 
+import {MdSubheader} from "./components/subheader/subheader";
+export * from './components/subheader/subheader';
+
 import {MdToolbar} from './components/toolbar/toolbar';
 export * from './components/toolbar/toolbar';
 
@@ -68,6 +71,7 @@ export const MATERIAL_DIRECTIVES: Type[] = CONST_EXPR([
   MdProgressLinear,
   MdProgressCircular,
   MdRadioButton, MdRadioGroup,
+  MdSubheader,
   MdSwitch,
   MdToolbar,
   MdTab, MdTabs

ng2-material/components/subheader/subheader.scss

@@ -0,0 +1,47 @@
+@import "../../core/style/variables";
+@import "../../core/style/mixins";
+@import "../../core/style/default-theme";
+
+$subheader-line-height: 1em !default;
+$subheader-font-size: rem(1.4) !default;
+$subheader-padding: ($baseline-grid * 2) !default;
+$subheader-font-weight: 500 !default;
+$subheader-margin: 0 0 0 0 !default;
+$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.16) !default;
+
+.md-subheader {
+  display: block;
+  font-size: $subheader-font-size;
+  font-weight: $subheader-font-weight;
+  line-height: $subheader-line-height;
+  margin: $subheader-margin;
+  position: relative;
+
+  .md-subheader-inner {
+    display: block;
+    padding: $subheader-padding;
+  }
+
+  .md-subheader-content {
+    display: block;
+    z-index: 1;
+    position: relative;
+  }
+}
+
+// Theme
+
+.md-subheader {
+  color: md-color($md-foreground, secondary-text, 0.23); //'{{ foreground-2-0.23 }}';
+  background-color: md-color($md-background,A100); //'{{background-color}}';
+
+  &.md-primary {
+    color: md-color($md-primary); //'{{primary-color}}'
+  }
+  &.md-accent {
+    color: md-color($md-accent); //'{{accent-color}}'
+  }
+  &.md-warn {
+    color: md-color($md-warn); //'{{warn-color}}'
+  }
+}

ng2-material/components/subheader/subheader.ts

@@ -0,0 +1,16 @@
+import {Component, View} from "angular2/core";
+
+@Component({
+  selector: 'md-subheader',
+  host: {
+    'class': 'md-subheader'
+  }
+})
+@View({
+  template:`
+    <div class="md-subheader-inner">
+      <span class="md-subheader-content"><ng-content></ng-content></span>
+    </div>`
+})
+export class MdSubheader {
+}

test/components/subheader/subheader_spec.ts

@@ -0,0 +1,6 @@
+import {componentSanityCheck} from "../../util";
+
+export function main() {
+  componentSanityCheck('Subheader', 'md-subheader', '<md-subheader></md-subheader>');
+}
+