fix(toolbar): move header/footer css to component level

packages/core/src/components/app/app.scss

@@ -147,11 +147,23 @@ sub {
   bottom: -.25em;
 }
 
-
 ion-app {
-  @extend .ion-page
+  position: absolute;
+
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: $z-index-page-container;
+
+  width: 100%;
+  height: 100%;
+
+  contain: layout size style;
 }
 
+
 // Page Container Structure
 // --------------------------------------------------
 
@@ -167,24 +179,6 @@ ion-app {
   opacity: 0;
 }
 
-// Toolbar Container Structure
-// --------------------------------------------------
-
-ion-header,
-ion-footer {
-  position: relative;
-  z-index: $z-index-toolbar;
-  display: block;
-
-  order: 1;
-
-  width: 100%;
-}
-
-ion-header {
-  order: -1;
-}
-
 
 // Misc
 // --------------------------------------------------

packages/core/src/components/footer/footer.ios.scss

@@ -1,3 +1,4 @@
+@import "./footer";
 @import "./footer.ios.vars";
 
 // iOS Footer

packages/core/src/components/footer/footer.md.scss

@@ -0,0 +1,4 @@
+@import "./footer";
+
+// Material Design Footer
+// --------------------------------------------------

packages/core/src/components/footer/footer.scss

@@ -0,0 +1,14 @@
+@import "../../themes/ionic.globals";
+
+// Footer
+// --------------------------------------------------
+
+ion-footer {
+  position: relative;
+  z-index: $z-index-toolbar;
+  display: block;
+
+  order: 1;
+
+  width: 100%;
+}

packages/core/src/components/footer/footer.tsx

@@ -4,6 +4,10 @@ import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-footer',
+  styleUrls: {
+    ios: 'footer.ios.scss',
+    md: 'footer.md.scss'
+  },
   host: {
     theme: 'footer'
   }

packages/core/src/components/header/header.ios.scss

@@ -1,3 +1,4 @@
+@import "./header";
 @import "./header.ios.vars";
 
 // iOS Header

packages/core/src/components/header/header.md.scss

@@ -0,0 +1,4 @@
+@import "./header";
+
+// Material Design Header
+// --------------------------------------------------

packages/core/src/components/header/header.scss

@@ -0,0 +1,14 @@
+@import "../../themes/ionic.globals";
+
+// Header
+// --------------------------------------------------
+
+ion-header {
+  position: relative;
+  z-index: $z-index-toolbar;
+  display: block;
+
+  order: -1;
+
+  width: 100%;
+}

packages/core/src/components/header/header.tsx

@@ -5,7 +5,8 @@ import { createThemedClasses } from '../../utils/theme';
 @Component({
   tag: 'ion-header',
   styleUrls: {
-    ios: 'header.ios.scss'
+    ios: 'header.ios.scss',
+    md: 'header.md.scss'
   },
   host: {
     theme: 'header'